Skip to content
Collection of elements that appear hand drawn. Great for wireframes.
Branch: master
Clone or download
Latest commit 08eff4d Mar 3, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore wired-lib -> ts Mar 1, 2019
LICENSE wired elements May 22, 2018 Added a Vaadin Directory badge Aug 16, 2018
package-lock.json . Mar 2, 2019
package.json . Mar 2, 2019

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 live on StackBlitz playground:

Wired Elements

Wired Elements in React


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 individual controls

npm i wired-button


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.


Demo of all components is available at

Dev Environment

View the Dev environment page for instructions.


MIT License (c) Preet Shihn

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.