{"_id":"@emiliachen/onionui","_rev":"4-27840f6051ab78569706a3648119eac5","name":"@emiliachen/onionui","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.0":{"name":"@emiliachen/onionui","version":"0.1.0","keywords":["tailwindcss","daisyui","ui","components","plugin"],"license":"MIT","_id":"@emiliachen/onionui@0.1.0","maintainers":[{"name":"emiliachen","email":"inchmei@gmail.com"}],"dist":{"shasum":"8b8ab9f639fe2f051c124d3ad294869ac3f96be8","tarball":"https://registry.npmjs.org/@emiliachen/onionui/-/onionui-0.1.0.tgz","fileCount":6,"integrity":"sha512-wZEfgli728uJ6e8Ml5OjDEXNgmQb5TmMII3gCs5AUMO/G6ukNrHEt6JaJIHNJl8A/LBg+v0H93u4lhHx8Kzfqw==","signatures":[{"sig":"MEUCIQCLpQUAdtL2wc+Q5tvYAQ/GhfiYcpwDqyXHnq8hbpANlAIgZJc1n37P7002f89AzmN/7yFTReGDUKCazzOzoe5Kwmw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11027},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"bun":">=1.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"7b32e66ef20f38c16b8ea15764e0213f84f5c9f4","scripts":{"build":"bun run ./scripts/build.ts","check":"bunx tsc --noEmit","prepublishOnly":"bun run check && bun run build"},"_npmUser":{"name":"emiliachen","email":"inchmei@gmail.com"},"_npmVersion":"11.9.0","description":"A daisyUI-like component library built with pure Tailwind CSS plugin.","directories":{},"_nodeVersion":"24.14.0","_hasShrinkwrap":false,"devDependencies":{"@types/bun":"latest","typescript":"^5.8.3","tailwindcss":"^4.1.5"},"peerDependencies":{"tailwindcss":"^3.4.0 || ^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/onionui_0.1.0_1777170810033_0.6074719031018467","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@emiliachen/onionui","version":"0.1.1","keywords":["tailwindcss","daisyui","ui","components","plugin"],"license":"MIT","_id":"@emiliachen/onionui@0.1.1","maintainers":[{"name":"emiliachen","email":"inchmei@gmail.com"}],"dist":{"shasum":"c7e042db171a1d7df94fba9863ecaa7245eff54b","tarball":"https://registry.npmjs.org/@emiliachen/onionui/-/onionui-0.1.1.tgz","fileCount":6,"integrity":"sha512-/WXd2jWB0mq3OI04IS1KVhtCg3rMaZE+Wfi4jLTTYdsu1rUKFGlIxX9wAEUQYw0TlgWFbz+Jidf17vvxYE2mfQ==","signatures":[{"sig":"MEUCIQCHcXsfwNPudPRZDg4PkLRVYTOqTPIZoGtkjxDAjLnKxgIgd3EjJssQnjlpqKk1LPKzMNDRM5n/Vwx7hYUBi4X3Wyk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23008},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"bun":">=1.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"0a73cf7d9922fee474b83d07038dca159df360cf","scripts":{"build":"bun run ./scripts/build.ts","check":"bunx tsc --noEmit","demo:build":"bun run build && bunx @tailwindcss/cli@4.2.4 -i ./example/input.css -o ./example/output.css","demo:watch":"bun run build && bunx @tailwindcss/cli@4.2.4 -i ./example/input.css -o ./example/output.css --watch","prepublishOnly":"bun run check && bun run build"},"_npmUser":{"name":"emiliachen","email":"inchmei@gmail.com"},"_npmVersion":"11.9.0","description":"A daisyUI-like component library built with pure Tailwind CSS plugin.","directories":{},"_nodeVersion":"24.14.0","_hasShrinkwrap":false,"devDependencies":{"@types/bun":"latest","typescript":"^5.8.3","tailwindcss":"^4.1.5","@tailwindcss/cli":"^4.1.5"},"peerDependencies":{"tailwindcss":"^3.4.0 || ^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/onionui_0.1.1_1777172591122_0.8009707879562493","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@emiliachen/onionui","version":"0.1.2","keywords":["tailwindcss","ui","components","plugin"],"license":"MIT","_id":"@emiliachen/onionui@0.1.2","maintainers":[{"name":"emiliachen","email":"inchmei@gmail.com"}],"dist":{"shasum":"1bcab25ce2fe551c9b05af8b87b7a0aeda0b8483","tarball":"https://registry.npmjs.org/@emiliachen/onionui/-/onionui-0.1.2.tgz","fileCount":6,"integrity":"sha512-tqkcRcsKubIPZSeAptCZ6ZKG72/Cg+zIukOI+5j+jRMaMowjuJVS3QnEiDOTCKCPhX1ckLwpkl3QHPe7cAWvaA==","signatures":[{"sig":"MEUCIAUZ7QR5X35aJ2YfFLgdtv6HGMt4cxROcc2sA5r3+Qo0AiEAviCPqH9ZN/DcxwN2EtRzTGJvOLsobfeU0I/W4E7XmqA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":110868},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"bun":">=1.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"2d02fd6e37f242121bb93ce7aac6e93ac14af553","scripts":{"build":"bun run ./scripts/build.ts","check":"bunx tsc --noEmit","demo:build":"bun run build && bunx @tailwindcss/cli@4.2.4 -i ./example/input.css -o ./example/output.css","demo:watch":"bun run build && bunx @tailwindcss/cli@4.2.4 -i ./example/input.css -o ./example/output.css --watch","prepublishOnly":"bun run check && bun run build"},"_npmUser":{"name":"emiliachen","email":"inchmei@gmail.com"},"_npmVersion":"11.9.0","description":"A component library built with a pure Tailwind CSS plugin.","directories":{},"_nodeVersion":"24.14.0","_hasShrinkwrap":false,"devDependencies":{"@types/bun":"latest","typescript":"^5.8.3","tailwindcss":"^4.1.5","@tailwindcss/cli":"^4.1.5"},"peerDependencies":{"tailwindcss":"^3.4.0 || ^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/onionui_0.1.2_1777612513640_0.7194745187450022","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@emiliachen/onionui","version":"0.1.3","description":"A component library built with a pure Tailwind CSS plugin.","license":"MIT","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"keywords":["tailwindcss","ui","components","plugin"],"engines":{"bun":">=1.0.0"},"scripts":{"build":"bun run ./scripts/build.ts","check":"bunx tsc --noEmit","demo:build":"bun run build && bunx @tailwindcss/cli@4.2.4 -i ./example/input.css -o ./example/output.css","demo:watch":"bun run build && bunx @tailwindcss/cli@4.2.4 -i ./example/input.css -o ./example/output.css --watch","prepublishOnly":"bun run check && bun run build"},"peerDependencies":{"tailwindcss":"^3.4.0 || ^4.0.0"},"devDependencies":{"@types/bun":"latest","@tailwindcss/cli":"^4.1.5","tailwindcss":"^4.1.5","typescript":"^5.8.3"},"gitHead":"4dc1e30a5b5bc6208f63451089eec21add3f4957","_id":"@emiliachen/onionui@0.1.3","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-n63i5cfvL8s8vF8i7uwDQbl9kweIvsi8PbtQL+YPzINNHGK6FYL5qFzlmNgOWeQFZhP/iuSIjBxu3TkCpu2/Fg==","shasum":"c96e41d8f288513aca16f392a1d9faed047b6424","tarball":"https://registry.npmjs.org/@emiliachen/onionui/-/onionui-0.1.3.tgz","fileCount":29,"unpackedSize":4224962,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAXFp+fKiBQPElHisnLjz+Mhm+EqTQJkCOqRG0R0MmwLAiBGqwHdbXhDcRPpzU/HsrfCRAVkEhA5mim21EERB/6myQ=="}]},"_npmUser":{"name":"emiliachen","email":"inchmei@gmail.com"},"directories":{},"maintainers":[{"name":"emiliachen","email":"inchmei@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/onionui_0.1.3_1777614528889_0.14239798588155672"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-26T02:33:29.928Z","modified":"2026-05-01T05:48:49.267Z","0.1.0":"2026-04-26T02:33:30.177Z","0.1.1":"2026-04-26T03:03:11.263Z","0.1.2":"2026-05-01T05:15:13.813Z","0.1.3":"2026-05-01T05:48:49.161Z"},"license":"MIT","keywords":["tailwindcss","ui","components","plugin"],"description":"A component library built with a pure Tailwind CSS plugin.","maintainers":[{"name":"emiliachen","email":"inchmei@gmail.com"}],"readme":"# OnionUI\n\n`@emiliachen/onionui` is a pure Tailwind CSS plugin that provides themeable component classes.\n\n## Features\n\n- Pure CSS component classes, no component runtime required.\n- Theme tokens via CSS variables: `light`, `dark`, and `mssp`.\n- Works in plain HTML, Vue, React, or any framework that can use Tailwind CSS.\n- Includes common UI patterns such as `btn`, `card`, `alert`, `input`, `table`, `tabs`, `modal`, `drawer`, `sidebar`, and more.\n\n## Install\n\n```bash\nbun add @emiliachen/onionui tailwindcss\n```\n\n## Setup\n\n### Tailwind CSS v4\n\nAdd the plugin in your CSS entry:\n\n```css\n@import \"tailwindcss\";\n@plugin \"@emiliachen/onionui\";\n```\n\nIf your templates are outside Tailwind's default scan paths, add `@source`:\n\n```css\n@import \"tailwindcss\";\n@source \"./src/**/*.{html,js,jsx,ts,tsx,vue}\";\n@plugin \"@emiliachen/onionui\";\n```\n\n### Tailwind CSS v3\n\nAdd the plugin in `tailwind.config.ts`:\n\n```ts\nimport type { Config } from \"tailwindcss\";\nimport onionui from \"@emiliachen/onionui\";\n\nexport default {\n content: [\"./index.html\", \"./src/**/*.{html,js,jsx,ts,tsx,vue}\"],\n plugins: [onionui({ defaultTheme: \"mssp\" })]\n} satisfies Config;\n```\n\n## Themes\n\nSet a theme with `data-theme`:\n\n```html\n\n ...\n\n```\n\nAvailable themes:\n\n- `light`\n- `dark`\n- `mssp`\n\nThe `mssp` sidebar background and active-item images are embedded into the built plugin CSS as data URLs, so consumers do not need to copy static assets manually. The original assets are also included in the npm package under `assets/`.\n\nYou can also switch themes with CSS-only radio controllers:\n\n```html\n\n\n\n```\n\n## HTML Usage\n\nUse OnionUI classes directly in markup:\n\n```html\n
\n

Create customer

\n

Fill in the customer information before submitting.

\n\n \n \n\n
\n \n \n
\n
\n```\n\nA CSS-only modal can be opened with `:target`:\n\n```html\nOpen modal\n\n
\n
\n

Confirm action

\n

This action will be applied immediately.

\n
\n Cancel\n Confirm\n
\n
\n
\n```\n\n## Vue Usage\n\nConfigure Tailwind to scan Vue files:\n\n```css\n@import \"tailwindcss\";\n@source \"./src/**/*.{vue,ts}\";\n@plugin \"@emiliachen/onionui\";\n```\n\nUse the classes in Vue templates:\n\n```vue\n\n\n\n```\n\n## React Usage\n\nConfigure Tailwind to scan React files:\n\n```css\n@import \"tailwindcss\";\n@source \"./src/**/*.{js,jsx,ts,tsx}\";\n@plugin \"@emiliachen/onionui\";\n```\n\nUse `className` in React components:\n\n```tsx\nimport { useState } from \"react\";\n\nexport function CustomerCard() {\n const [enabled, setEnabled] = useState(true);\n\n return (\n
\n
\n
\n Customers\n 128\n Active accounts\n
\n
\n\n
\n

Customer settings

\n
\n \n \n
\n
\n \n \n
\n
\n
\n );\n}\n```\n\n## Common Component Classes\n\nGrouped by usage:\n\n- Actions: `btn`, `dropdown`, `modal`\n- Data display: `avatar`, `badge`, `calendar`, `card`, `chat`, `countdown`, `diff`, `kbd`, `list`, `stats`, `table`, `timeline`\n- Forms: `checkbox`, `fieldset`, `file-input`, `filter`, `input`, `label`, `radio`, `range`, `rating`, `select`, `textarea`, `toggle`, `validator`\n- Navigation: `breadcrumbs`, `dock`, `link`, `menu`, `navbar`, `pagination`, `sidebar`, `steps`, `tabs`\n- Feedback: `alert`, `loading`, `progress`, `radial-progress`, `skeleton`, `status`, `toast`\n- Layout: `accordion`, `artboard`, `carousel`, `collapse`, `divider`, `drawer`, `footer`, `hero`, `indicator`, `join`, `mask`, `mockup`, `stack`, `swap`\n\n## Development\n\n```bash\nbun install\nbun run check\nbun run build\n```\n\n## Demo\n\n```bash\nbun run demo:build\n```\n\nThen open `example/index.html` in a browser.\n\nFor live CSS rebuild:\n\n```bash\nbun run demo:watch\n```\n\n## Publish\n\n```bash\nbun run check\nbun run build\nnpm publish --access public\n```\n","readmeFilename":"README.md"}