All Projects → rough-stuff → Wired Elements

rough-stuff / Wired Elements

Licence: mit
Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.

Programming Languages

typescript
32286 projects
HTML
75241 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Wired Elements

lit-components
Moved to https://github.com/vaadin/component-mixins
Stars: ✭ 59 (-99.33%)
Mutual labels:  webcomponents, web-components, lit-html, lit-element
redux-connect-element
Redux HTMLElement Connector
Stars: ✭ 16 (-99.82%)
Mutual labels:  webcomponents, lit-html, lit-element
highcharts-webcomponent
Highcharts Web Component usable with any Framework
Stars: ✭ 21 (-99.76%)
Mutual labels:  webcomponents, lit-html, lit-element
polymerx-cli
⚡ Unlock the power of Polymer 3, Web Components and modern web tools.
Stars: ✭ 30 (-99.66%)
Mutual labels:  webcomponents, lit-html, lit-element
create-evergreen-app
Get up and running with an evergreen web application development stack designed by, and for, today's modern web.
Stars: ✭ 16 (-99.82%)
Mutual labels:  webcomponents, lit-html, lit-element
pattern-library
AXA CH UI component library. Please share, comment, create issues and work with us!
Stars: ✭ 103 (-98.84%)
Mutual labels:  webcomponents, lit-html, lit-element
bui
‹b› Web components for creating applications – built by Blackstone Publishing using lit-html and lit-element
Stars: ✭ 29 (-99.67%)
Mutual labels:  web-components, lit-html, lit-element
pwa-lit-template
A template for building Progressive Web Applications using Lit and Vaadin Router.
Stars: ✭ 159 (-98.2%)
Mutual labels:  web-components, lit-html, lit-element
rollup-plugin-lit-css
Moved to https://github.com/bennypowers/lit-css
Stars: ✭ 35 (-99.6%)
Mutual labels:  webcomponents, lit-html, lit-element
pharos
JSTOR's design system
Stars: ✭ 48 (-99.46%)
Mutual labels:  web-components, lit-html, lit-element
hello-web-components
A simple starter <hello-world /> web component written in typescript, using lit-html and lit-element. Unit tested with jest and e2e tested with puppeteer and jest-puppeteer.
Stars: ✭ 15 (-99.83%)
Mutual labels:  web-components, lit-html, lit-element
vaadin-checkbox
The Web Component for customized checkboxes. Part of the Vaadin components.
Stars: ✭ 18 (-99.8%)
Mutual labels:  webcomponents, web-components
byu-theme-components
Web Components implementing the BYU web theme.
Stars: ✭ 21 (-99.76%)
Mutual labels:  web-components, lit-element
Pencil
The Pencil Project's unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use.
Stars: ✭ 8,225 (-7.04%)
Mutual labels:  prototyping, wireframe
cwco
Powerful and Fast Web Component Library with a Simple API
Stars: ✭ 27 (-99.69%)
Mutual labels:  webcomponents, web-components
vaadin-context-menu
The responsive Web Component for showing context dependent items for any element on the page. Part of the Vaadin components.
Stars: ✭ 26 (-99.71%)
Mutual labels:  webcomponents, web-components
toggle-icon
toggle-icon is a custom element created with Polymer. It provides an extremely powerful and customizable switch that looks like a paper-icon-button.
Stars: ✭ 21 (-99.76%)
Mutual labels:  webcomponents, web-components
custom-elements-manifest
Custom Elements Manifest is a file format that describes custom elements in your project.
Stars: ✭ 81 (-99.08%)
Mutual labels:  webcomponents, web-components
Webcomponents From Zero To Hero
An introduction to writing raw web components.
Stars: ✭ 70 (-99.21%)
Mutual labels:  web-components, webcomponents
Vaadin
An evolving set of open source web components for building mobile and desktop web applications in modern browsers.
Stars: ✭ 424 (-95.21%)
Mutual labels:  web-components, webcomponents

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].