EZUI React Components

AI-optimized React component library with 40+ accessible, production-ready components.

🚀 Features

• 40 Components across 8 batches
• 87% Radix UI Coverage (24/27 primitives)
• 100% Accessible - WCAG 2.1 AA compliant
• TypeScript - Full type safety
• Tailwind CSS - Customizable theming
• Tree-shakeable - Import only what you need

📦 Installation

npm install @ezui/react-components

Peer Dependencies

npm install react react-dom

🎯 Quick Start

1. Import Styles

// In your main.tsx or App.tsx
import '@ezui/react-components/styles.css';

2. Use Components

import { EzButton, EzCard, EzInput, EzBadge } from '@ezui/react-components';

function App() {
  return (
    <EzCard title="Welcome to EZUI" variant="elevated">
      <EzInput placeholder="Enter your name" />
      <EzBadge variant="success">Active</EzBadge>
      <EzButton variant="primary">Get Started</EzButton>
    </EzCard>
  );
}

📚 Component Categories

Foundation (Batch 1)

• EzButton - Buttons with multiple variants
• EzInput - Text input fields
• EzCard - Container cards
• EzBadge - Status badges

Form Controls (Batch 2)

• EzCheckbox / EzCheckboxGroup
• EzRadio / EzRadioGroup
• EzSwitch - Toggle switches
• EzSelect - Dropdown selects
• EzTextarea - Multi-line text
• EzNumberInput - Numeric input
• EzSlider - Range sliders

Feedback & Overlays (Batch 3)

• EzDialog - Modal dialogs
• EzAlert - Alert messages
• EzToast - Toast notifications
• EzSpinner - Loading spinners
• EzProgressBar - Progress indicators
• EzTooltip - Hover tooltips

Navigation & Layout (Batch 4)

• EzTabs - Tabbed interfaces
• EzAccordion - Collapsible sections
• EzDivider - Visual separators
• EzBreadcrumb - Navigation breadcrumbs
• EzPagination - Page navigation
• EzMenu - Dropdown menus

Data & Advanced (Batch 5)

• EzGrid - Data tables
• EzForm - Form wrapper
• EzDatePicker - Date selection
• EzFileUpload - File uploads

Radix UI Overlays (Batch 6A)

• EzAvatar - User avatars
• EzPopover - Popover menus
• EzAlertDialog - Alert dialogs
• EzHoverCard - Hover cards
• EzContextMenu - Right-click menus
• EzLabel - Form labels

Navigation & Controls (Batch 6B)

• EzNavigationMenu - Navigation menus
• EzToggle / EzToggleGroup - Toggle buttons
• EzScrollArea - Custom scrollbars

Layout & Controls (Batch 6C)

• EzSidebar - Responsive sidebars
• EzToolbar - Toolbars with keyboard navigation

🎨 Tailwind Configuration

Add to your tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@ezui/react-components/dist/**/*.{js,jsx}"
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
        }
      },
      borderRadius: {
        'ezui': '0.5rem',
      },
      boxShadow: {
        'ezui': '0 1px 3px 0 rgb(0 0 0 / 0.1)',
        'ezui-md': '0 4px 6px -1px rgb(0 0 0 / 0.1)',
        'ezui-lg': '0 10px 15px -3px rgb(0 0 0 / 0.1)',
      }
    }
  }
}

📖 Documentation

• AI Usage Guide - Complete component API
• Publishing Guide - How to publish this library
• Dashboard Demo - Real-world example

🧪 Development

# Install dependencies
npm install

# Run demo app
npm run dev

# Build library
npm run build

# Type check
npm run type-check

📄 License

MIT © EZUI Team

🤝 Contributing

Contributions welcome! This library is designed to be AI-friendly with:

• Config-based props for easy AI generation
• Comprehensive TypeScript types
• Standardized component patterns
• Accessible by default

🌟 Examples

Dashboard with Sidebar

import { EzSidebar, EzCard, EzButton, EzAvatar } from '@ezui/react-components';

function Dashboard() {
  return (
    <div className="flex h-screen">
      <EzSidebar
        collapsible
        header={<h2>My App</h2>}
      >
        <nav>...</nav>
      </EzSidebar>
      
      <main className="flex-1 p-8">
        <EzCard title="Stats" variant="elevated">
          <p>Dashboard content</p>
        </EzCard>
      </main>
    </div>
  );
}

Form with Validation

import { EzForm, EzInput, EzButton, EzCheckbox } from '@ezui/react-components';

function SignupForm() {
  return (
    <EzForm onSubmit={handleSubmit}>
      <EzInput label="Email" type="email" required />
      <EzInput label="Password" type="password" required />
      <EzCheckbox label="I agree to terms" />
      <EzButton variant="primary" type="submit">
        Sign Up
      </EzButton>
    </EzForm>
  );
}

Built with ❤️ for AI-first development