@saurabhdaware/rids

React India Design System - A modern, accessible component library built with React, TypeScript, Tailwind CSS v4, and Radix UI.

Installation

npm install @saurabhdaware/rids
# or
pnpm add @saurabhdaware/rids
# or
yarn add @saurabhdaware/rids

Peer Dependencies

Make sure you have these installed in your project:

npm install react react-dom

Setup

Option 1: With Tailwind CSS (Recommended)

This is the recommended approach for optimal bundle size and customization.

1. Install Tailwind CSS v4

npm install tailwindcss @tailwindcss/vite

2. Configure Vite

// vite.config.ts
import tailwindcss from "@tailwindcss/vite";

export default {
  plugins: [
    tailwindcss(),
    // ... other plugins
  ],
};

3. Import Tailwind and RIDS base.css in your CSS

/* src/index.css */
@import "tailwindcss";
@import "@saurabhdaware/rids/base.css";

4. Configure Tailwind to scan the library

// tailwind.config.js
export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@saurabhdaware/rids/dist/**/*.{js,mjs}", // 👈 Scan RIDS components
  ],
};

5. Use the components

// Import from main entry (recommended for most use cases)
import { Button, Card, Input } from "@saurabhdaware/rids";

function App() {
  return (
    <Card>
      <Input placeholder="Enter text" />
      <Button variant="default">Click me</Button>
    </Card>
  );
}

Utilities

import { cn } from "@saurabhdaware/rids";

// Merge Tailwind classes intelligently
const className = cn("px-4 py-2", "bg-blue-500", userClassName);

Component Examples

Button

import { Button } from '@saurabhdaware/rids'

<Button variant="default">Default</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>

Input

import { Input, InputField, Label } from '@saurabhdaware/rids'

// With separate Label
<>
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="Enter email" />
</>

// Or use InputField (Label + Input combined)
<InputField
  label="Email"
  type="email"
  placeholder="Enter email"
/>

Card

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@saurabhdaware/rids";

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here</CardDescription>
  </CardHeader>
  <CardContent>Your content here</CardContent>
  <CardFooter>Footer content</CardFooter>
</Card>;

Import Strategies

Default Import (Recommended)

import { Button, Card, Input } from "@saurabhdaware/rids";

Use this for convenience. Modern bundlers will tree-shake unused components automatically.

Styling & Customization

All components accept a className prop for custom styling:

<Button className="my-custom-class">Custom Button</Button>

The library uses tailwind-merge internally, so your custom classes will properly override default ones.

Development

To work on this library locally:

# Install dependencies
pnpm install

# Run dev server (for testing components)
pnpm dev

# Build library
pnpm build

# Lint
pnpm lint

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.