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

Last update: Jan 7, 2023

Overview

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

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"

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

Comments

Changing to wired breaks Joomla

I am using this in a custom Joomla template but changing "input" to "wired-input" breaks Joomla form. Joomla expects < input >. Is there a way I can achieve the wired effect by using a css class instead of changing them to "wired-***" ?
wontfix

opened by StarAzure 20

Add wired-icon based on material icons

Hello

I'm willing to contribute for a wired-icon based on the material icons from Google. This PR is for discussion upon the best way to implement it.

The hacky way

The Material Icon from google are available in a SVG format. The paths can be used with rough to generate the icons:

const svgAndroid = document.getElementById('svg_android');
svgPath = 'M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48A5.84 5.84 0 0 0 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31A5.983 5.983 0 0 0 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z';
rc = rough.svg(svgAndroid);
node = rc.path(svgPath, {roughness: 0.1, fill: 'green', hachureGap: 1, fillStyle: 'zigzag' });
svgAndroid.appendChild(node);

Here are a few tries:

Looking for a more systematic way

Suggestions are welcomed...

opened by apennamen 15

Using with React

I tried importing a wired element but React throws an error:

NotSupportedError Failed to construct 'CustomElement': The result must not have attributes

https://codesandbox.io/s/pp4q7kw9q7

Do I need to do something else to make it compatible with react? thanks!

opened by hugozap 15
onChange event not triggering on wired-textarea

I am using the wired-textarea element in a react application. The value property does work but it is impossible to update state with a new value as the function does not trigger with onChange. I'll use the regular textarea for now as it is working fine with it.

opened by Jrejoire 8
how can i use wired-elements?

how can I use it? <script src="https://unpkg.com/wired-elements@latest/dist/wired-elements.bundled.js"></script> give 404 error ? and in package are typescripts files

opened by ghost 8
Add wired-calendar

fixes: #77

I am interested to contribute. Please try this demo and let me know your comments. Feedback is appreciated so I can improve the code accordingly.

Cheers!

opened by elingerojo 8
Using with Create-React-App and TypeScript

Has anyone been able to get this working with Create-React-App and TypeScript? Seem to be just getting these errors

Property 'wired-button' does not exist on type 'JSX.IntrinsicElements'.

JSX element type 'WiredButton' is not a constructor function for JSX elements. Type 'WiredButton' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.ts(2605)

opened by jameshschuler 7

wired-input inside wired-dialog is invisible in react

import React from 'react';
import "wired-elements";

function App() {
  return (
    <div className="App">
      <wired-dialog open>
        <wired-input></wired-input>
      </wired-dialog>
    </div>
  );
}

export default App;

opened by niaodan2b 6

wired-input with v-model

I might be making a newbie mistake but when I try to use wired-input connected with v-model in vuejs the model isn't updating.

https://jsfiddle.net/flacito/x9bta40r/23/

opened by flacito 6
wired-calendar wrong day names
Using locale !== EN, the day names are wrong. Issue is in function localizeCalendarHeaders

should be: ... if (l !== 'en-us' && l !== 'en') { const d = new Date(); // Compute weekday header texts (like "Sun", "Mon", "Tue", ...) const weekDayOffset = d.getUTCDay(); const daySunday = new Date(d.getTime() - DAY * weekDayOffset); for (let i = 0; i < 7; i++) { let weekdayDate = new Date(daySunday);

weekdayDate.setDate(daySunday.getDate() + i); this.weekdays_short[i] = weekdayDate.toLocaleString(this.locale, { weekday: 'short' }); }
opened by martinKumhera 5

wired-slider value attribute not updating

My Pain

I'm trying to use the wired elements and I'm having problems with the wired-slider because it does not react correctly to the value attribute.

I would expect the slider visually to be at beginning in both examples shown below

Reproducible Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-loader.js"></script>
    <script type="module" src="https://unpkg.com/[email protected]/lib/wired-slider.js?module"></script>
</head>

<body>
    <wired-slider id="slider" value="0" knobradius="15" class="wired-rendered" style="margin: 0px"></wired-slider>
    <br />
    <wired-slider knobradius="15" value="5" min="5" max="15"></wired-slider>
</body>

</html>

Is this a regression?

Yes. I have seen it working in previous versions.

opened by MarcSkovMadsen 5

chore(deps): bump minimist from 1.2.5 to 1.2.6
Bumps minimist from 1.2.5 to 1.2.6.

Commits

7efb22a 1.2.6

ef88b93 security notice for additional prototype pollution issue

c2b9819 isConstructorOrProto adapted from PR

bc8ecee test from prototype pollution PR

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0
Create a custom element manifest

Could you create a CutomElement Manifest for your component? And include it in the npm package?

https://github.com/webcomponents/custom-elements-manifest

opened by jogibear9988 0
Idea: Animate button outline on hover

Hi,

thank you for this cool lib.

I've create a small proof of concept for animated button outlines on hover:

What do you think should/could this be implemented into the core? Are you open for a PR?

Or has anyone else done this already and I just couln't find it?

opened by JamesBoon 0

请问支持vue3吗？我在vue3中使用似乎用不了

在vue3按需引入报错了

import { App } from "vue";
import { WiredButton, WiredInput, WiredDialog } from 'wired-elements'

const wiredELments = [
    WiredButton, WiredInput, WiredDialog
]

export const setWired = (app: App<Element>) => {
    wiredELments.forEach(v => {
        app.use(v)  //这里类型错误了
    })
}

在控制台报错为 Uncaught TypeError: Class constructor WiredButton2 cannot be invoked without 'new'

opened by orangeed 2

bug: getting `hf.fillPolygon is not a function` error
Hello! First of all, thank you for creating this library. I wish to submit a bug report (or at least I think it is).

TL;DR

I am getting hf.fillPolygon is not a function error when I run a Sandbox locally: https://codesandbox.io/s/react-wrapper-for-wired-elements-forked-fef11?file=/src/index.js.

There are 2 options that I think this can be fixed:

Lock the dependency to roughjs -- don't use ^. I think locking dependencies can be a good idea because module resolutions are extremely tricky. Change it to 4.4 or something, because 4.5 is where it breaks.

Update this function: https://github.com/rough-stuff/wired-elements/blob/381ce6f84a657719b06073e18221cd640de11de8/src/wired-lib.ts#L120-L124 I'm unsure about the proper solution, but I tried hardcoding my node_modules/wired-elements/lib/wired-lib.js to this and the problem is gone:

export function hachureFill(points, seed) { const hf = new ZigZagFiller(fillHelper); const ops = hf.fillPolygons([points], options(seed)); return createPathNode(ops, null); }

Long explanation

I am using the version 0.1.5 version of wired-elements-react (https://github.com/rough-stuff/wired-elements-react) -- which I think is a React wrapper, pure, without additional logic for this repository.

Things are working OK, except when I am trying to use wired-tab, or WiredTab. This sandbox https://codesandbox.io/s/react-wrapper-for-wired-elements-forked-fef11?file=/src/index.js works fine, but when I downloaded this to my local and ran it, I get this error:

Tracing through the error stack, I found out that this is where the code errored: https://github.com/rough-stuff/wired-elements/search?q=fillPolygon.

I tried to find out the version of roughjs I am using. If I do fresh install without lockfile, I get this:

roughjs@^4.3.1: version "4.5.0" resolved "https://registry.yarnpkg.com/roughjs/-/roughjs-4.5.0.tgz#b4cbd63d4ed6b0b613082b4f7f9bf0e55cd4ba0d" integrity sha512-4c3RBuTR41uGbTT/WzG4dzu4dfxhFWrhx9ZLbjaKPazX67nQjvU//pWYw/XjbcDW3iQGxac8plBbgdWkEsnNDg== dependencies: path-data-parser "^0.1.0" points-on-curve "^0.2.0" points-on-path "^0.2.1"

Now, I think this is an issue, because 10ish days ago, there was a new version in roughjs which changes fillPolygon with fillPolygons in almost all Filler classes: https://github.com/rough-stuff/rough/commit/24fd61d3be2dd411f4153b2885ed3d912a3b56fd#diff-054c66f0fb4838b0ff226ca4dea0ebcc007364ff1baf314d788a8015cbac108a. This makes the old fillPolygon to be nonexistent, and hence the error shows up.

This problem is fixed, if I am using yarn and I add this to ensure that child deps are resolved properly:

"resolutions": { "roughjs": "4.4" },

And then the error is gone. Alternatively, I can also confirm that changing the hashureFill to this also works (though I'm unsure whether it will cause additional problems or not):

export function hachureFill(points, seed) { const hf = new ZigZagFiller(fillHelper); const ops = hf.fillPolygons([points], options(seed)); return createPathNode(ops, null); }
opened by imballinst 3