Create a Unique Hand Drawn Sketch Effect with Wired Elements

Have you ever wanted to give your web UI a sketchy hand-drawn look? Now you can with a JavaScript-based web component library called Wired Elements.

This library, which was created by Preet Shihn, is open source and is completely free to use. It is available under an MIT license.

One of the things that makes this library really interesting is that it has built-in randomness. This means that every rendering will look a little different, as if it were drawn from scratch. This can give your website a unique look and feel, and it can also be useful for creating application wireframes and mockups.

The library contains the following components: Buttons (wired-button) Cards (wired-card) Check Boxes (wired-checkbox) Combo Boxes (wired-combo) Icon Buttons (wired-icon-button) Input Boxes (wired-input) List Boxes (wired-listbox) Progress Bars (wired-progress) Radio Buttons (wired-radio) Radio Groups (wired-radio-group) Slider Controls (wired-slider) Text Areas (wired-textarea) Toggle Buttons (wired-toggle) Tooltips (wired-tooltip) How to use Wired Elements

To the add the Wired Elements package to your project, execute the following command:npm i wired-elements

You can also download Wired Elements from the project's GitHub page.

You can then use the component in an HTML page by including the following statement:

Alternatively, you can include it in your module script by issuing the following command:import { WiredButton, WiredInput } from "wired-elements"

Once you have included the library into your source, you can use it by placing components into your source like this:Click Me

You can test out Wired Elements by using StackBlitz. Both a standard playground and one for For more information click here https://wiredjs.com.