✨ Features

• 🎨 Beautiful Design - Minimalist, futuristic UI with neon emerald (#00FF9C) accents
• 🌙 Dark Mode First - Designed for dark mode with seamless light mode support
• ♿ Accessible - ARIA-compliant components built on Radix UI primitives
• 🎯 TypeScript - Full type safety out of the box
• 🌳 Tree-shakeable - Import only what you need
• ⚡ SSR Ready - Works with Next.js, Remix, and any SSR framework
• 🎭 Customizable - CSS variables and Tailwind plugin for easy theming
• 📦 23+ Components - Everything you need to build modern UIs

📦 Installation

npm install @flexireact/flexi-ui

pnpm add @flexireact/flexi-ui

yarn add @flexireact/flexi-ui

🚀 Quick Start

1. Configure Tailwind CSS

// tailwind.config.js
const { flexiUIPlugin } = require('@flexireact/flexi-ui/tailwind');

module.exports = {
  darkMode: 'class',
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@flexireact/flexi-ui/dist/**/*.js',
  ],
  plugins: [flexiUIPlugin],
};

2. Add Theme Provider

// app/layout.tsx or _app.tsx
import { ThemeProvider } from '@flexireact/flexi-ui';

export default function App({ children }) {
  return (
    <ThemeProvider defaultTheme="dark">
      {children}
    </ThemeProvider>
  );
}

3. Use Components

import { Button, Card, Input, Badge } from '@flexireact/flexi-ui';

export default function MyPage() {
  return (
    <Card>
      <h2>Welcome!</h2>
      <Input placeholder="Enter your email" />
      <Button variant="primary">Get Started</Button>
      <Badge variant="success">New</Badge>
    </Card>
  );
}

🧱 Components

Core

| Component | Description | |-----------|-------------| | Button | Versatile button with 6 variants | | Input | Text input with validation & icons | | Textarea | Multi-line text input | | Checkbox | Checkbox with label | | Switch | Toggle switch | | Select | Dropdown select |

Display

| Component | Description | |-----------|-------------| | Card | Content container with variants | | Badge | Status indicator badges | | Avatar | User avatar with fallback | | Tooltip | Hover tooltips |

Layout

| Component | Description | |-----------|-------------| | Stack | Flex layout helper | | HStack | Horizontal stack | | VStack | Vertical stack | | Center | Center content | | Separator | Visual divider |

Navigation

| Component | Description | |-----------|-------------| | Tabs | Tab navigation |

Feedback

| Component | Description | |-----------|-------------| | Alert | Alert messages | | Toast | Toast notifications | | Spinner | Loading spinner | | Skeleton | Loading placeholder | | Progress | Progress bar |

Data Display

| Component | Description | |-----------|-------------| | Table | Data table | | Accordion | Collapsible sections |

Overlay

| Component | Description | |-----------|-------------| | Modal | Dialog modal | | Drawer | Side panel | | Dropdown | Dropdown menu |

🎨 Theming

Design Tokens

import { colors, radius, shadows } from '@flexireact/flexi-ui';

// Primary: Neon Emerald
colors.primary[500] // '#00FF9C'

// Rounded corners
radius['2xl'] // '1.5rem'

// Glow effects
shadows.glow // '0 0 20px rgba(0, 255, 156, 0.3)'

Theme Toggle

import { useTheme, ThemeToggle } from '@flexireact/flexi-ui';

function Header() {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <header>
      <ThemeToggle />
    </header>
  );
}

📖 Examples

Button Variants

<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>
<Button variant="link">Link</Button>
<Button loading>Loading...</Button>

Input with Validation

<Input 
  label="Email"
  placeholder="[email protected]"
  error
  helperText="Invalid email address"
/>

Modal Dialog

<Modal>
  <ModalTrigger asChild>
    <Button>Open Modal</Button>
  </ModalTrigger>
  <ModalContent>
    <ModalHeader>
      <ModalTitle>Confirm Action</ModalTitle>
    </ModalHeader>
    <p>Are you sure you want to continue?</p>
    <ModalFooter>
      <ModalClose asChild>
        <Button variant="ghost">Cancel</Button>
      </ModalClose>
      <Button>Confirm</Button>
    </ModalFooter>
  </ModalContent>
</Modal>

Toast Notifications

import { useToast, ToastProvider } from '@flexireact/flexi-ui';

function App() {
  return (
    <ToastProvider>
      <MyComponent />
    </ToastProvider>
  );
}

function MyComponent() {
  const { toast } = useToast();
  
  return (
    <Button onClick={() => toast.success('Saved!', 'Your changes have been saved.')}>
      Save
    </Button>
  );
}

🪝 Hooks

import {
  useTheme,
  useToast,
  useToggle,
  useClickOutside,
  useMediaQuery,
  useDebounce,
  useLocalStorage,
  useCopyToClipboard,
} from '@flexireact/flexi-ui';

🛠️ CLI

# Initialize in your project
npx flexi-ui init

# Add specific components
npx flexi-ui add button card modal

# List available components
npx flexi-ui list

📄 License

MIT © FlexiReact Team