npm package: @imerit/imerit-ui
Description: iMerit's centralized UI component library with consistent branding and layout system
Author: iMerit
Latest version: 0.2.0

# iMerit UI Next.js Demo

This is a comprehensive demonstration of the `@imerit/imerit-ui` component library using Next.js.

## 🚀 Getting Started

1. **Install dependencies:**
   ```bash
   npm install
   ```

2. **Run the development server:**
   ```bash
   npm run dev
   ```

3. **Open in browser:**
   Navigate to [http://localhost:3000](http://localhost:3000) to see the demo.

## 🧩 Components Showcased

This demo includes all 23 components from the iMerit UI library:

### Layout & Navigation
- ✅ **Layout** - Main page layout with responsive design
- ✅ **NavBar** - Top navigation with logo and menu items
- ✅ **Sidebar** - Collapsible sidebar with navigation groups
- ✅ **Breadcrumb** - Hierarchical navigation

### Authentication
- ✅ **AuthSection** - Complete authentication flow
- ✅ **LoginButton** - Styled login button
- ✅ **UserAvatar** - User profile avatars with initials fallback

### Forms
- ✅ **Button** - 5 variants (primary, secondary, outline, ghost, danger)
- ✅ **Input** - Text inputs with validation
- ✅ **Select** - Dropdown selections
- ✅ **TextArea** - Multi-line text input
- ✅ **Checkbox** - Custom styled checkboxes
- ✅ **Radio** - Custom styled radio buttons
- ✅ **FormLabel** - Consistent form labels

### Data Display
- ✅ **Table** - Responsive data tables with sorting
- ✅ **Card** - Content containers with header/body/footer
- ✅ **Badge** - Status and category indicators

### Feedback
- ✅ **Alert** - 4 variants (info, success, warning, error)
- ✅ **Modal** - Dialog overlays with focus management
- ✅ **Spinner** - Loading indicators

## 🎨 Features Demonstrated

### iMerit Branding
- Consistent red color theme throughout
- Professional typography and spacing
- Brand-compliant component styling

### Responsive Design
- Mobile-first approach
- Adaptive layouts for all screen sizes
- Touch-friendly interactions

### Accessibility
- ARIA attributes and labels
- Keyboard navigation support
- Focus management in modals
- Screen reader compatibility

### Interactive Examples
- Working form submissions
- Sortable data tables
- Modal interactions
- Sidebar navigation
- User authentication flow

## 🛠️ Technical Implementation

### Next.js Integration
- Server-side rendering compatible
- Optimized performance
- Code splitting and lazy loading

### Styling
- Tailwind CSS integration
- Custom iMerit color palette
- Responsive utilities

### Package Usage
```jsx
import {
  Layout,
  NavBar,
  Button,
  Card,
  Alert,
  // ... all other components
} from '@imerit/imerit-ui';
```

## 📦 Package Information

- **Package**: `@imerit/imerit-ui@0.1.1`
- **Registry**: [NPM](https://www.npmjs.com/package/@imerit/imerit-ui)
- **Repository**: [GitHub](https://github.com/imerit-io/imerit-ui)

## 🔄 Live Updates

This demo uses the published NPM package, so any updates to the component library will be reflected when you update the package version.

## 📱 Mobile Experience

The demo is fully responsive and provides an excellent mobile experience:
- Collapsible sidebar navigation
- Touch-friendly controls
- Optimized layouts for small screens
- Fast loading and smooth interactions

## 🚀 Production Ready

This example demonstrates how to use iMerit UI in a production Next.js application:
- Proper SSR implementation
- Optimized bundle sizes
- Accessibility compliance
- Performance best practices