Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ensui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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

ensui