@aaroh/react-ui

Accessible, themeable React components powered by the Aaroh design system.

27 production-ready components. Zero styling logic in the component layer — all visuals come from @aaroh/ui, making themes instantly switchable with a single CSS import.

Installation

npm install @aaroh/react-ui @aaroh/ui

Setup

Import a theme and the component CSS files you need:

// app/layout.tsx or main entry point

// 1. Pick a theme
import '@aaroh/ui/themes/heritage';

// 2. Import component styles you use
import '@aaroh/ui/components/button';
import '@aaroh/ui/components/input';
import '@aaroh/ui/components/card';

That's all the setup required. Components are ready to use.

Quick Example

import { Button, Input, Card } from '@aaroh/react-ui';

function SignupCard() {
  return (
    <Card variant="elevated" size="md">
      <Card.Header>
        <Card.Title>Create Account</Card.Title>
        <Card.Description>Join us in under a minute.</Card.Description>
      </Card.Header>
      <Card.Body>
        <Input label="Email" placeholder="[email protected]" size="md" />
        <Input label="Password" type="password" size="md" />
      </Card.Body>
      <Card.Footer>
        <Button variant="solid" size="md">
          Sign Up
        </Button>
        <Button variant="ghost" size="md">
          Cancel
        </Button>
      </Card.Footer>
    </Card>
  );
}

Components

All 27 components, importable from @aaroh/react-ui:

| Component | Import | | ------------ | ------------------------------------------------ | | Accordion | import { Accordion } from '@aaroh/react-ui' | | AI Chat | import { AI } from '@aaroh/react-ui' | | Animation | import { Animation } from '@aaroh/react-ui' | | Avatar | import { Avatar } from '@aaroh/react-ui' | | Badge | import { Badge } from '@aaroh/react-ui' | | Button | import { Button } from '@aaroh/react-ui' | | Card | import { Card } from '@aaroh/react-ui' | | Carousel | import { Carousel } from '@aaroh/react-ui' | | Checkbox | import { Checkbox } from '@aaroh/react-ui' | | Dashboard | import { Dashboard } from '@aaroh/react-ui' | | Drawer | import { Drawer } from '@aaroh/react-ui' | | DropdownMenu | import { DropdownMenu } from '@aaroh/react-ui' | | Ecommerce | import { Ecommerce } from '@aaroh/react-ui' | | Forms | import { Forms } from '@aaroh/react-ui' | | Input | import { Input } from '@aaroh/react-ui' | | Media | import { Media } from '@aaroh/react-ui' | | Modal | import { Modal } from '@aaroh/react-ui' | | Progress | import { Progress } from '@aaroh/react-ui' | | Radio | import { Radio } from '@aaroh/react-ui' | | Select | import { Select } from '@aaroh/react-ui' | | Skeleton | import { Skeleton } from '@aaroh/react-ui' | | Social | import { Social } from '@aaroh/react-ui' | | Switch | import { Switch } from '@aaroh/react-ui' | | Tabs | import { Tabs } from '@aaroh/react-ui' | | Textarea | import { Textarea } from '@aaroh/react-ui' | | Toast | import { Toast } from '@aaroh/react-ui' | | Tooltip | import { Tooltip } from '@aaroh/react-ui' |

Props Patterns

Components follow consistent prop conventions:

variant

Controls the visual style:

<Button variant="solid" />    {/* Filled background */}
<Button variant="outline" />  {/* Border only */}
<Button variant="ghost" />    {/* No background, no border */}
<Button variant="gradient" /> {/* Gradient fill */}

size

Controls dimensions and font size:

<Button size="xs" />
<Button size="sm" />
<Button size="md" />  {/* default */}
<Button size="lg" />
<Button size="xl" />

shape

Controls border radius:

<Button shape="pill" />     {/* Fully rounded */}
<Button shape="rounded" />  {/* Moderate rounding */}
<Button shape="square" />   {/* Sharp corners */}

color

Applies semantic color overrides:

<Button color="default" />     {/* Uses theme primary */}
<Button color="destructive" /> {/* Red/danger */}
<Button color="success" />     {/* Green/success */}
<Button color="warning" />     {/* Amber/warning */}

Accessibility

Every component ships with built-in accessibility:

• Keyboard navigation — all interactive components are keyboard-operable
• ARIA attributes — correct roles, states, and properties applied automatically
• Focus management — visible focus rings, proper tab order
• Screen reader support — labels, descriptions, and live regions where needed
• Reduced motion — respects prefers-reduced-motion by default
• Icon-only warnings — dev-mode console warnings when icon-only buttons lack ariaLabel

// Icon-only button — ariaLabel is required for accessibility
<Button icon={menuIcon} ariaLabel="Open menu" />

Theming

Switching themes is as simple as changing which CSS file you import:

// Heritage (dark, gold-accented)
import '@aaroh/ui/themes/heritage';

// Modern (light, clean)
import '@aaroh/ui/themes/modern';

// Minimal (subtle, neutral)
import '@aaroh/ui/themes/minimal';

For runtime theme switching, use the theme engine:

import { applyTheme, removeTheme, heritage, modern } from '@aaroh/ui';

function ThemeSwitcher() {
  const [handle, setHandle] = useState(null);

  const switchTo = (theme) => {
    if (handle) removeTheme(handle);
    setHandle(applyTheme(document.documentElement, theme));
  };

  return (
    <div>
      <Button onClick={() => switchTo(heritage)}>Heritage</Button>
      <Button onClick={() => switchTo(modern)}>Modern</Button>
    </div>
  );
}

Framework Compatibility

@aaroh/react-ui works with:

• React 18+ — hooks, concurrent features, Suspense
• Next.js — App Router & Pages Router, SSR-safe
• Remix — full SSR support
• Astro — with client:* directives for interactive islands
• Vite — zero-config, just import and use

All components use forwardRef for ref forwarding and accept standard HTML attributes via prop spreading.

TypeScript

Full type definitions ship with the package. No @types/* install needed.

import type { ButtonProps, InputProps, CardProps } from '@aaroh/react-ui';

// Props are fully typed with IntelliSense support
const config: ButtonProps = {
  variant: 'solid',
  size: 'md',
  shape: 'pill',
  color: 'default',
  loading: false,
};

Peer Dependencies

• react >= 18.0.0
• react-dom >= 18.0.0

License

MIT © Quilonix