wired-elements

Wired Elements is a collection of web interface components that look like they were sketched by hand with a pen. Buttons, input fields, and other standard UI pieces all render with a rough, hand-drawn appearance rather than the clean polished look of typical web components. The intent is to make them useful for wireframes, early mockups, or any project where that hand-drawn style is the desired look.

The components are built as standard web components, which means they work in plain HTML pages as well as in popular JavaScript frameworks. The README shows working examples in React, Vue, and Svelte, along with a plain-HTML sandbox to try without any framework. You add the package through npm or load it directly from a CDN link in a script tag, then drop the custom HTML tags into your page like any other element.

Under the hood, the project is built using two open-source libraries: RoughJS, which is a separate library from the same team that draws shapes with that sketchy style, and Lit, a lightweight tool for building web components. The documentation folder in the repository covers the specific properties and events available for each component.

All components are bundled together in a single npm package called wired-elements, but you can also import individual components if you only need a few. The project is MIT licensed and accepts financial contributors through Open Collective.

This project suits designers and developers who want to communicate that an interface is a rough draft, or who simply prefer the hand-drawn visual style for their finished product.