@rathfi/ui

v0.0.21

Published

4 months ago

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

Downloads

0High
0Medium
0Low

aniket965

react components ui radix-ui tailwind tailwindcss design-system

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

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:

/** @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:

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

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

Components

Button

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

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

export default function Example() {
  return (
    <>
      <Input label="Email" type="email" placeholder="[email protected]" />
      <Input 
        label="Password" 
        type="password" 
        error="Password is required" 
      />
    </>
  );
}

Dialog

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

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

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

# Install dependencies
npm install

# Run example app
npm run dev

# Build library
npm run build

# Prepare for publishing
npm run release

License

MIT