wired-elements README

The project's README from github.com/rough-stuff/wired-elements. As one markdown file: README.md.

wired-elements 👉 wiredjs.com

Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look.

alt Preview

Try now

Play with wired-elements:

Wired Elements

Try it with a framework

Wired Elements in React

Wired Elements in Vue

Wired Elements in Svelte

Install

The package (wired-elements) exports all components in the wired category. List of all wired elements can be found here.

Add wired-elements to your project:

npm i wired-elements

Or load the ES module directly through unpkg

<script type="module" src="https://unpkg.com/wired-elements?module"></script>

Usage

Import into your module script:

import { WiredButton, WiredInput } from "wired-elements"

or 

import { WiredButton } from 'wired-elements/lib/wired-button.js';
import { WiredInput } from 'wired-elements/lib/wired-input.js';

Use it in your HTML:

<wired-input placeholder="Enter name"></wired-input>
<wired-button>Click Me</wired-button>

Learn about web components here.

Component API

To view details of each component - properties, events, css-properties, etc, are provided in the docs folder.

Demo

Demo of all components is available at wiredjs.com.

Credits

wired-elements was built using RoughJS and Lit.

Contributors

Become a sponsor of the Rough suite of libraries

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

License

MIT License (c) Preet Shihn

wired-elements (rough-stuff/wired-elements)

web-components
Searching Database…

10.8K ·GitHub
Wired-elements
What is this?Wired Elements is a collection of custom web components styled to look hand-drawn, useful for wireframes, mockups, or just a sketchy fun UI look.
Is it a framework or a plain component library?It's a library of standards-based web components built with Lit, so you can drop them straight into HTML, React, Vue, or Svelte without adopting a framework.
How do I add it to a project?Install the 'wired-elements' package into your project, or load the ES module directly through unpkg, then import it into your module script and use the tags in your HTML.
What does it depend on under the hood?It's built on top of Lit (for the web component layer) and RoughJS (for the hand-drawn rendering effect).
Does it come with framework-specific wrappers?The core package is framework-agnostic, but there are separate example/wrapper setups shown for using it with React, Vue, and Svelte.
Who would use this?Designers and developers who want quick, low-fidelity-looking UI mockups or wireframes without hand-drawing them manually.
What UI elements does the package include?It covers basic UI building blocks like buttons, checkboxes, sliders, cards, dialogs and similar standard controls, each rendered with a sketchy hand-drawn style.
Where can I see a live demo?A full demo of all components is available at wiredjs.com, the project's official site.
Can I use it with React, Vue, or Svelte?Yes, since the components are standard web components, the project provides specific examples for using them inside React, Vue, and Svelte apps.
What are similar projects?lit, material-web, shoelace, loadersz-core, trix, omi, pwa-install, formily
Which topics is it in?custom-elements, webcomponents, prototyping, web-components, design-tools, vuejs, reactjs, ui-components, ui, gui, frontend, library
Creator
rough-stuff
Size
1.9 MB
Stars
10.8K
Updated
CommitNov 02Releasev0.7.0Jul 18
Age
9y
Commits · 90 Days