Guide · Open source
How to use wired-elements: install and build hand-drawn UI
Updated · written with AI from the project's own documentation and checked against our catalogue data
Wired Elements is a set of basic user-interface pieces, such as buttons and text inputs, drawn with a sketchy, hand-drawn look. It is built as web components, so you can place it in plain HTML or use it inside a framework. This guide shows how to install it, load its components, and decide whether its informal style fits your project.
Wired Elementsrough-stuff/wired-elements · ★ 10.8k · MIT Install options & downloads Quick start
- 1Check Node.js and npm. Confirm that Node.js and npm are installed on your machine if you plan to use the npm route.
- 2Install the package. Run npm i wired-elements in your project folder.
- 3Import the components. Import WiredButton, WiredInput or other components from the wired-elements package in a module script.
- 4Add the tags to your HTML. Place wired-input and wired-button tags in your page where you want them.
- 5Check the demo. Open the showcase on wiredjs.com to see every component before you choose which ones to use.
- 6Read the component docs. Open the docs folder in the repository for properties, events and CSS properties of each component.
What Wired Elements is and what it is for
Wired Elements is a series of basic UI elements with a hand-drawn look. The README says they can be used for wireframes, mockups, or simply for the fun hand-drawn style.
The project is a good fit for quick low-fidelity work. It is a poor fit for production sites that need a polished, conventional visual style, because the hand-drawn look is its defining feature.
- Designers making quick wireframes or low-fidelity mockups
- Developers prototyping a page layout before real styling exists
- Teams wanting an informal look in a demo or internal tool
- Developers already working with web components or Lit
What do you need before you install wired-elements?
The npm install route needs Node.js and npm. The README does not list other requirements, so check the project's own files if you need more detail.
You can also load the ES module directly from unpkg, which needs no package manager.
Install wired-elements with npm
Add the package to your project with the install command from the README. The package exports all components in the wired category.
npm i wired-elementsLoad wired-elements without a package manager
If you do not use npm, you can load the ES module directly through unpkg by adding a module script to your page.
<script type="module" src="https://unpkg.com/wired-elements?module"></script>Import and use wired-elements components
In a module script you can import named components from the package. You can also import each component file on its own from the lib folder.
Once loaded, use the components as HTML tags in your page.
- Import several components at once from the package root
- Import single components from wired-elements/lib/ to load only what you need
import { WiredButton, WiredInput } from "wired-elements"
<wired-input placeholder="Enter name"></wired-input>
<wired-button>Click Me</wired-button>Where to find component properties and events
The README does not document component properties, events or CSS properties inline. It points to a docs folder in the repository that covers them for each component.
The README also links to a full demo of all components on wiredjs.com and to a list of components in the src folder of the repository.
- Component docs: the docs folder in the GitHub repository
- Demo of all components: wiredjs.com/showcase.html
- Component list: the src folder in the GitHub repository
What people use it for
- Sketching a wireframe for a new page layout before visual design begins
- Building a low-fidelity mockup to share with a team for early feedback
- Adding a playful hand-drawn look to a demo or internal tool
- Prototyping a form using wired-input and wired-button elements
Frequently asked questions
How do I install wired-elements?
Run npm i wired-elements in your project folder. The package requires Node.js and npm for this route. You can also load the ES module directly through unpkg with a module script tag.
Is wired-elements free to use?
Yes. The project is released under the MIT License, which the README links to in its LICENSE file. Check that file for the full terms.
What do I need to run wired-elements?
For the npm install route, you need Node.js and npm. The README does not list other requirements. Using the unpkg module needs only a page that can load a module script.
Can I use wired-elements in React, Vue or Svelte?
The README links to example projects for React, Vue and Svelte on CodeSandbox. These show the library used inside each framework. The README also says the components are web components that can be placed in ordinary HTML or used in frameworks.
Where can I see the components before I install?
The demo at wiredjs.com/showcase.html shows all components. The README also has a link to a vanilla CodeSandbox you can play with directly in your browser.
How does wired-elements compare to RoughJS or Excalidraw?
Wired Elements is built using RoughJS and Lit, and it provides ready-made UI elements such as buttons and inputs. RoughJS is a lower-level library for drawing sketchy shapes. Excalidraw is a whiteboard-style drawing tool, and Rough Notation is a library for annotating text.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use Wired Elements if you need quick hand-drawn wireframes, low-fidelity mockups, or a playful look in a demo, especially if you already work with web components or Lit. Pick a conventional component library if you need a polished production style or a large, complete set of components.
Install options & downloads