[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70712":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":34,"readmeContent":35,"aiSummary":36,"trendingCount":16,"starSnapshotCount":16,"syncStatus":37,"lastSyncTime":38,"discoverSource":39},70712,"wired-elements","rough-stuff\u002Fwired-elements","rough-stuff","Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.","https:\u002F\u002Fwiredjs.com",null,"TypeScript",10798,339,127,32,0,3,12,21,9,42.59,"MIT License",false,"master",true,[27,28,29,30,31,32,33],"lit-element","lit-html","prototyping","web-components","webcomponents","wireframe","wireframes","2026-06-12 02:02:42","# wired-elements 👉 [wiredjs.com](https:\u002F\u002Fwiredjs.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:\u002F\u002Fi.imgur.com\u002FqttPllg.png)\n\n\n## Try now\nPlay with wired-elements:\n\n[Wired Elements](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fwired-elements-vanilla-4bpny)\n\n#### Try it with a framework\n\n[Wired Elements in React](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fxrll5wyl8w)\n\n[Wired Elements in Vue](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fvj389y9375)\n\n[Wired Elements in Svelte](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fwired-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:\u002F\u002Fgithub.com\u002Frough-stuff\u002Fwired-elements\u002Ftree\u002Fmaster\u002Fsrc).\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:\u002F\u002Funpkg.com\u002Fwired-elements?module\">\u003C\u002Fscript>\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\u002Flib\u002Fwired-button.js';\nimport { WiredInput } from 'wired-elements\u002Flib\u002Fwired-input.js';\n```\n\n#### Use it in your HTML:\n```html\n\u003Cwired-input placeholder=\"Enter name\">\u003C\u002Fwired-input>\n\u003Cwired-button>Click Me\u003C\u002Fwired-button>\n```\n\nLearn about web components [here](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FWeb_Components).\n\n## Component API\n\nTo view details of each component - properties, events, css-properties, etc, are provided in the [docs folder](https:\u002F\u002Fgithub.com\u002Frough-stuff\u002Fwired-elements\u002Ftree\u002Fmaster\u002Fdocs).\n\n## Demo\n\nDemo of all components is available at [wiredjs.com](https:\u002F\u002Fwiredjs.com\u002Fshowcase.html).\n\n## Credits\n\nwired-elements was built using [RoughJS](https:\u002F\u002Froughjs.com\u002F) and [Lit](https:\u002F\u002Flit.dev\u002F).\n\n## Contributors\n\nBecome a sponsor of the [Rough suite of libraries](https:\u002F\u002Fgithub.com\u002Frough-stuff)\n\n### Financial Contributors\n\nBecome a financial contributor and help us sustain our community. [[Contribute](https:\u002F\u002Fopencollective.com\u002Frough\u002Fcontribute)]\n\n#### Individuals\n\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Findividuals.svg?width=890\">\u003C\u002Fa>\n\n#### Organizations\n\nSupport this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https:\u002F\u002Fopencollective.com\u002Frough\u002Fcontribute)]\n\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F0\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F0\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F1\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F1\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F2\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F2\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F3\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F3\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F4\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F4\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F5\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F5\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F6\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F6\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F7\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F7\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F8\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F8\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F9\u002Fwebsite\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Frough\u002Forganization\u002F9\u002Favatar.svg\">\u003C\u002Fa>\n\n## License\n[MIT License](https:\u002F\u002Fgithub.com\u002Frough-stuff\u002Fwired-elements\u002Fblob\u002Fmaster\u002FLICENSE) (c) [Preet Shihn](https:\u002F\u002Ftwitter.com\u002Fpreetster)\n","wired-elements 是一个提供手绘风格基础UI组件的集合，适用于原型设计、线框图或任何需要独特手绘外观的场景。该项目使用TypeScript编写，并基于LitElement和RoughJS构建，支持Web Components标准，使得其能够轻松集成到各种现代前端框架中，如React、Vue和Svelte。通过简单的npm安装或直接从unpkg加载，开发者可以快速开始在项目中添加这些具有趣味性的元素。无论是创建初步设计草图还是希望给最终产品增添一抹创意色彩，wired-elements都是理想的选择。",2,"2026-06-11 03:33:46","high_star"]