wired-elements

Collection of custom elements that appear hand drawn. Great for wireframes ...

Component ToolkitWeb Components
rough-stuff/wired-elementswiredjs.comwired-elements

README

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:
  1. ```
  2. npm i wired-elements
  3. ```


Or load the ES module directly through unpkg

  1. ``` html
  2. <script type="module" src="https://unpkg.com/wired-elements?module"></script>
  3. ```


Usage


Import into your module script:
  1. ``` js
  2. import { WiredButton, WiredInput } from "wired-elements"
  3. ```

or

  1. ``` js
  2. import { WiredButton } from 'wired-elements/lib/wired-button.js';
  3. import { WiredInput } from 'wired-elements/lib/wired-input.js';
  4. ```

Use it in your HTML:

  1. ``` html
  2. <wired-input placeholder="Enter name"></wired-input>
  3. <wired-button>Click Me</wired-button>
  4. ```

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