{"_id":"@aaroh/react-ui","name":"@aaroh/react-ui","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@aaroh/react-ui","version":"0.1.0","description":"Aaroh UI for React — Accessible, themeable components powered by the aaroh motion engine via @aaroh/react (^0.1.0).","author":{"name":"Quilonix","email":"hello@quilonix.com"},"license":"MIT","homepage":"https://aaroh.dev/ui/react","repository":{"type":"git","url":"git+https://github.com/quilonix/aaroh.git","directory":"packages/react-ui"},"keywords":["aaroh","react","ui","components","design-system","accessible","themeable"],"sideEffects":false,"type":"module","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./dist/types/index.d.ts"}},"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/types/index.d.ts","scripts":{"build":"vite build && tsc -p tsconfig.build.json","dev":"vite build --watch","typecheck":"tsc --noEmit","test":"vitest run --environment happy-dom","test:watch":"vitest watch --environment happy-dom","lint":"eslint src","lint:fix":"eslint src --fix","clean":"rimraf dist"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"dependencies":{"@aaroh/ui":"workspace:*","@aaroh/react":"workspace:*","aaroh":"workspace:*"},"devDependencies":{"@aaroh/tsconfig":"workspace:*","@testing-library/react":"^16.0.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","happy-dom":"^15.0.0","react":"^18.3.0","react-dom":"^18.3.0","rimraf":"^6.0.0","typescript":"^5.6.0","vite":"^5.4.0","vitest":"^2.1.0"},"_id":"@aaroh/react-ui@0.1.0","gitHead":"dac68ded305eb50bba86a6e3bde2895985902412","bugs":{"url":"https://github.com/quilonix/aaroh/issues"},"_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-BET7NQj0rr659vvh5EI/Mv9tCZF8dnBC2kIwrF97ZuNisw5LwIkTesHBQ366wC6CxqKt2EBXHUM5H/y1+GGtKw==","shasum":"a2ccbaf48bbc6f3e82e4ca7ec62141e7039d7d9d","tarball":"https://registry.npmjs.org/@aaroh/react-ui/-/react-ui-0.1.0.tgz","fileCount":62,"unpackedSize":686191,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDMplL5ZQnW/NmS7A4tvAUUOKfSSJnH/kgh2Uf9oqsqFQIhAPxvALnMjdTN1GV5bQBY+CKKqkMFwBNIBiXhAlAISG5V"}]},"_npmUser":{"name":"manvanth.gowda.m","email":"appumanu3214@gmail.com"},"directories":{},"maintainers":[{"name":"manvanth.gowda.m","email":"appumanu3214@gmail.com"},{"name":"mithun50","email":"mithungowda.b7411@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-ui_0.1.0_1783679018083_0.38532620676384033"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-10T10:23:37.937Z","0.1.0":"2026-07-10T10:23:38.241Z","modified":"2026-07-10T10:23:38.459Z"},"maintainers":[{"name":"manvanth.gowda.m","email":"appumanu3214@gmail.com"},{"name":"mithun50","email":"mithungowda.b7411@gmail.com"}],"description":"Aaroh UI for React — Accessible, themeable components powered by the aaroh motion engine via @aaroh/react (^0.1.0).","homepage":"https://aaroh.dev/ui/react","keywords":["aaroh","react","ui","components","design-system","accessible","themeable"],"repository":{"type":"git","url":"git+https://github.com/quilonix/aaroh.git","directory":"packages/react-ui"},"author":{"name":"Quilonix","email":"hello@quilonix.com"},"bugs":{"url":"https://github.com/quilonix/aaroh/issues"},"license":"MIT","readme":"# @aaroh/react-ui\n\nAccessible, themeable React components powered by the [Aaroh](https://aaroh.dev)\ndesign system.\n\n27 production-ready components. Zero styling logic in the component layer — all\nvisuals come from [`@aaroh/ui`](../ui), making themes instantly switchable with\na single CSS import.\n\n## Installation\n\n```bash\nnpm install @aaroh/react-ui @aaroh/ui\n```\n\n## Setup\n\nImport a theme and the component CSS files you need:\n\n```tsx\n// app/layout.tsx or main entry point\n\n// 1. Pick a theme\nimport '@aaroh/ui/themes/heritage';\n\n// 2. Import component styles you use\nimport '@aaroh/ui/components/button';\nimport '@aaroh/ui/components/input';\nimport '@aaroh/ui/components/card';\n```\n\nThat's all the setup required. Components are ready to use.\n\n## Quick Example\n\n```tsx\nimport { Button, Input, Card } from '@aaroh/react-ui';\n\nfunction SignupCard() {\n  return (\n    <Card variant=\"elevated\" size=\"md\">\n      <Card.Header>\n        <Card.Title>Create Account</Card.Title>\n        <Card.Description>Join us in under a minute.</Card.Description>\n      </Card.Header>\n      <Card.Body>\n        <Input label=\"Email\" placeholder=\"you@example.com\" size=\"md\" />\n        <Input label=\"Password\" type=\"password\" size=\"md\" />\n      </Card.Body>\n      <Card.Footer>\n        <Button variant=\"solid\" size=\"md\">\n          Sign Up\n        </Button>\n        <Button variant=\"ghost\" size=\"md\">\n          Cancel\n        </Button>\n      </Card.Footer>\n    </Card>\n  );\n}\n```\n\n## Components\n\nAll 27 components, importable from `@aaroh/react-ui`:\n\n| Component    | Import                                           |\n| ------------ | ------------------------------------------------ |\n| Accordion    | `import { Accordion } from '@aaroh/react-ui'`    |\n| AI Chat      | `import { AI } from '@aaroh/react-ui'`           |\n| Animation    | `import { Animation } from '@aaroh/react-ui'`    |\n| Avatar       | `import { Avatar } from '@aaroh/react-ui'`       |\n| Badge        | `import { Badge } from '@aaroh/react-ui'`        |\n| Button       | `import { Button } from '@aaroh/react-ui'`       |\n| Card         | `import { Card } from '@aaroh/react-ui'`         |\n| Carousel     | `import { Carousel } from '@aaroh/react-ui'`     |\n| Checkbox     | `import { Checkbox } from '@aaroh/react-ui'`     |\n| Dashboard    | `import { Dashboard } from '@aaroh/react-ui'`    |\n| Drawer       | `import { Drawer } from '@aaroh/react-ui'`       |\n| DropdownMenu | `import { DropdownMenu } from '@aaroh/react-ui'` |\n| Ecommerce    | `import { Ecommerce } from '@aaroh/react-ui'`    |\n| Forms        | `import { Forms } from '@aaroh/react-ui'`        |\n| Input        | `import { Input } from '@aaroh/react-ui'`        |\n| Media        | `import { Media } from '@aaroh/react-ui'`        |\n| Modal        | `import { Modal } from '@aaroh/react-ui'`        |\n| Progress     | `import { Progress } from '@aaroh/react-ui'`     |\n| Radio        | `import { Radio } from '@aaroh/react-ui'`        |\n| Select       | `import { Select } from '@aaroh/react-ui'`       |\n| Skeleton     | `import { Skeleton } from '@aaroh/react-ui'`     |\n| Social       | `import { Social } from '@aaroh/react-ui'`       |\n| Switch       | `import { Switch } from '@aaroh/react-ui'`       |\n| Tabs         | `import { Tabs } from '@aaroh/react-ui'`         |\n| Textarea     | `import { Textarea } from '@aaroh/react-ui'`     |\n| Toast        | `import { Toast } from '@aaroh/react-ui'`        |\n| Tooltip      | `import { Tooltip } from '@aaroh/react-ui'`      |\n\n## Props Patterns\n\nComponents follow consistent prop conventions:\n\n### variant\n\nControls the visual style:\n\n```tsx\n<Button variant=\"solid\" />    {/* Filled background */}\n<Button variant=\"outline\" />  {/* Border only */}\n<Button variant=\"ghost\" />    {/* No background, no border */}\n<Button variant=\"gradient\" /> {/* Gradient fill */}\n```\n\n### size\n\nControls dimensions and font size:\n\n```tsx\n<Button size=\"xs\" />\n<Button size=\"sm\" />\n<Button size=\"md\" />  {/* default */}\n<Button size=\"lg\" />\n<Button size=\"xl\" />\n```\n\n### shape\n\nControls border radius:\n\n```tsx\n<Button shape=\"pill\" />     {/* Fully rounded */}\n<Button shape=\"rounded\" />  {/* Moderate rounding */}\n<Button shape=\"square\" />   {/* Sharp corners */}\n```\n\n### color\n\nApplies semantic color overrides:\n\n```tsx\n<Button color=\"default\" />     {/* Uses theme primary */}\n<Button color=\"destructive\" /> {/* Red/danger */}\n<Button color=\"success\" />     {/* Green/success */}\n<Button color=\"warning\" />     {/* Amber/warning */}\n```\n\n## Accessibility\n\nEvery component ships with built-in accessibility:\n\n- **Keyboard navigation** — all interactive components are keyboard-operable\n- **ARIA attributes** — correct roles, states, and properties applied\n  automatically\n- **Focus management** — visible focus rings, proper tab order\n- **Screen reader support** — labels, descriptions, and live regions where\n  needed\n- **Reduced motion** — respects `prefers-reduced-motion` by default\n- **Icon-only warnings** — dev-mode console warnings when icon-only buttons lack\n  `ariaLabel`\n\n```tsx\n// Icon-only button — ariaLabel is required for accessibility\n<Button icon={menuIcon} ariaLabel=\"Open menu\" />\n```\n\n## Theming\n\nSwitching themes is as simple as changing which CSS file you import:\n\n```tsx\n// Heritage (dark, gold-accented)\nimport '@aaroh/ui/themes/heritage';\n\n// Modern (light, clean)\nimport '@aaroh/ui/themes/modern';\n\n// Minimal (subtle, neutral)\nimport '@aaroh/ui/themes/minimal';\n```\n\nFor runtime theme switching, use the theme engine:\n\n```tsx\nimport { applyTheme, removeTheme, heritage, modern } from '@aaroh/ui';\n\nfunction ThemeSwitcher() {\n  const [handle, setHandle] = useState(null);\n\n  const switchTo = (theme) => {\n    if (handle) removeTheme(handle);\n    setHandle(applyTheme(document.documentElement, theme));\n  };\n\n  return (\n    <div>\n      <Button onClick={() => switchTo(heritage)}>Heritage</Button>\n      <Button onClick={() => switchTo(modern)}>Modern</Button>\n    </div>\n  );\n}\n```\n\n## Framework Compatibility\n\n`@aaroh/react-ui` works with:\n\n- **React 18+** — hooks, concurrent features, Suspense\n- **Next.js** — App Router & Pages Router, SSR-safe\n- **Remix** — full SSR support\n- **Astro** — with `client:*` directives for interactive islands\n- **Vite** — zero-config, just import and use\n\nAll components use `forwardRef` for ref forwarding and accept standard HTML\nattributes via prop spreading.\n\n## TypeScript\n\nFull type definitions ship with the package. No `@types/*` install needed.\n\n```tsx\nimport type { ButtonProps, InputProps, CardProps } from '@aaroh/react-ui';\n\n// Props are fully typed with IntelliSense support\nconst config: ButtonProps = {\n  variant: 'solid',\n  size: 'md',\n  shape: 'pill',\n  color: 'default',\n  loading: false,\n};\n```\n\n## Peer Dependencies\n\n- `react` >= 18.0.0\n- `react-dom` >= 18.0.0\n\n## License\n\nMIT © [Quilonix](https://quilonix.com)\n","readmeFilename":"README.md","_rev":"1-b280aadd3aaa08b93a6cf1f697d665b6"}