# rough-stuff/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/rough-stuff-wired-elements).**

10,802 stars · 338 forks · TypeScript · MIT

## Links

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

## Description

Wired-elements is a hand-drawn web component library providing a collection of stylized HTML elements for building wireframes and mockups. It serves as a wireframing UI framework that enables the creation of low-fidelity prototypes with a sketchy, manual aesthetic.

The library provides components for hand-drawn web design and rapid UI prototyping. These elements are designed to support low-fidelity wireframing to plan user interfaces and test layouts before high-fidelity development.

The project utilizes a web component architecture with SVG-based vector graphics to maintain a consistent hand-drawn look. It supports integration into various JavaScript frameworks and utilizes CSS variables for theming stroke thickness and colors.

## Tags

### Web Development

- [Hand-Drawn](https://awesome-repositories.com/f/web-development/custom-element-frameworks/component-libraries/hand-drawn.md) — Provides a collection of pre-built custom elements with a sketched, hand-drawn appearance for wireframing. ([source](https://github.com/rough-stuff/wired-elements#readme))
- [Web Component Libraries](https://awesome-repositories.com/f/web-development/web-component-libraries.md) — Encapsulates styles and behavior within custom HTML elements for framework-agnostic integration into any web project.
- [Frontend Component Integration](https://awesome-repositories.com/f/web-development/frontend-component-integration.md) — Allows for the rapid integration of pre-styled interface components into web projects to speed up layout prototyping.
- [UI Component Frameworks](https://awesome-repositories.com/f/web-development/ui-component-frameworks.md) — Provides a set of pre-built user interface elements that can be integrated into various JavaScript frameworks. ([source](https://github.com/rough-stuff/wired-elements/blob/master/README.md))

### Graphics & Multimedia

- [SVG-Based Vector Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering.md) — Uses SVG-based vector graphics to render a consistent hand-drawn aesthetic across various screen sizes.

### Software Engineering & Architecture

- [UI Prototyping](https://awesome-repositories.com/f/software-engineering-architecture/development-methodologies/rapid-prototyping/ui-prototyping.md) — Provides tools for rapidly constructing user interface layouts to validate design ideas without polished styling.

### User Interface & Experience

- [Wireframing Component Frameworks](https://awesome-repositories.com/f/user-interface-experience/wireframing-component-frameworks.md) — Provides a set of interface components specifically designed to create low-fidelity prototypes that look like manual sketches.
- [Wireframing Software](https://awesome-repositories.com/f/user-interface-experience/wireframing-software.md) — Enables the creation of low-fidelity structural blueprints and sketches to plan user interfaces.
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Provides a theming system using CSS variables to customize stroke thickness and colors across all components.
- [Shadow DOM Utilities](https://awesome-repositories.com/f/user-interface-experience/shadow-dom-utilities.md) — Uses Shadow DOM to isolate hand-drawn styles and prevent CSS leakage between components and the global scope.

### Part of an Awesome List

- [Component Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/component-libraries.md) — Hand-drawn style UI components.