{"_id":"@carandesign/drawui","_rev":"7-a683757ce2a41031266ce57bb93fe47d","name":"@carandesign/drawui","dist-tags":{"latest":"0.2.4"},"versions":{"0.1.0":{"name":"@carandesign/drawui","version":"0.1.0","_id":"@carandesign/drawui@0.1.0","maintainers":[{"name":"carandesign","email":"carangelo.carlo@virgilio.it"}],"dist":{"shasum":"63f30eb4b68788c5bcf0acba9c717e9412d5be55","tarball":"https://registry.npmjs.org/@carandesign/drawui/-/drawui-0.1.0.tgz","fileCount":5,"integrity":"sha512-Ucav02m7HfHxryX7x6UoLfdRI1ZC+FjFhdLGd8OM+p/j3CbUp+EP+8ygyTUF7BwvY2fsNwyuZ1roo5wRYr0WKA==","signatures":[{"sig":"MEUCIC1XVjIFUoeNkUHzgjtZLoeeMhlpYuAaUvQCOWyl3NM+AiEAyUBVibQEAlbNA4B+z/XRv4iEozO7oTCyBy36Y2GxuIE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":118746},"main":"dist/drawui.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/drawui.es.js","gitHead":"29f9bc4b9d2658170eaafbf9b553857f4c4934eb","scripts":{"build":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"carandesign","email":"carangelo.carlo@virgilio.it"},"_npmVersion":"10.8.2","description":"Sketch-style React UI component library","directories":{},"sideEffects":false,"_nodeVersion":"20.19.0","dependencies":{"roughjs":"^4.6.6"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.2.4","eslint":"^9.39.1","typescript":"~5.9.3","@types/react":"^19.2.5","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.1"},"peerDependencies":{"react":"^18 || ^19","react-dom":"^18 || ^19"},"_npmOperationalInternal":{"tmp":"tmp/drawui_0.1.0_1768665900830_0.2989485862349823","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@carandesign/drawui","version":"0.1.1","_id":"@carandesign/drawui@0.1.1","maintainers":[{"name":"carandesign","email":"carangelo.carlo@virgilio.it"}],"dist":{"shasum":"26ab3959f3b871f24c7d3dbf211ccbdf80391ac5","tarball":"https://registry.npmjs.org/@carandesign/drawui/-/drawui-0.1.1.tgz","fileCount":5,"integrity":"sha512-229wTwx0qR9z5GjTLdQx7tS6ES4m6J0Bpu8NNousOu4ji69enWKdVrxmEEDDnyMbsx123NFULjfZTIfj5/veRQ==","signatures":[{"sig":"MEUCIAMAY3Fqnx+g73vKigoPWbQrme//azNbeBotPiojK3qmAiEAtb/wYehmKnM4SbexNPzAoQrbiay8vDybmTXreJuTG+w=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":116685},"main":"dist/drawui.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/drawui.es.js","gitHead":"b034078eb82bf556920dd29771645b47aa723f66","scripts":{"build":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"carandesign","email":"carangelo.carlo@virgilio.it"},"_npmVersion":"10.8.2","description":"Sketch-style React UI component library","directories":{},"sideEffects":false,"_nodeVersion":"20.19.0","dependencies":{"roughjs":"^4.6.6"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.2.4","eslint":"^9.39.1","typescript":"~5.9.3","@types/react":"^19.2.5","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.1"},"peerDependencies":{"react":"^18 || ^19","react-dom":"^18 || ^19"},"_npmOperationalInternal":{"tmp":"tmp/drawui_0.1.1_1768666130252_0.3690426748245885","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@carandesign/drawui","version":"0.1.2","_id":"@carandesign/drawui@0.1.2","maintainers":[{"name":"carandesign","email":"carangelo.carlo@virgilio.it"}],"dist":{"shasum":"509f87376e61a6bd190ed517f0b80a8e65e1d67f","tarball":"https://registry.npmjs.org/@carandesign/drawui/-/drawui-0.1.2.tgz","fileCount":41,"integrity":"sha512-9i0PQRJlno0FAPRqhoy8onHlkAXETc2XgSvh0yClXfmiuMcIsQ8xClNewNFif42UavJf6R+M0D1/ddUlCGWfVw==","signatures":[{"sig":"MEYCIQD4i9103U21HIPnarXkjqrPuxwLbiOygJs+Nvtgfz6HRwIhAOdRyuXa3JpxTzCNwkDF31MTvwcxPdBhtsxG85HJzZqR","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":123407},"main":"dist/drawui.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/drawui.es.js","gitHead":"1e1ed6c0bdd64517a37010b7b7d578ad7d9f78ce","scripts":{"build":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"carandesign","email":"carangelo.carlo@virgilio.it"},"_npmVersion":"10.8.2","description":"Sketch-style React UI component library","directories":{},"_nodeVersion":"20.19.0","dependencies":{"roughjs":"^4.6.6"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.2.4","eslint":"^9.39.1","typescript":"~5.9.3","@types/react":"^19.2.5","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.1"},"peerDependencies":{"react":"^18 || ^19","react-dom":"^18 || ^19"},"_npmOperationalInternal":{"tmp":"tmp/drawui_0.1.2_1768732287905_0.2159361394368411","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@carandesign/drawui","version":"0.2.1","_id":"@carandesign/drawui@0.2.1","maintainers":[{"name":"carandesign","email":"carangelo.carlo@virgilio.it"}],"dist":{"shasum":"ffebede15545fb01f1f25798732f474e81d3f7b4","tarball":"https://registry.npmjs.org/@carandesign/drawui/-/drawui-0.2.1.tgz","fileCount":41,"integrity":"sha512-lKbuu5rzEZZ8BnM+eB1ZvAkbijJ2TVVgLlSrpkk1OFtpo1TEIT2QHzRTl1bnYGu9zKIYuTwJhqjtg8CYVCmXWg==","signatures":[{"sig":"MEQCIFpsrdrxFHOjU2VSlfOd15sgyQ4x+dGmBWwbOnq7ZYpKAiAb6motIGJqOuBIKFT0o5KBN6xxghujwAcGKPCup+LxKg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":124158},"main":"dist/drawui.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/drawui.es.js","gitHead":"06fc766563d00481512e12a17572a39907d72b5d","scripts":{"dev":"vite","build":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"carandesign","email":"carangelo.carlo@virgilio.it"},"_npmVersion":"10.8.2","description":"Sketch-style React UI component library","directories":{},"_nodeVersion":"20.19.0","dependencies":{"roughjs":"^4.6.6"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.2.4","eslint":"^9.39.1","typescript":"~5.9.3","@types/react":"^19.2.5","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.1"},"peerDependencies":{"react":"^18 || ^19","react-dom":"^18 || ^19"},"_npmOperationalInternal":{"tmp":"tmp/drawui_0.2.1_1768812199497_0.6402857678630014","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"@carandesign/drawui","version":"0.2.2","_id":"@carandesign/drawui@0.2.2","maintainers":[{"name":"carandesign","email":"carangelo.carlo@virgilio.it"}],"dist":{"shasum":"a3775341ad127356cd2f1aaf05661553b9881b42","tarball":"https://registry.npmjs.org/@carandesign/drawui/-/drawui-0.2.2.tgz","fileCount":42,"integrity":"sha512-CRso693czlsT9SqVwsDfAigbo4v90NJ15MCmJLqjHI7J0Q6yN1lFZSXwtGuWbJzrwPMaKlXO8TgfEqV8a2AXoA==","signatures":[{"sig":"MEUCIFlncdy3/FaoRCfuTV8xTelFMuUIaRfWOqTkoC906pzVAiEAuvdQDxpvrssEgto8y2jreRBaYi7cYTUWzrP22CgPY7k=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":125253},"main":"dist/drawui.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/drawui.es.js","gitHead":"5a141c4e9fd6cd281c3e9240a6ad0921882e32f8","scripts":{"dev":"vite","build":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"carandesign","email":"carangelo.carlo@virgilio.it"},"_npmVersion":"10.8.2","description":"Sketch-style React UI component library","directories":{},"_nodeVersion":"20.19.0","dependencies":{"roughjs":"^4.6.6"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.2.4","eslint":"^9.39.1","typescript":"~5.9.3","@types/react":"^19.2.5","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.1"},"peerDependencies":{"react":"^18 || ^19","react-dom":"^18 || ^19"},"_npmOperationalInternal":{"tmp":"tmp/drawui_0.2.2_1768828406574_0.4020486895928974","host":"s3://npm-registry-packages-npm-production"}},"0.2.3":{"name":"@carandesign/drawui","version":"0.2.3","_id":"@carandesign/drawui@0.2.3","maintainers":[{"name":"carandesign","email":"carangelo.carlo@virgilio.it"}],"dist":{"shasum":"d476eb603d689b447863692109dd2f291a6708bc","tarball":"https://registry.npmjs.org/@carandesign/drawui/-/drawui-0.2.3.tgz","fileCount":43,"integrity":"sha512-ZKzI5vEGSWpgxYgylpfQpNbktYjkBEa4SMzd9kBBtGy5jrS5FKB4DaUofREHXEDej+D7yLzPxeo1u3r3qYW/EA==","signatures":[{"sig":"MEYCIQCI3Vr+7QhCbT25CqWvwP9BArcoXF2ycoM1OaihlNZ8LwIhAIsKupaejQd/bXA7DPBsQKW2rW07DKT0dBH8TI2XXHVq","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":129123},"main":"dist/drawui.cjs.js","type":"module","types":"dist/index.d.ts","module":"dist/drawui.es.js","gitHead":"d281d58d334756acb3ac7c10589aa3611e4d75c0","scripts":{"dev":"vite","build":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"carandesign","email":"carangelo.carlo@virgilio.it"},"_npmVersion":"10.8.2","description":"Sketch-style React UI component library","directories":{},"_nodeVersion":"20.19.0","dependencies":{"roughjs":"^4.6.6"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.2.4","eslint":"^9.39.1","typescript":"~5.9.3","@types/react":"^19.2.5","vite-plugin-dts":"^4.5.4","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.1"},"peerDependencies":{"react":"^18 || ^19","react-dom":"^18 || ^19"},"_npmOperationalInternal":{"tmp":"tmp/drawui_0.2.3_1768901050580_0.47717443833668427","host":"s3://npm-registry-packages-npm-production"}},"0.2.4":{"name":"@carandesign/drawui","version":"0.2.4","description":"Sketch-style React UI component library","type":"module","main":"dist/drawui.cjs.js","module":"dist/drawui.es.js","types":"dist/index.d.ts","scripts":{"dev":"vite","build":"vite build","prepublishOnly":"npm run build"},"peerDependencies":{"react":"^18 || ^19","react-dom":"^18 || ^19"},"dependencies":{"roughjs":"^4.6.6"},"devDependencies":{"@types/react":"^19.2.5","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.1","autoprefixer":"^10.4.23","eslint":"^9.39.1","postcss":"^8.5.6","tailwindcss":"^4.1.18","typescript":"~5.9.3","vite":"^7.2.4","vite-plugin-dts":"^4.5.4"},"_id":"@carandesign/drawui@0.2.4","gitHead":"dee6226cfabd9a38e335311d555a5f61784b4237","_nodeVersion":"20.19.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-8KzP9ccQRyMO0nUpKzfQJ3dhgYL6uLlUBK4D6jrHVu+1DPNxACCr35yaOQX/3LXuJEJHHjlvZdxhs1/uPcRQFg==","shasum":"5548c2a5edb20aed0b8b20aa5fbe7ebd2bfd22c2","tarball":"https://registry.npmjs.org/@carandesign/drawui/-/drawui-0.2.4.tgz","fileCount":44,"unpackedSize":130403,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHjueXEEPOmpBHGPxVsOaT0NAoDpRt9u9U7AJELlXrHJAiEAg1h6O31xikQpIJszkluvQHr6bX4sjNEDHcB77g6VlCI="}]},"_npmUser":{"name":"carandesign","email":"carangelo.carlo@virgilio.it"},"directories":{},"maintainers":[{"name":"carandesign","email":"carangelo.carlo@virgilio.it"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/drawui_0.2.4_1768909033651_0.583679271016297"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-17T16:05:00.746Z","modified":"2026-01-20T11:37:13.893Z","0.1.0":"2026-01-17T16:05:01.025Z","0.1.1":"2026-01-17T16:08:50.412Z","0.1.2":"2026-01-18T10:31:28.058Z","0.2.1":"2026-01-19T08:43:19.772Z","0.2.2":"2026-01-19T13:13:26.722Z","0.2.3":"2026-01-20T09:24:10.760Z","0.2.4":"2026-01-20T11:37:13.789Z"},"description":"Sketch-style React UI component library","maintainers":[{"name":"carandesign","email":"carangelo.carlo@virgilio.it"}],"readme":"# ✏️ DrawUI\n\nDrawUI is a React component library that brings a **hand-drawn, sketchy aesthetic** to your applications.  \nPowered by **Rough.js**, it helps you build playful, organic, and distinctive user interfaces that stand out from traditional design systems.\n\n📖 Live documentation & interactive demos  \nhttps://drawui.caran.it\n\n---\n\n## Why DrawUI?\n\nDrawUI is made for developers who want to add **personality and warmth** to their UI.\n\nPerfect for:\n- Creative projects\n- Portfolios\n- Educational tools\n- Experimental or playful applications\n\n---\n\n## Features\n\n- Hand-drawn sketchy appearance powered by Rough.js\n- Reusable React components\n- Token-based theming system\n- Built with TypeScript\n- Lightweight and performant\n- Easy to integrate with existing React projects\n\n---\n\n## Installation\n\nInstall DrawUI using your preferred package manager:\n\n```bash\nnpm install @carandesign/drawui\n# or\nyarn add @carandesign/drawui\n# or\npnpm add @carandesign/drawui\n```\n\n### Peer Dependencies\n\nDrawUI requires React and Rough.js:\n\n```bash\nnpm install react react-dom roughjs\n```\n\n---\n\n## Quick Start\n\nWrap your application with the DrawuiThemeProvider and start using components:\n\n```tsx\nimport { DrawuiThemeProvider, DrawuiButton } from '@carandesign/drawui';\n\nfunction App() {\n  return (\n    <DrawuiThemeProvider>\n      <DrawuiButton>Click me!</DrawuiButton>\n    </DrawuiThemeProvider>\n  );\n}\n```\n\n---\n\n## Theming\n\nDrawUI uses a **token-based theming system** to keep styles consistent across components.\n\nCustomizable tokens include:\n- Stroke (color and width)\n- Roughness and bowing\n- Fill styles\n- Border radius\n- Component sizes\n\n### Custom Theme Example\n\n```tsx\nimport { DrawuiThemeProvider } from '@carandesign/drawui';\nimport type { DrawuiTheme } from '@carandesign/drawui';\n\nconst customTheme: Partial<DrawuiTheme> = {\n  stroke: {\n    thin: { color: '#2c3e50', width: 1.5 },\n    medium: { color: '#2c3e50', width: 2.5 },\n    thick: { color: '#2c3e50', width: 4 },\n  },\n  fill: {\n    background: '#ecf0f1',\n  },\n  roughness: {\n    roughness: 2,\n    bowing: 1,\n  },\n};\n\nfunction App() {\n  return (\n    <DrawuiThemeProvider theme={customTheme}>\n      {/* Your app components */}\n    </DrawuiThemeProvider>\n  );\n}\n```\n\n📘 Full theming guide and token reference  \nhttps://drawui.caran.it\n\n---\n\n## Components\n\nDrawUI includes a growing set of sketchy components:\n\n- Button\n- IconButton\n- Card\n- Divider\n- Collapse / Accordion\n- Icons (built-in icon set)\n\n👉 View all components and live examples  \nhttps://drawui.caran.it\n\n---\n\n## Built with Rough.js\n\nDrawUI is built on top of **Rough.js**, a lightweight graphics library that renders SVGs with a hand-drawn look.\n\nSpecial thanks to **Preet Shihn** for creating Rough.js.\n\n---\n\n## Contributing\n\nContributions, ideas, and feedback are welcome.\n\n- Open an issue\n- Submit a pull request\n- Share your ideas\n\n---\n\n## Support the Project\n\nIf you find DrawUI useful or inspiring:\n\n- ⭐ Star this repository on GitHub\n- 🗣 Share it with other developers\n- 🧪 Try it in your next creative project\n\nYour support helps the project grow 🚀\n\n---\n\n## License\n\nMIT License\n","readmeFilename":"README.md"}