Core sketchy rendering lib used by wired components

rough, sketchy, hand-drawn, hand drawn, lit-element, lit-html, prototyping, web-components, webcomponents, wireframe, wireframes
npm install wired-lib@2.1.0


Published on Vaadin  Directory

wired-elements 👉

Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look.

alt Preview

The elements are drawn with enough randomness that no two renderings will be exactly the same - just like two separate hand drawn shapes.

Try now

Play with wired-elements:

Wired Elements

Try it with a framework

Wired Elements in Vue

Wired Elements in React

Wired Elements in Svelte

Wired Elements in Angular


The package (wired-elements) exports all components in the wired category. List of all wired elements can be found here.

Add wired-elements to your project:

npm i wired-elements

or add individual controls

npm i wired-button
npm i wired-input


Import into your module script:

import { WiredButton, WiredInput } from "wired-elements"

Alternatively, load a bundled version from the dist folder or from CDN:

<script src=""></script>

Use it in your web page:

<wired-input placeholder="Enter name"></wired-input>
<wired-button>Click Me</wired-button>

Learn about web components here.

Component API

To view details of each component - properties, events, css-properties, etc, are provided in their package folder. List of all packages


Demo of all components is available at

Dev Environment

View the Dev environment page for instructions.


MIT License (c) Preet Shihn