Wired Elements
A set of basic UI elements (buttons, inputs) drawn to look hand-sketched, for wireframes.
- Stars
- 10.8k
- Forks
- 343
- Licence
- MIT
- Language
- TypeScript
- Last update
- 3.1 years ago
- Type
- Library
No commits in over a year — check for forks or alternatives before adopting.
What it is
Wired Elements is a collection of common user-interface pieces, such as buttons and text inputs, that are drawn with a sketchy, hand-drawn look. They are built as web components, so they can be placed in ordinary HTML or used in frameworks. People use them for quick wireframes and mockups, or simply for a playful hand-drawn style.
- Sketch a signup form wireframe using wired-input and wired-button elements
- Add a hand-drawn look to a demo or presentation page
- Try the elements in a browser sandbox (CodeSandbox examples for vanilla JS, React, Vue, and Svelte are linked)
- Browse the showcase at wiredjs.com to see the available components
Great for
- Designers making quick wireframes or low-fidelity mockups
- Developers prototyping a page layout before real styling exists
- Teams who want a deliberately informal look in a demo or internal tool
- Developers already working with web components or Lit
Not ideal for
- Production sites that need a polished, conventional visual style, since the hand-drawn look is the defining feature
- Projects that need a large, complete component set; the README describes only a series of basic elements
- Users who need detailed component documentation inline, since the README points to a separate docs folder
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm (for the npm install route)
Install the package
npm i wired-elements - 2
Run it
- Install the package with npm i wired-elements, or load the module from unpkg.
- Import the components, for example import { WiredButton, WiredInput } from "wired-elements".
- Add <wired-button>Click Me</wired-button> and <wired-input placeholder="Enter name"></wired-input> to your HTML.
- Open the page in a browser to see the hand-drawn elements.
- 3
Get the most out of it
- Browse the showcase at wiredjs.com to see every available component before choosing which to use.
- Import only the components you need from wired-elements/lib/ to keep code lean.
- Check the docs folder for each component's properties, events, and CSS properties.
- Use the CodeSandbox framework examples as starting points if you use React, Vue, or Svelte.
Downloads
Strengths
- Simple to use: the README shows plain HTML tags such as <wired-button> and <wired-input>
- Works across frameworks, with linked examples for React, Vue, and Svelte
- Permissive MIT license
Trade-offs
- Limited scope: the README describes basic elements only
- The last push to the repository was in October 2023, so activity may be slow
- Detailed component properties and events are in a separate docs folder rather than the README
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| wired-elements (this) | 10.8k | Library | beginner | 3.1 years ago | Designers making quick wireframes or low-fidelity mockups |
| excalidraw | 135k | App | beginner | 4 days ago | Teams sketching diagrams or wireframes together in a shared canvas |
| ionicons | 18.2k | Library | beginner | 3 months ago | Developers building apps with Ionic Framework, where icons are already packaged |
| shoelace | 13.8k | Library | intermediate | 6 months ago | Developers maintaining an existing site that already uses Shoelace |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.