Wired Elements – A Nice Looking Hand-drawn Style Web Components

Wired Elements is a nice looking hand-drawn style web components library. Which can be used for wireframes, mockups, or just the fun hand-drawn look.

The focus is that Wired Elements is based on Web components.  Wired Elements includes a set of common UI elements with a hand-drawn, sketchy look. These can be used for wireframes, mockups, or just the fun hand-drawn look. Wired Elements are implemented as web components. Web components are awesome!

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

With increasing browsers support Web components, will it be possible to change the implementation of componentization schemes such as Vue and React from the bottom?

As mentioned, the Wired Elements is a series of basic UI Elements that have a hand-drawn look. The elements are drawn with enough randomness that no two renderings will be exactly the same – just like two separate hand drew shapes. The following image is an example, you can try it follows the steps.

Wired Elements is a series of basic UI Elements

 

Install Wired Elements

The package (wired-elements) exports all components in the wired category.

Add wired-elements to your project:

npm i wired-elements

or individual controls

npm i wired-button

How to use Wired Elements

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/[email protected]/dist/wired-elements.bundled.min.js"></script>

Use it in your web page:

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

View Wired Elements on github.