npm package: @shivenj/rids
Description: React India Design System - A modern, accessible component library built with React, TypeScript, Tailwind CSS v4, and Radix UI
Author: Saurabh Daware
Latest version: 0.0.5

# @saurabhdaware/rids

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

## Installation

```bash
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:

```bash
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

```bash
npm install tailwindcss @tailwindcss/vite
```

#### 2. Configure Vite

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

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

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

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

#### 4. Configure Tailwind to scan the library

```javascript
// 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

```tsx
// 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

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

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

## Component Examples

### Button

```tsx
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

```tsx
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

```tsx
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)

```tsx
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:

```tsx
<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:

```bash
# 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.