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.

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

Install

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
Copy the code

or individual controls

npm i wired-button
Copy the code

Usage

Import into your module script:

import { WiredButton, WiredInput } from "wired-elements"Copy the code

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

<script src="https://unpkg.com/wired-elements@latest/dist/wired-elements.bundled.min.js"></script>Copy the code

Use it in your web page:

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

Learn about web components here.

Demo

Demo of all components is available at wiredjs.com.

Dev Environment

View the Dev environment page for instructions.

License

MIT License (c) Preet Shihn