# wiredjs/wired-elements

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/wiredjs-wired-elements).**

10,800 stars · 339 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/wiredjs/wired-elements
- Homepage: https://wiredjs.com
- awesome-repositories: https://awesome-repositories.com/repository/wiredjs-wired-elements.md

## Description

Wired Elements is a hand-drawn web component library and custom element UI kit. It provides a set of low-fidelity visual building blocks designed to produce a rough, non-polished aesthetic for early-stage design iterations.

The framework enables the creation of rapid UI prototypes, low-fidelity wireframes, and conceptual UX mappings. It uses a sketched appearance to help focus iterations on layout and functionality rather than final visual polish.

The library utilizes SVG-based path rendering and web component encapsulation to deliver its hand-drawn style. Visual states are managed through element attributes, and the appearance is customizable via CSS custom properties.

## Tags

### Graphics & Multimedia

- [Hand-Drawn Graphics Libraries](https://awesome-repositories.com/f/graphics-multimedia/hand-drawn-graphics-libraries.md) — Provides a library of web components with a simulated human-drawn aesthetic for rapid prototyping. ([source](https://github.com/wiredjs/wired-elements#readme))

### Part of an Awesome List

- [UI Components and Kits](https://awesome-repositories.com/f/awesome-lists/devtools/ui-components-and-kits.md) — Ships a comprehensive kit of reusable custom elements designed with a non-polished, sketched aesthetic.
- [Component Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/component-libraries.md) — UI components with a hand-drawn, sketchy aesthetic.

### Software Engineering & Architecture

- [UI Prototyping](https://awesome-repositories.com/f/software-engineering-architecture/development-methodologies/rapid-prototyping/ui-prototyping.md) — Facilitates rapid construction of interface layouts to validate design ideas without focusing on polish.

### User Interface & Experience

- [Sketch-Style Rendering](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/content-specific-styling/rendered-content-styling/sketch-style-rendering.md) — Renders user interface elements with a sketched appearance for low-fidelity wireframes. ([source](https://github.com/wiredjs/wired-elements#readme))
- [Rapid Interface Prototyping](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-authoring-software/design-tools/rapid-interface-prototyping.md) — Offers a framework of visual building blocks for creating low-fidelity wireframes and structural layouts.
- [Wireframing Software](https://awesome-repositories.com/f/user-interface-experience/wireframing-software.md) — Provides building blocks for creating quick, low-fidelity structural blueprints of user interfaces.
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Allows customization of sketch colors and stroke widths using native CSS variables.
- [Shadow DOM Utilities](https://awesome-repositories.com/f/user-interface-experience/shadow-dom-utilities.md) — Uses a private document fragment to encapsulate hand-drawn styles from the rest of the page.
- [User Flow Mapping Tools](https://awesome-repositories.com/f/user-interface-experience/user-flow-mapping-tools.md) — Enables the visualization of user experience flows using low-fidelity sketched elements.

### Web Development

- [Hand-Drawn](https://awesome-repositories.com/f/web-development/custom-element-frameworks/component-libraries/hand-drawn.md) — Provides a specialized collection of custom elements that render with a hand-drawn, sketched look.
- [Custom Elements](https://awesome-repositories.com/f/web-development/web-standards/custom-elements.md) — Wraps UI elements using the native custom elements API for style and logic isolation.