ENSUI – Next-Gen React Component Library with TailwindCSS

A modern, accessible, and customizable React component library built with TailwindCSS. ENSUI provides a comprehensive set of UI components designed for modern web applications.

🚀 Features

• Modern Design: Clean, modern UI components with beautiful aesthetics
• TailwindCSS Integration: Built entirely with TailwindCSS for maximum customization
• Accessibility First: All components follow accessibility best practices
• TypeScript Ready: Full TypeScript support (coming soon)
• Responsive: Mobile-first responsive design
• Customizable: Easy to customize with TailwindCSS classes
• Production Ready: Battle-tested components for production use

📦 Installation

npm install

🛠️ Development

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

🎨 Component Groups

Step 1 – Buttons & Inputs

• Button - Primary, secondary, and variant button components
• IconButton - Icon-only buttons for actions
• TextInput - Standard text input fields
• PasswordInput - Secure password input with toggle
• Textarea - Multi-line text input
• Checkbox - Custom checkbox component
• Radio - Radio button groups
• Switch - Toggle switch component

Step 2 – Alerts & Badges

• Alert - Notification alerts with variants
• Toast - Toast notifications
• Badge - Status and count badges
• Notification - Rich notification component

Step 3 – Cards & Modals

• Card - Content container cards
• ProfileCard - User profile display cards
• Modal - Modal dialog component
• Dialog - Confirmation dialogs

Step 4 – Navigation & Menus

• Navbar - Top navigation bar
• Sidebar - Side navigation panel
• DropdownMenu - Dropdown menu component
• Tabs - Tab navigation
• Breadcrumbs - Navigation breadcrumbs

Step 5 – Tables & Lists

• Table - Data table component
• TableRow - Table row component
• TableCell - Table cell component
• List - List container
• ListItem - List item component
• Accordion - Collapsible content

Step 6 – Forms & Selectors

• Form - Form container with validation
• Select - Dropdown select component
• MultiSelect - Multi-selection dropdown
• DatePicker - Date selection component
• Slider - Range slider input

Step 7 – Utilities & Misc

• Avatar - User avatar component
• ProgressBar - Progress indicator
• Spinner - Loading spinner
• Tooltip - Hover tooltips
• Popover - Popover component
• Divider - Visual separator

🎯 Usage

import { Button, TextInput, Card } from './src/components';

function App() {
  return (
    <div className="p-8">
      <Card className="max-w-md">
        <h2 className="text-xl font-semibold mb-4">Login</h2>
        <TextInput 
          placeholder="Enter your email"
          className="mb-4"
        />
        <Button variant="primary" className="w-full">
          Sign In
        </Button>
      </Card>
    </div>
  );
}

🎨 Customization

ENSUI components are built with TailwindCSS, making them highly customizable. You can:

• Override default styles with TailwindCSS classes
• Use the provided color palette or create your own
• Modify component variants and sizes
• Add custom animations and transitions

📚 Documentation

Each component has detailed documentation in the docs/ folder, including:

• Component API reference
• Usage examples
• Props documentation
• Styling guidelines

🤝 Contributing

We welcome contributions! Please see our contributing guidelines for more information.

📄 License

MIT License - see LICENSE file for details.

Built with ❤️ using React and TailwindCSS