npm package: @rathfi/ui
Description: A production-ready UI component library built with React, Radix UI, and Tailwind CSS
Author: @aniket965
Latest version: 0.0.21

# RathUI

A production-ready, accessible UI component library built with **React**, **Radix UI**, and **Tailwind CSS**.

## Features

- 🎨 Beautiful, customizable components with design tokens
- ♿ Fully accessible (WAI-ARIA compliant)
- 🎯 Built with Radix UI primitives
- 🔧 Tailwind CSS for styling
- 📦 Tree-shakeable ESM and CJS builds
- 💪 TypeScript support
- 🎭 Multiple variants for each component
- 🔌 Easy to integrate into any React or Next.js project

## Installation

```bash
npm install @rathfi/ui
# or
yarn add @rathfi/ui
# or
pnpm add @rathfi/ui
```

## Setup

### 1. Configure Tailwind CSS

Add the library to your `tailwind.config.js`:

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@rathfi/ui/dist/**/*.{js,mjs}',
  ],
  presets: [
    require('@rathfi/ui/tailwind.config')
  ],
}
```

### 2. Wrap with TooltipProvider (optional, for tooltips)

In your root layout or `_app.tsx`:

```tsx
import { TooltipProvider } from '@rathfi/ui';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <TooltipProvider>
          {children}
        </TooltipProvider>
      </body>
    </html>
  );
}
```

## Components

### Button

```tsx
import { Button } from '@rathfi/ui';

export default function Example() {
  return (
    <>
      <Button>Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="outline">Outline</Button>
      <Button size="sm">Small</Button>
      <Button size="lg">Large</Button>
    </>
  );
}
```

### Input

```tsx
import { Input } from '@rathfi/ui';

export default function Example() {
  return (
    <>
      <Input label="Email" type="email" placeholder="you@example.com" />
      <Input 
        label="Password" 
        type="password" 
        error="Password is required" 
      />
    </>
  );
}
```

### Dialog

```tsx
import { 
  Dialog, 
  DialogTrigger, 
  DialogContent, 
  DialogHeader, 
  DialogTitle,
  DialogDescription,
  Button 
} from '@rathfi/ui';

export default function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Dialog Title</DialogTitle>
          <DialogDescription>Dialog description goes here.</DialogDescription>
        </DialogHeader>
        {/* Content */}
      </DialogContent>
    </Dialog>
  );
}
```

### Dropdown Menu

```tsx
import { 
  DropdownMenu, 
  DropdownMenuTrigger, 
  DropdownMenuContent,
  DropdownMenuItem,
  Button 
} from '@rathfi/ui';

export default function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button>Open Menu</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Settings</DropdownMenuItem>
        <DropdownMenuItem>Logout</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
```

### Tooltip

```tsx
import { 
  Tooltip, 
  TooltipTrigger, 
  TooltipContent, 
  Button 
} from '@rathfi/ui';

export default function Example() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button>Hover me</Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>Tooltip content</p>
      </TooltipContent>
    </Tooltip>
  );
}
```

## Design Tokens

The library includes a comprehensive design system with:

### Colors
- **Primary**: Deep blue (#0038A8)
- **Secondary**: Light gray (#E5E7EB)
- **Accent**: Blue variations
- **Muted**: Subtle grays
- **Background**: Very light gray (#F9F9FB)
- **Foreground**: Near black (#0A0A0A)

### Typography
- Font family: Inter (geometric sans-serif)
- Size scale: xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl
- Weights: normal, medium, semibold, bold, extrabold

### Spacing & Radius
- Comprehensive spacing scale (0.5 to 32)
- Border radius: sm, md, lg, full
- Shadows: sm, default, md, lg, xl

## Development

```bash
# Install dependencies
npm install

# Run example app
npm run dev

# Build library
npm run build

# Prepare for publishing
npm run release
```

## License

MIT