Skip to content

rough-stuff/wired-elements

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
June 26, 2020 10:21
April 26, 2021 14:54
April 26, 2021 14:54
April 24, 2021 11:45
src
April 26, 2021 14:54
.
April 21, 2021 21:54
.
April 21, 2021 21:54
.
April 23, 2021 18:20
November 2, 2021 13:31
.
April 24, 2021 11:55
March 1, 2019 15:02

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