Skip to content
Collection of elements that appear hand drawn. Great for wireframes.
Branch: master
Clone or download
Latest commit 08eff4d Mar 3, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
packages
.gitignore wired-lib -> ts Mar 1, 2019
LICENSE wired elements May 22, 2018
README.md Added a Vaadin Directory badge Aug 16, 2018
lerna.json
package-lock.json . Mar 2, 2019
package.json . Mar 2, 2019
rollup.config.js
tsconfig.json
tslint.json

README.md

Published on Vaadin  Directory

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

The elements are drawn with enough randomness that no two renderings will be exactly the same - just like two separate hand drawn shapes.

Try now

Play with wired-elements live on StackBlitz playground:

Wired Elements

Wired Elements in React

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

npm i wired-button

Usage

Import into your module script:

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

Alternatively, load a bundled version from the dist folder or from CDN:

<script src="https://unpkg.com/wired-elements@latest/dist/wired-elements.bundled.min.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.

Demo

Demo of all components is available at wiredjs.com.

Dev Environment

View the Dev environment page for instructions.

License

MIT License (c) Preet Shihn

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.