npm package: @ishandpande/ui-lib-react
Description: React UI component library with 36+ components, TypeScript, Tailwind CSS, and comprehensive documentation. Part of multi-framework monorepo.
Author: Ishan Deshpande
Latest version: 2.0.3

# @ishandpande/ui-lib-react

> ✨ **Production-Grade UI Components** - Enterprise-ready React component library with TypeScript, Tailwind CSS, and comprehensive testing.

## 📦 Installation

```bash
npm install @ishandpande/ui-lib-react
```

## � Quick Start

```tsx
import React from 'react';
import { Button, Card, Alert } from '@ishandpande/ui-lib-react';
import '@ishandpande/ui-lib-react/dist/index.css';

function App() {
  return (
    <div className="p-8 space-y-4">
      <Alert variant="success" title="Welcome!" dismissible>
        UI Library v2.0 is ready for production use!
      </Alert>
      
      <Card variant="elevated" hoverable>
        <h1 className="text-xl font-semibold mb-4">Modern UI Components</h1>
        <div className="space-x-2">
          <Button variant="primary">Get Started</Button>
          <Button variant="outline">Learn More</Button>
        </div>
      </Card>
    </div>
  );
}
```

## ✨ Features

- 🎨 **38+ Components** - Complete UI component library
- 💪 **TypeScript** - Full type safety and IntelliSense
- 🎯 **Production Ready** - Enterprise-grade components with accessibility
- 🧪 **100% Test Coverage** - Comprehensive Jest + React Testing Library tests
- 📖 **Storybook** - Interactive component documentation
- 🎨 **Tailwind CSS** - Modern utility-first styling
- ♿ **Accessible** - ARIA compliance and keyboard navigation
- 🔄 **forwardRef** - Proper ref forwarding for all components

## 📚 Component Categories

### ✅ Feedback Components
- **Alert** - Info, success, warning, error states with dismissible option
- **Badge** - Status indicators with variants and sizes  
- **ProgressBar** - Progress indicators with value display
- **Spinner** - Loading indicators with size variants
- **Toast** - Notification system
- **SkeletonLoader** - Content placeholders

### ✅ Layout Components  
- **Card** - Container with header/footer, variants, and hover effects
- **Container** - Responsive content wrapper
- **Flex** - Flexible layout with gap, alignment, and direction controls
- **Grid** - CSS Grid layout system

### ✅ Interactive Components
- **Button** - Primary, secondary, outline, ghost, and link variants
- **Modal** - Overlay dialogs with portal rendering and focus management
- **Accordion** - Collapsible content sections
- **Tabs** - Tabbed interface with keyboard navigation
- **ToggleSwitch** - Modern switch component with accessibility
- **Tooltip** - Contextual information overlays

### ✅ Data Display
- **Text** - Typography system with semantic variants
- **Select** - Dropdown selection component
- **Breadcrumbs** - Navigation breadcrumbs
      <Input placeholder="Enter your name" />
      <Button variant="primary">Get Started</Button>
    </Card>
  );
}
```

## 📚 Documentation

- **API Reference**: [API.md](./API.md) - Complete component props and interfaces
- **Usage Examples**: [USAGE.md](./USAGE.md) - Practical examples and patterns  
- **Storybook**: Run `npm run storybook` for interactive docs

## 🏗️ Part of Multi-Framework Monorepo

This React package is part of a larger monorepo that will include:
- `@ishandpande/ui-lib-react` - React components (this package)
- `@ishandpande/ui-lib-angular` - Angular components (coming soon)
- `@ishandpande/ui-lib-vue` - Vue components (coming soon)

All packages share the same design tokens and component APIs for consistency across frameworks.

## 📄 License

MIT © Ishan Pande