Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

wired-elements

wiredjs1.5kMIT3.0.0-rc.6TypeScript support: included

Collection of hand-drawn sketchy web components

webcomponent, web component, rough, sketchy, hand-drawn, hand drawn, wireframe

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

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 load the ES module directly through unpkg

<script type="module" src="https://unpkg.com/wired-elements"></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.

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

changelog

Change Log

All notable changes to this project will be documented in this file.

[3.0.0] - April 21, 2021

  • Moved from lit-elment to lit 2.0 as the base Web Component class
  • Moved multi-package monorepo to a single package that has all the elements exported

[2.0.0] - October 19, 2019

  • New component: wired-video Video player with the hand-drawn look
  • New component: wired-calendar is a calendar component contributed by @elingerojo
  • New component: wired-dialog emulates dialogs
  • New component: wired-divider Draws a sketchy horizontal line between two sections
  • New component: wired-image Image component that frames the image in a sketchy border
  • New component: wired-link Akin to <a> tag, a link with href, and a sketchy underline
  • New component: wired-search-input is a text input emulating a search input
  • wired-card now supports a sketchy filled background
  • wired-slider is more accessible, now built on top of input range.
  • Elements are more responsive to size changes using the Resize observer
  • wired-textarea does not auto-grow anymore.

[1.0.0] - April 24, 2019

  • New component: wired-fab mimics the floating action button proposed in Material design
  • New component: wired-spinner to show pending progress in a sketchy way
  • New component: wired-tabs wired tabs
  • Selection in Combo and List is now shown with a sketchy zig-zag fill in the style of rough.js wired combo
  • Sketchy fill also applied to progress boxes
  • Better Accessibility on all components
  • Refactored code to use TypeScript and latest Lit Element