April 21, 2019

248 words 2 mins read



Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.

repo name wiredjs/wired-elements
repo link https://github.com/wiredjs/wired-elements
homepage https://wiredjs.com
language TypeScript
size (curr.) 2914 kB
stars (curr.) 7962
created 2017-08-28
license MIT License

Published on Vaadin  Directory

wired-elements 👉 wiredjs.com

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="https://unpkg.com/wired-elements@latest/dist/wired-elements.bundled.js"></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 wiredjs.com.

Dev Environment

View the Dev environment page for instructions.


MIT License (c) Preet Shihn

comments powered by Disqus