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

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 Vue
Wired Elements in React
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.


MIT License (c) Preet Shihn.