{"id":13433263,"url":"https://github.com/rough-stuff/wired-elements","last_synced_at":"2025-05-14T01:08:12.016Z","repository":{"id":38838047,"uuid":"101609772","full_name":"rough-stuff/wired-elements","owner":"rough-stuff","description":"Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.","archived":false,"fork":false,"pushed_at":"2023-10-07T20:59:18.000Z","size":1917,"stargazers_count":10602,"open_issues_count":35,"forks_count":334,"subscribers_count":128,"default_branch":"master","last_synced_at":"2025-05-08T03:30:36.016Z","etag":null,"topics":["lit-element","lit-html","prototyping","web-components","webcomponents","wireframe","wireframes"],"latest_commit_sha":null,"homepage":"https://wiredjs.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rough-stuff.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":"pshihn","open_collective":"rough"}},"created_at":"2017-08-28T06:12:03.000Z","updated_at":"2025-05-06T08:19:27.000Z","dependencies_parsed_at":"2023-10-13T02:00:46.629Z","dependency_job_id":null,"html_url":"https://github.com/rough-stuff/wired-elements","commit_stats":{"total_commits":356,"total_committers":17,"mean_commits":"20.941176470588236","dds":0.601123595505618,"last_synced_commit":"0802655b6a0220d17e95e9d1565a7a1b10a24fef"},"previous_names":["wiredjs/wired-elements"],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rough-stuff%2Fwired-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rough-stuff%2Fwired-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rough-stuff%2Fwired-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rough-stuff%2Fwired-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rough-stuff","download_url":"https://codeload.github.com/rough-stuff/wired-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253745197,"owners_count":21957320,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lit-element","lit-html","prototyping","web-components","webcomponents","wireframe","wireframes"],"created_at":"2024-07-31T02:01:23.295Z","updated_at":"2025-05-14T01:08:11.977Z","avatar_url":"https://github.com/rough-stuff.png","language":"TypeScript","readme":"# wired-elements 👉 [wiredjs.com](https://wiredjs.com)\nWired 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. \n\n![alt Preview](https://i.imgur.com/qttPllg.png)\n\n\n## Try now\nPlay with wired-elements:\n\n[Wired Elements](https://codesandbox.io/s/wired-elements-vanilla-4bpny)\n\n#### Try it with a framework\n\n[Wired Elements in React](https://codesandbox.io/s/xrll5wyl8w)\n\n[Wired Elements in Vue](https://codesandbox.io/s/vj389y9375)\n\n[Wired Elements in Svelte](https://codesandbox.io/s/wired-elements-svelte-4hfkb)\n\n\n## Install\n\nThe package (wired-elements) exports all components in the **_wired_** category. List of all wired elements can be found [here](https://github.com/rough-stuff/wired-elements/tree/master/src).\n\nAdd wired-elements to your project:\n```\nnpm i wired-elements\n```\n\n\nOr load the ES module directly through unpkg\n\n```html\n\u003cscript type=\"module\" src=\"https://unpkg.com/wired-elements?module\"\u003e\u003c/script\u003e\n```\n\n\n## Usage\n\nImport into your module script:\n```javascript\nimport { WiredButton, WiredInput } from \"wired-elements\"\n```\n\nor \n\n```javascript\nimport { WiredButton } from 'wired-elements/lib/wired-button.js';\nimport { WiredInput } from 'wired-elements/lib/wired-input.js';\n```\n\n#### Use it in your HTML:\n```html\n\u003cwired-input placeholder=\"Enter name\"\u003e\u003c/wired-input\u003e\n\u003cwired-button\u003eClick Me\u003c/wired-button\u003e\n```\n\nLearn about web components [here](https://developer.mozilla.org/en-US/docs/Web/Web_Components).\n\n## Component API\n\nTo view details of each component - properties, events, css-properties, etc, are provided in the [docs folder](https://github.com/rough-stuff/wired-elements/tree/master/docs).\n\n## Demo\n\nDemo of all components is available at [wiredjs.com](https://wiredjs.com/showcase.html).\n\n## Credits\n\nwired-elements was built using [RoughJS](https://roughjs.com/) and [Lit](https://lit.dev/).\n\n## Contributors\n\nBecome a sponsor of the [Rough suite of libraries](https://github.com/rough-stuff)\n\n### Financial Contributors\n\nBecome a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/rough/contribute)]\n\n#### Individuals\n\n\u003ca href=\"https://opencollective.com/rough\"\u003e\u003cimg src=\"https://opencollective.com/rough/individuals.svg?width=890\"\u003e\u003c/a\u003e\n\n#### Organizations\n\nSupport this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/rough/contribute)]\n\n\u003ca href=\"https://opencollective.com/rough/organization/0/website\"\u003e\u003cimg src=\"https://opencollective.com/rough/organization/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/rough/organization/1/website\"\u003e\u003cimg src=\"https://opencollective.com/rough/organization/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/rough/organization/2/website\"\u003e\u003cimg src=\"https://opencollective.com/rough/organization/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/rough/organization/3/website\"\u003e\u003cimg src=\"https://opencollective.com/rough/organization/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/rough/organization/4/website\"\u003e\u003cimg src=\"https://opencollective.com/rough/organization/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/rough/organization/5/website\"\u003e\u003cimg src=\"https://opencollective.com/rough/organization/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/rough/organization/6/website\"\u003e\u003cimg src=\"https://opencollective.com/rough/organization/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/rough/organization/7/website\"\u003e\u003cimg src=\"https://opencollective.com/rough/organization/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/rough/organization/8/website\"\u003e\u003cimg src=\"https://opencollective.com/rough/organization/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/rough/organization/9/website\"\u003e\u003cimg src=\"https://opencollective.com/rough/organization/9/avatar.svg\"\u003e\u003c/a\u003e\n\n## License\n[MIT License](https://github.com/rough-stuff/wired-elements/blob/master/LICENSE) (c) [Preet Shihn](https://twitter.com/preetster)\n","funding_links":["https://github.com/sponsors/pshihn","https://opencollective.com/rough","https://opencollective.com/rough/contribute","https://opencollective.com/rough/organization/0/website","https://opencollective.com/rough/organization/1/website","https://opencollective.com/rough/organization/2/website","https://opencollective.com/rough/organization/3/website","https://opencollective.com/rough/organization/4/website","https://opencollective.com/rough/organization/5/website","https://opencollective.com/rough/organization/6/website","https://opencollective.com/rough/organization/7/website","https://opencollective.com/rough/organization/8/website","https://opencollective.com/rough/organization/9/website"],"categories":["编程","TypeScript","UI Libraries","quaint styling","Component Libraries","UI Components / UI Tools","Frameworks / Resources"],"sub_categories":["CSS","W"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frough-stuff%2Fwired-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frough-stuff%2Fwired-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frough-stuff%2Fwired-elements/lists"}