Awesome
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.
Try now
Play with wired-elements:
Try it with a framework
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
<a href="https://opencollective.com/rough"><img src="https://opencollective.com/rough/individuals.svg?width=890"></a>
Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
<a href="https://opencollective.com/rough/organization/0/website"><img src="https://opencollective.com/rough/organization/0/avatar.svg"></a> <a href="https://opencollective.com/rough/organization/1/website"><img src="https://opencollective.com/rough/organization/1/avatar.svg"></a> <a href="https://opencollective.com/rough/organization/2/website"><img src="https://opencollective.com/rough/organization/2/avatar.svg"></a> <a href="https://opencollective.com/rough/organization/3/website"><img src="https://opencollective.com/rough/organization/3/avatar.svg"></a> <a href="https://opencollective.com/rough/organization/4/website"><img src="https://opencollective.com/rough/organization/4/avatar.svg"></a> <a href="https://opencollective.com/rough/organization/5/website"><img src="https://opencollective.com/rough/organization/5/avatar.svg"></a> <a href="https://opencollective.com/rough/organization/6/website"><img src="https://opencollective.com/rough/organization/6/avatar.svg"></a> <a href="https://opencollective.com/rough/organization/7/website"><img src="https://opencollective.com/rough/organization/7/avatar.svg"></a> <a href="https://opencollective.com/rough/organization/8/website"><img src="https://opencollective.com/rough/organization/8/avatar.svg"></a> <a href="https://opencollective.com/rough/organization/9/website"><img src="https://opencollective.com/rough/organization/9/avatar.svg"></a>