{"_id":"@ataraui/ataraui-react","_rev":"13-9fc6c1764e4890758f7529f4b08eb2c5","name":"@ataraui/ataraui-react","dist-tags":{"latest":"0.7.0"},"versions":{"0.1.1":{"name":"@ataraui/ataraui-react","version":"0.1.1","author":{"name":"AtaraUI"},"license":"MIT","_id":"@ataraui/ataraui-react@0.1.1","maintainers":[{"name":"ryo-kurniawan","email":"pakayaaryo@gmail.com"}],"homepage":"https://github.com/ataraui/ataraui-react#readme","bugs":{"url":"https://github.com/ataraui/ataraui-react/issues"},"dist":{"shasum":"b8985e02b828a62d223bb69376c5b232bcf5a6ea","tarball":"https://registry.npmjs.org/@ataraui/ataraui-react/-/ataraui-react-0.1.1.tgz","fileCount":7,"integrity":"sha512-e4xcsv79ywxP9ZQKKaTyzBTYP8U8Gb8PVpr8lnzPuEP4PaSp3guLJYsIKnt0aJElx+RC3QKMEevl/icC1q49uA==","signatures":[{"sig":"MEYCIQClvWY61AyAT0ElRXhLc2R2A+SwCkW04b1OvdyrnQHfNgIhAPMrJtjTkmXee8S1qvwD0vY1xc/2c31PKV268s0m6Lij","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":44659},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup"},"_npmUser":{"name":"ryo-kurniawan","email":"pakayaaryo@gmail.com"},"repository":{"url":"git+https://github.com/ataraui/ataraui-react.git","type":"git"},"_npmVersion":"11.12.1","description":"AtaraUI — A calm, composable component library for React","directories":{},"_nodeVersion":"24.15.0","dependencies":{"clsx":"^2.1.0","tailwind-merge":"^2.3.0","class-variance-authority":"^0.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.3.0","react-dom":"^18.3.0","typescript":"^5.4.0","tailwindcss":"^4.0.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":">=17","react-dom":">=17"},"_npmOperationalInternal":{"tmp":"tmp/ataraui-react_0.1.1_1782632142287_0.34135645330268827","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@ataraui/ataraui-react","version":"0.2.0","author":{"name":"AtaraUI"},"license":"MIT","_id":"@ataraui/ataraui-react@0.2.0","maintainers":[{"name":"ryo-kurniawan","email":"pakayaaryo@gmail.com"}],"homepage":"https://github.com/ataraui/ataraui-react#readme","bugs":{"url":"https://github.com/ataraui/ataraui-react/issues"},"dist":{"shasum":"a9550a279eda99b0b1ef903dd7b03c2948c2a0b7","tarball":"https://registry.npmjs.org/@ataraui/ataraui-react/-/ataraui-react-0.2.0.tgz","fileCount":8,"integrity":"sha512-48d09YWNumBMgLw54FAi8ypHpg9cpR7e5RaGvcQAwRAQ7SyrcwOAQmMQ3Eqx7+WWd2EdV8WAQWNJQrR3Qm+0Cg==","signatures":[{"sig":"MEUCIGF/KhJnK5Oveyx5YjxPOvdPrIuT1QkAkBjmqoMcxAyzAiEArDj+iqcB0055E18bjwThPULefLmDAy3x7runV7cUAko=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":91172},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"df00143b1842a52fbee2134b0bafb67cadf7b2d3","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup"},"_npmUser":{"name":"ryo-kurniawan","email":"pakayaaryo@gmail.com"},"repository":{"url":"git+https://github.com/ataraui/ataraui-react.git","type":"git"},"_npmVersion":"11.12.1","description":"AtaraUI — A calm, composable component library for React","directories":{},"_nodeVersion":"24.15.0","dependencies":{"clsx":"^2.1.0","tailwind-merge":"^2.3.0","class-variance-authority":"^0.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.3.0","react-dom":"^18.3.0","typescript":"^5.4.0","tailwindcss":"^4.0.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":">=17","react-dom":">=17"},"_npmOperationalInternal":{"tmp":"tmp/ataraui-react_0.2.0_1782643319718_0.9003318510035776","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@ataraui/ataraui-react","version":"0.3.0","author":{"name":"AtaraUI"},"license":"MIT","_id":"@ataraui/ataraui-react@0.3.0","maintainers":[{"name":"ryo-kurniawan","email":"pakayaaryo@gmail.com"}],"homepage":"https://github.com/ataraui/ataraui-react#readme","bugs":{"url":"https://github.com/ataraui/ataraui-react/issues"},"dist":{"shasum":"c62537c7307a02f4fd109cb8673bbef9938286a1","tarball":"https://registry.npmjs.org/@ataraui/ataraui-react/-/ataraui-react-0.3.0.tgz","fileCount":8,"integrity":"sha512-v/ABhrwfVapGkerk16Vs+r+vkl1St1JfQbo9HIvuWPflRMPgiTJg1eULdnuLINxRN4y5EMoDZ0OsP7BoSEqPOg==","signatures":[{"sig":"MEYCIQDz2+tkuVinroMzygM8MjnEOmI/L10s7cRx6ewJpMMPrgIhAK6kh/4BtJsYl/93bxkQnArdW8Iviz8XppFilkZVo+OK","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":162075},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"f9a7253f158ec01fe5382ce06570873fc2671738","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup"},"_npmUser":{"name":"ryo-kurniawan","email":"pakayaaryo@gmail.com"},"repository":{"url":"git+https://github.com/ataraui/ataraui-react.git","type":"git"},"_npmVersion":"11.12.1","description":"AtaraUI — A calm, composable component library for React","directories":{},"_nodeVersion":"24.15.0","dependencies":{"clsx":"^2.1.0","tailwind-merge":"^2.3.0","class-variance-authority":"^0.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.3.0","react-dom":"^18.3.0","typescript":"^5.4.0","tailwindcss":"^4.0.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":">=17","react-dom":">=17"},"_npmOperationalInternal":{"tmp":"tmp/ataraui-react_0.3.0_1782656980619_0.8620642144936053","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@ataraui/ataraui-react","version":"0.4.0","author":{"name":"AtaraUI"},"license":"MIT","_id":"@ataraui/ataraui-react@0.4.0","maintainers":[{"name":"ryo-kurniawan","email":"pakayaaryo@gmail.com"}],"homepage":"https://github.com/ataraui/ataraui-react#readme","bugs":{"url":"https://github.com/ataraui/ataraui-react/issues"},"dist":{"shasum":"8e1ba84cfad01b68c7303a0903fe28dd6796eaf5","tarball":"https://registry.npmjs.org/@ataraui/ataraui-react/-/ataraui-react-0.4.0.tgz","fileCount":8,"integrity":"sha512-GRYZrM++hsz+8zfw+IO1H6iTp02tria8aczAvhFUznKDreMWCcBb+K9yNqhuikRetPhr+94xwcooq1FxCn8hZw==","signatures":[{"sig":"MEQCIH2hVLOm+I2iZT0aIkHQBQkZ1V28PV8g+OMoI4VZqXmgAiAVe4c5DI3kA830XjJ1/EqNrUGoP1qyxOSkT4wifSV7kQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":276928},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"36e4d539db3e1b140b666321d4970f43fcc54380","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup"},"_npmUser":{"name":"ryo-kurniawan","email":"pakayaaryo@gmail.com"},"repository":{"url":"git+https://github.com/ataraui/ataraui-react.git","type":"git"},"_npmVersion":"11.12.1","description":"AtaraUI — A calm, composable component library for React","directories":{},"_nodeVersion":"24.15.0","dependencies":{"clsx":"^2.1.0","tailwind-merge":"^2.3.0","class-variance-authority":"^0.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.3.0","react-dom":"^18.3.0","typescript":"^5.4.0","tailwindcss":"^4.0.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":">=17","react-dom":">=17"},"_npmOperationalInternal":{"tmp":"tmp/ataraui-react_0.4.0_1782659786884_0.8726105436729379","host":"s3://npm-registry-packages-npm-production"}},"0.5.0":{"name":"@ataraui/ataraui-react","version":"0.5.0","author":{"name":"AtaraUI"},"license":"MIT","_id":"@ataraui/ataraui-react@0.5.0","maintainers":[{"name":"ryo-kurniawan","email":"pakayaaryo@gmail.com"}],"homepage":"https://github.com/ataraui/ataraui-react#readme","bugs":{"url":"https://github.com/ataraui/ataraui-react/issues"},"dist":{"shasum":"02cfb774678ec92196575d5d3a28c50cd9ff2480","tarball":"https://registry.npmjs.org/@ataraui/ataraui-react/-/ataraui-react-0.5.0.tgz","fileCount":8,"integrity":"sha512-KnYTShDYY3rOA2SjqOHRUHcqV+HNlJ9lwUHHg0Bng0tPXsh9mqcC6Id7HXv7hE1wyfzkW9HUgZVApdnZr1HVzA==","signatures":[{"sig":"MEQCIAtAeTaK8nTyEXC3CPkUXnfDFj5Qqb6DTbYfCkMlIt55AiA1FwkEWTvz17u5PxsdDXfhJ8+ih8n2PqFrAco207owvA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":352523},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"5d1fa83231286fff3b4218c95e3a7d082a25cfef","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup"},"_npmUser":{"name":"ryo-kurniawan","email":"pakayaaryo@gmail.com"},"repository":{"url":"git+https://github.com/ataraui/ataraui-react.git","type":"git"},"_npmVersion":"11.12.1","description":"AtaraUI — A calm, composable component library for React","directories":{},"_nodeVersion":"24.15.0","dependencies":{"clsx":"^2.1.0","tailwind-merge":"^2.3.0","class-variance-authority":"^0.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.3.0","react-dom":"^18.3.0","typescript":"^5.4.0","tailwindcss":"^4.0.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":">=17","react-dom":">=17"},"_npmOperationalInternal":{"tmp":"tmp/ataraui-react_0.5.0_1782673521878_0.7026202280122908","host":"s3://npm-registry-packages-npm-production"}},"0.6.0":{"name":"@ataraui/ataraui-react","version":"0.6.0","author":{"name":"AtaraUI"},"license":"MIT","_id":"@ataraui/ataraui-react@0.6.0","maintainers":[{"name":"ryo-kurniawan","email":"pakayaaryo@gmail.com"}],"homepage":"https://github.com/ataraui/ataraui-react#readme","bugs":{"url":"https://github.com/ataraui/ataraui-react/issues"},"dist":{"shasum":"5f9481c8d0771bf8e3bc67a9b1e6067e49ecd949","tarball":"https://registry.npmjs.org/@ataraui/ataraui-react/-/ataraui-react-0.6.0.tgz","fileCount":8,"integrity":"sha512-C94iSWDGXEMxJqAVfZerQvluj9WYiKdOEjfYlapOs3/rd/uQAb8NJOm8QTOtIKG7FZLXt/buf3agD/srdRlFCQ==","signatures":[{"sig":"MEUCIQC2ZxFUNHwG9W8gc5iNEae5+vBs/pO/O31H7plqXUNv9gIgEDpUnok5780GCTg1upw4wXJnfdwfLqgPrMNsPeaVwM0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":440821},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"14a9ee705625cb47d601ce5a798ba55f1eb2b4e7","scripts":{"dev":"tsup --watch","lint":"tsc --noEmit","build":"tsup"},"_npmUser":{"name":"ryo-kurniawan","email":"pakayaaryo@gmail.com"},"repository":{"url":"git+https://github.com/ataraui/ataraui-react.git","type":"git"},"_npmVersion":"11.12.1","description":"AtaraUI — A calm, composable component library for React","directories":{},"_nodeVersion":"24.15.0","dependencies":{"clsx":"^2.1.0","tailwind-merge":"^2.3.0","class-variance-authority":"^0.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.3.0","react-dom":"^18.3.0","typescript":"^5.4.0","tailwindcss":"^4.0.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":">=17","react-dom":">=17"},"_npmOperationalInternal":{"tmp":"tmp/ataraui-react_0.6.0_1782782107874_0.2524620521751457","host":"s3://npm-registry-packages-npm-production"}},"0.7.0":{"name":"@ataraui/ataraui-react","version":"0.7.0","description":"AtaraUI — A calm, composable component library for React","author":{"name":"AtaraUI"},"license":"MIT","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js","types":"./dist/index.d.ts"}},"scripts":{"build":"tsup","dev":"tsup --watch","lint":"tsc --noEmit"},"peerDependencies":{"react":">=17","react-dom":">=17"},"devDependencies":{"@types/react":"^18.3.0","@types/react-dom":"^18.3.0","react":"^18.3.0","react-dom":"^18.3.0","tailwindcss":"^4.0.0","tsup":"^8.0.0","typescript":"^5.4.0"},"dependencies":{"class-variance-authority":"^0.7.0","clsx":"^2.1.0","tailwind-merge":"^2.3.0"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/ataraui/ataraui-react.git"},"gitHead":"9d50c986b89d70aa95d6b9a367c34a435fddfbad","_id":"@ataraui/ataraui-react@0.7.0","bugs":{"url":"https://github.com/ataraui/ataraui-react/issues"},"homepage":"https://github.com/ataraui/ataraui-react#readme","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-78no54DgoDqNqCQxJlrQjynymVD0ksqav4TVErwQ+KXxPqvLK6YEjKWkMsPRjsFVn2LlO1JIXdCpCydUfE3qng==","shasum":"a195dc74d7d4b057b4025feaf0a8aaffb76fd0c7","tarball":"https://registry.npmjs.org/@ataraui/ataraui-react/-/ataraui-react-0.7.0.tgz","fileCount":8,"unpackedSize":461915,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDkDMnDmuGeBBNwr9CuswIpnvad4fC4/rzZ0iPRPB+HpwIgUdjpXhdf/k9+bWumXLNynlLdImqFttcku0JdP6P5bGE="}]},"_npmUser":{"name":"ryo-kurniawan","email":"pakayaaryo@gmail.com"},"directories":{},"maintainers":[{"name":"ryo-kurniawan","email":"pakayaaryo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ataraui-react_0.7.0_1782963039880_0.9695485323818822"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-28T07:35:42.061Z","modified":"2026-07-02T03:30:40.224Z","0.1.0":"2026-06-27T16:21:42.403Z","0.1.0-rc.1":"2026-06-27T17:02:53.186Z","0.1.1":"2026-06-28T07:35:42.433Z","0.2.0":"2026-06-28T10:41:59.878Z","0.3.0":"2026-06-28T14:29:40.766Z","0.4.0":"2026-06-28T15:16:27.045Z","0.5.0":"2026-06-28T19:05:22.034Z","0.6.0":"2026-06-30T01:15:08.042Z","0.7.0":"2026-07-02T03:30:40.075Z"},"bugs":{"url":"https://github.com/ataraui/ataraui-react/issues"},"author":{"name":"AtaraUI"},"license":"MIT","homepage":"https://github.com/ataraui/ataraui-react#readme","repository":{"type":"git","url":"git+https://github.com/ataraui/ataraui-react.git"},"description":"AtaraUI — A calm, composable component library for React","maintainers":[{"name":"ryo-kurniawan","email":"pakayaaryo@gmail.com"}],"readme":"
\n \"AtaraUI\"\n

A calm, composable component library — built for developers who move fast without losing clarity.

\n\n[![npm version](https://img.shields.io/npm/v/@ataraui/ataraui-react?color=C2440A&label=@ataraui/ataraui-react)](https://www.npmjs.com/package/@ataraui/ataraui-react)\n[![license](https://img.shields.io/npm/l/@ataraui/ataraui-react?color=C2440A)](./LICENSE)\n
\n\n---\n\n## Installation\n\n```bash\nnpm install @ataraui/ataraui-react\n# or\npnpm add @ataraui/ataraui-react\n# or\nyarn add @ataraui/ataraui-react\n# or\nbun add @ataraui/ataraui-react\n```\n\n> **Peer dependencies:** `react >= 17`, `tailwindcss >= 4`\n\n## Setup\n\nAdd the source and theme tokens to your `globals.css`:\n\n```css\n@import \"tailwindcss\";\n@source \"../../node_modules/@ataraui/ataraui-react/dist/**/*.js\";\n\n@theme {\n --color-primary-50: #FFF4EE;\n --color-primary-100: #FFE0CC;\n --color-primary-200: #FFBF99;\n --color-primary-300: #F08050;\n --color-primary-400: #D4602A;\n --color-primary-500: #C2440A;\n --color-primary-600: #A03808;\n --color-primary-700: #8F2F06;\n --color-primary-800: #5C1C03;\n --color-primary-900: #2E0D01;\n}\n```\n\n> For the indeterminate `Progress` animation, also add this to your `globals.css`:\n> ```css\n> @keyframes indeterminate {\n> 0% { transform: translateX(-100%); }\n> 100% { transform: translateX(400%); }\n> }\n> ```\n\n## Dark Mode\n\nAtaraUI supports dark mode via CSS variables. Add these tokens to your `globals.css`:\n\n```css\n/* Light mode (default) */\n:root {\n --color-neutral-50: #FAFAFA;\n --color-neutral-100: #F5F5F5;\n --color-neutral-200: #E5E5E5;\n --color-neutral-300: #D4D4D4;\n --color-neutral-400: #A3A3A3;\n --color-neutral-500: #737373;\n --color-neutral-600: #525252;\n --color-neutral-700: #404040;\n --color-neutral-800: #262626;\n --color-neutral-900: #171717;\n\n --radius-sm: 0.25rem;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --radius-xl: 0.75rem;\n\n --bg: #FFFFFF;\n --bg-subtle: #FAFAFA;\n --fg: #171717;\n --fg-subtle: #737373;\n --border: #E5E5E5;\n}\n\n/* Dark mode */\n[data-theme=\"dark\"] {\n --color-neutral-50: #171717;\n --color-neutral-100: #262626;\n --color-neutral-200: #404040;\n --color-neutral-300: #525252;\n --color-neutral-400: #737373;\n --color-neutral-500: #A3A3A3;\n --color-neutral-600: #D4D4D4;\n --color-neutral-700: #E5E5E5;\n --color-neutral-800: #F5F5F5;\n --color-neutral-900: #FAFAFA;\n\n --bg: #0A0A0A;\n --bg-subtle: #171717;\n --fg: #FAFAFA;\n --fg-subtle: #A3A3A3;\n --border: #262626;\n}\n```\n\nThen wrap your app with `ThemeProvider` and use the `useTheme` hook to toggle:\n\n```tsx\n// layout.tsx or _app.tsx\nimport { ThemeProvider, Toaster, ToastProvider } from '@ataraui/ataraui-react'\n\nexport default function Layout({ children }) {\n return (\n \n \n {children}\n \n \n \n )\n}\n```\n\n```tsx\n// anywhere in your app\nimport { useTheme } from '@ataraui/ataraui-react'\n\nfunction ThemeToggle() {\n const { resolvedTheme, toggleTheme } = useTheme()\n return (\n \n )\n}\n```\n\n## ThemeProvider Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `defaultTheme` | `light` \\| `dark` \\| `system` | `system` | Initial theme |\n\n## useTheme\n\n| Value | Type | Description |\n|-------|------|-------------|\n| `theme` | `light` \\| `dark` \\| `system` | Current theme setting |\n| `resolvedTheme` | `light` \\| `dark` | Actual resolved theme |\n| `setTheme` | `(theme: Theme) => void` | Set a specific theme |\n| `toggleTheme` | `() => void` | Toggle between light and dark |\n\n## Usage\n\n```tsx\nimport React from 'react'\nimport {\n Button,\n Input,\n Badge,\n Card,\n CardHeader,\n CardTitle,\n CardDescription,\n CardContent,\n CardFooter,\n Avatar,\n Separator,\n Spinner,\n Select,\n Checkbox,\n RadioGroup,\n Switch,\n Modal,\n ModalHeader,\n ModalTitle,\n ModalDescription,\n ModalBody,\n ModalFooter,\n Drawer,\n DrawerHeader,\n DrawerTitle,\n DrawerDescription,\n DrawerBody,\n DrawerFooter,\n Tooltip,\n Popover,\n ToastProvider,\n Toaster,\n useToast,\n Alert,\n AlertTitle,\n AlertDescription,\n Progress,\n Skeleton,\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n Accordion,\n AccordionItem,\n AccordionTrigger,\n AccordionContent,\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableRow,\n TableHead,\n TableCell,\n TableCaption,\n ThemeProvider,\n useTheme,\n} from '@ataraui/ataraui-react'\n\nexport default function Page() {\n const [modalOpen, setModalOpen] = React.useState(false)\n const [drawerOpen, setDrawerOpen] = React.useState(false)\n\n return (\n \n \n
\n New\n\n \n\n \n \n\n \n \n Card Title\n Card description here.\n \n Content goes here.\n \n \n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n \n \n\n \n\n \n\n \n setModalOpen(false)}>\n setModalOpen(false)}>\n Confirm action\n This action can be reviewed before continuing.\n \n Use modals for focused workflows.\n \n \n \n \n \n\n \n setDrawerOpen(false)} side=\"right\">\n setDrawerOpen(false)}>\n Settings\n Manage preferences without leaving the page.\n \n Drawer content goes here.\n \n \n \n \n\n \n \n \n\n (\n
\n

Account settings

\n \n
\n )}\n >\n \n \n\n {}}>\n Success!\n Your changes have been saved.\n \n\n \n\n \n \n \n\n \n \n Account\n Password\n \n Account content here.\n Password content here.\n \n\n \n \n What is AtaraUI?\n A calm, composable component library.\n \n \n Is it free?\n Yes, MIT licensed.\n \n \n\n \n \n \n Name\n Email\n Role\n \n \n \n \n Ryo Kurniawan\n ryo@example.com\n Admin\n \n \n A list of your team members.\n
\n
\n \n \n \n )\n}\n```\n\n## Components\n\n| Component | Variants | Status |\n|-----------|----------|--------|\n| `Button` | `primary` `secondary` `outline` `ghost` `destructive` | ✅ Ready |\n| `Input` | `default` `error` | ✅ Ready |\n| `Badge` | `default` `secondary` `outline` `success` `warning` `destructive` | ✅ Ready |\n| `Card` | `elevated` `outlined` `ghost` | ✅ Ready |\n| `Avatar` | — | ✅ Ready |\n| `Separator` | `horizontal` `vertical` | ✅ Ready |\n| `Spinner` | — | ✅ Ready |\n| `Select` | `default` `error` | ✅ Ready |\n| `Checkbox` | — | ✅ Ready |\n| `RadioGroup` | `vertical` `horizontal` | ✅ Ready |\n| `Switch` | — | ✅ Ready |\n| `Modal` | `sm` `md` `lg` `xl` `full` | ✅ Ready |\n| `Drawer` | `left` `right` `top` `bottom` | ✅ Ready |\n| `Tooltip` | `top` `bottom` `left` `right` | ✅ Ready |\n| `Popover` | `top` `bottom` `left` `right` · `start` `center` `end` | ✅ Ready |\n| `Alert` | `default` `success` `warning` `destructive` | ✅ Ready |\n| `Progress` | `sm` `md` `lg` | ✅ Ready |\n| `Skeleton` | `text` `circle` `rect` | ✅ Ready |\n| `ToastProvider` + `Toaster` | `default` `success` `warning` `destructive` | ✅ Ready |\n| `Tabs` | `default` `outline` `pills` | ✅ Ready |\n| `Accordion` | `default` `ghost` `outlined` | ✅ Ready |\n| `Table` | `default` `striped` `bordered` | ✅ Ready |\n| `ThemeProvider` + `useTheme` | `light` `dark` `system` | ✅ Ready |\n\n## Button Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `variant` | `primary` \\| `secondary` \\| `outline` \\| `ghost` \\| `destructive` | `primary` | Visual style |\n| `size` | `sm` \\| `md` \\| `lg` \\| `icon` | `md` | Button size |\n| `isLoading` | `boolean` | `false` | Show loading spinner |\n\n## Input Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `label` | `string` | Label displayed above the input |\n| `error` | `string` | Error message (also triggers error state) |\n| `hint` | `string` | Helper text displayed below the input |\n| `inputSize` | `sm` \\| `md` \\| `lg` | Input height size |\n\n## Card Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `variant` | `elevated` \\| `outlined` \\| `ghost` | `elevated` | Visual style |\n| `padding` | `none` \\| `sm` \\| `md` \\| `lg` | `md` | Inner padding |\n\n## Avatar Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `src` | `string` | — | Image URL |\n| `alt` | `string` | — | Image alt text |\n| `fallback` | `string` | — | Name for initials fallback |\n| `size` | `xs` \\| `sm` \\| `md` \\| `lg` \\| `xl` | `md` | Avatar size |\n\n## Separator Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `orientation` | `horizontal` \\| `vertical` | `horizontal` | Direction |\n| `label` | `string` | — | Text label in the middle |\n\n## Spinner Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `size` | `xs` \\| `sm` \\| `md` \\| `lg` \\| `xl` | `md` | Spinner size |\n| `label` | `string` | — | Text label below spinner |\n\n## Select Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `label` | `string` | Label displayed above the select |\n| `error` | `string` | Error message (also triggers error state) |\n| `hint` | `string` | Helper text displayed below the select |\n| `placeholder` | `string` | Placeholder option text |\n| `options` | `SelectOption[]` | Array of `{ value, label, disabled? }` |\n| `selectSize` | `sm` \\| `md` \\| `lg` | Select height size |\n\n## Checkbox Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `label` | `string` | Label displayed next to the checkbox |\n| `description` | `string` | Helper text below the label |\n| `error` | `string` | Error message below the checkbox |\n\n## RadioGroup Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `name` | `string` | — | Input group name (required) |\n| `options` | `RadioOption[]` | — | Array of `{ value, label, description?, disabled? }` |\n| `value` | `string` | — | Controlled value |\n| `onChange` | `(value: string) => void` | — | Change handler |\n| `label` | `string` | — | Group label |\n| `orientation` | `vertical` \\| `horizontal` | `vertical` | Layout direction |\n| `error` | `string` | — | Error message |\n| `hint` | `string` | — | Helper text |\n\n## Switch Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `label` | `string` | Label displayed next to the switch |\n| `description` | `string` | Helper text below the label |\n| `error` | `string` | Error message below the switch |\n| `checked` | `boolean` | Controlled checked state |\n| `defaultChecked` | `boolean` | Default checked state (uncontrolled) |\n| `onChange` | `ChangeEventHandler` | Change handler |\n\n## Modal Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `open` | `boolean` | — | Controls whether the modal is visible |\n| `onClose` | `() => void` | — | Called when the modal should close |\n| `children` | `ReactNode` | — | Modal content |\n| `size` | `sm` \\| `md` \\| `lg` \\| `xl` \\| `full` | `md` | Modal width |\n| `closeOnOverlayClick` | `boolean` | `true` | Close when the overlay is clicked |\n\n## Drawer Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `open` | `boolean` | — | Controls whether the drawer is visible |\n| `onClose` | `() => void` | — | Called when the drawer should close |\n| `children` | `ReactNode` | — | Drawer content |\n| `side` | `left` \\| `right` \\| `top` \\| `bottom` | `right` | Drawer placement |\n| `size` | `sm` \\| `md` \\| `lg` \\| `full` | `md` | Drawer width for left/right placements |\n| `closeOnOverlayClick` | `boolean` | `true` | Close when the overlay is clicked |\n\n## Tooltip Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `content` | `ReactNode` | — | Tooltip content |\n| `children` | `ReactNode` | — | Tooltip trigger |\n| `side` | `top` \\| `bottom` \\| `left` \\| `right` | `top` | Tooltip placement |\n| `delay` | `number` | `300` | Delay before showing the tooltip, in milliseconds |\n\n## Popover Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `content` | `ReactNode` \\| `(controls) => ReactNode` | — | Popover content, optionally with `close`, `open`, and `setOpen` controls |\n| `children` | `ReactNode` | — | Popover trigger |\n| `side` | `top` \\| `bottom` \\| `left` \\| `right` | `bottom` | Popover placement |\n| `align` | `start` \\| `center` \\| `end` | `center` | Popover alignment relative to the trigger |\n| `open` | `boolean` | — | Controlled open state |\n| `defaultOpen` | `boolean` | `false` | Initial open state for uncontrolled usage |\n| `onOpenChange` | `(open: boolean) => void` | — | Called when open state changes |\n| `closeOnOutsideClick` | `boolean` | `true` | Close when clicking outside the popover |\n\n## Alert Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `variant` | `default` \\| `success` \\| `warning` \\| `destructive` | `default` | Visual style |\n| `icon` | `ReactNode` | — | Icon displayed on the left |\n| `onClose` | `() => void` | — | Show dismiss button and handle close |\n\n## Progress Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `value` | `number` | — | Value between 0–100. Omit for indeterminate |\n| `size` | `sm` \\| `md` \\| `lg` | `md` | Bar height |\n| `label` | `string` | — | Text label above the bar |\n| `showLabel` | `boolean` | `false` | Show percentage value on the right |\n\n## Skeleton Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `variant` | `text` \\| `circle` \\| `rect` | `rect` | Shape of the skeleton |\n| `width` | `string` \\| `number` | — | Width (number → px, string → as-is) |\n| `height` | `string` \\| `number` | — | Height (number → px, string → as-is) |\n\n## Toast\n\nWrap your app once with `ToastProvider` and place `Toaster` inside it:\n\n```tsx\n// layout.tsx or _app.tsx\nimport { ToastProvider, Toaster } from '@ataraui/ataraui-react'\n\nexport default function Layout({ children }) {\n return (\n \n {children}\n \n \n )\n}\n```\n\nThen use the `useToast` hook anywhere inside the tree:\n\n```tsx\nimport { useToast } from '@ataraui/ataraui-react'\n\nconst { toast, dismiss, dismissAll } = useToast()\n\ntoast({ title: 'Saved!', description: 'Your changes were saved.', variant: 'success' })\n```\n\n## Toaster Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `position` | `top-left` \\| `top-center` \\| `top-right` \\| `bottom-left` \\| `bottom-center` \\| `bottom-right` | `bottom-right` | Toast position on screen |\n| `defaultDuration` | `number` | `4000` | Auto-dismiss duration in ms. Pass `0` to disable |\n\n## Toast Options (`useToast`)\n\n| Option | Type | Description |\n|--------|------|-------------|\n| `title` | `string` | Main toast message |\n| `description` | `string` | Supporting text below the title |\n| `variant` | `default` \\| `success` \\| `warning` \\| `destructive` | Visual style |\n| `duration` | `number` | Override `defaultDuration` for this toast |\n| `icon` | `ReactNode` | Icon on the left |\n| `action` | `{ label: string, onClick: () => void }` | Action button inside the toast |\n\n## Tabs Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `variant` | `default` \\| `outline` \\| `pills` | `default` | Visual style |\n| `value` | `string` | — | Controlled active tab |\n| `defaultValue` | `string` | — | Initial active tab (uncontrolled) |\n| `onChange` | `(value: string) => void` | — | Called when active tab changes |\n\n## Accordion Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `type` | `single` \\| `multiple` | `single` | Allow one or multiple items open at once |\n| `variant` | `default` \\| `ghost` \\| `outlined` | `default` | Visual style |\n| `value` | `string` \\| `string[]` | — | Controlled open item(s) |\n| `defaultValue` | `string` \\| `string[]` | — | Initial open item(s) (uncontrolled) |\n| `onChange` | `(value: string \\| string[]) => void` | — | Called when open state changes |\n\n## AccordionItem Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `value` | `string` | — | Unique identifier for this item (required) |\n| `disabled` | `boolean` | `false` | Disable this item |\n\n## Table Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `variant` | `default` \\| `striped` \\| `bordered` | `default` | Visual style |\n\n## Development\n\n```bash\n# Clone the repo\ngit clone https://github.com/ataraui/ataraui-react.git\ncd ataraui-react\n\n# Install dependencies\nnpm install\n\n# Build the library\nnpm run build\n\n# Watch mode\nnpm run dev\n```\n\n## Publishing\n\n```bash\n# Bump version in package.json, then:\nnpm run build\nnpm publish --access public\n```\n\n## Roadmap\n\n| Version | Components | Category |\n|---------|-----------|----------|\n| **v0.1.0** ✅ | `Button` `Input` `Badge` | Core + Tailwind v4 |\n| **v0.2.0** ✅ | `Card` `Avatar` `Separator` `Spinner` | Layout primitives |\n| **v0.3.0** ✅ | `Select` `Checkbox` `Radio` `Switch` | Form components |\n| **v0.4.0** ✅ | `Modal/Dialog` `Drawer` `Tooltip` `Popover` | Overlay components |\n| **v0.5.0** ✅ | `Toast` `Alert` `Progress` `Skeleton` | Feedback components |\n| **v0.6.0** ✅ | `Table` `Tabs` `Accordion` | Data display |\n| **v0.7.0** ✅ | Dark mode · `ThemeProvider` · `useTheme` | DX improvements |\n| **v0.8.0** | `Navbar` `Sidebar` `Breadcrumb` | Navigation |\n| **v0.9.0** | `DatePicker` `Combobox` `FileUpload` | Advanced inputs |\n| **v1.0.0** 🎯 | API stable · Full docs · A11y tested · ataraui.com live | Stable release |\n\n## Contributing\n\nContributions are welcome! Feel free to open an issue or submit a pull request.\n\n## License\n\nMIT © [AtaraUI](https://github.com/AtaraUI)","readmeFilename":"README.md"}