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.
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 in Sandbox:
Wired Elements Vanilla
Try it with a framework:
Elements in Vue
Wired Elements in Svelte
Wired Elements in React (using React wrapper components)
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 page in the Docs. Here's the list.
Component showcase of all the wired elements.
wired-elements was built using RoughJS and Lit.
Support this project
Support development of this project by sponsoring on Open Collective or Github.
MIT License (c) Preet Shihn.