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:

Wired Elements

Try it with a framework

Wired Elements in React

Wired Elements in Vue

Wired Elements in Svelte

Wired Elements in Angular

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 add individual controls

npm i wired-button

npm i wired-input

Or load the ES module directly through unpkg

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

To load all elements there are bundled versions available:

ES module: https://unpkg.com/wired-elements/lib/wired-elements-esm.js

IIFE: https://unpkg.com/wired-elements/lib/wired-elements-iife.js

Common JS: https://unpkg.com/wired-elements/lib/wired-elements-cjs.js

Usage

Import into your module script:

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

import { WiredButton } from "https://unpkg.com/wired-button?module"

Alternatively, load a bundled iife version on the page and start using it in HTML

<script src="https://unpkg.com/wired-elements/lib/wired-elements-iife.js"></script>

Use it in your web page:

<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 their package folder. List of all packages

Demo

Demo of all components is available at wiredjs.com.

License

MIT License (c) Preet Shihn