Wired Elements

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.

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

Component Showcase View on Github Sponsor this project

Here's a simple demo:

Using wired-element controls to change a sketchy circle drawn using rough.js.

Try It Now

Play with wired-elements live on Glitch:

Wired Elements Vanilla

Try it with a framework:

Wired Elements in React
Wired Elements in Vue
Wired Elements in Svelte


Instructions on how to use wired-elements can be found on wired-elements GitHub page.

API of specific elements can be found on their respective GitHub page. Here's the list.


Component showcase of all the wired elements.

Support this project

Support development of this project by sponsoring on Open Collective or Github.


MIT License (c) Preet Shihn.