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:

   npm install

2. Run the development server:

   npm run dev

3. Open in browser: Navigate to 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

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

📦 Package Information

• Package: @imerit/[email protected]
• Registry: NPM
• Repository: GitHub

🔄 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