Tucu UI

A modern React component library built with TypeScript and Tailwind CSS v4 — automatic layouts, macOS design systems (Sonoma & Tahoe), advanced routing (Standalone & MFE), form system, charts, 5000+ icons, blockchain components, and WCAG 2.1 AA compliance.

📚 Live Docs · NPM

Features

| Feature | Description | Docs | |---------|-------------|------| | 🎨 Layout System | Classic, Minimal, None, macOS Sonoma & Tahoe | Layout | | 🎭 Theming | 34+ color presets, dark/light, RTL, CSS vars | Theming Guide | | 📝 Forms | React Hook Form integration, validation, all input types | Form System | | 💻 macOS Sonoma | Translucent sidebar, toolbar, vibrancy effects | Sonoma | | 🪟 macOS Tahoe | Liquid Glass dock, frosted panels, 9 accent bundles | Tahoe | | 🧩 UI Components | 95+ components: modals, drawers, cards, tooltips… | Components | | ⌨️ Input Components | All form inputs with validation and accessibility | Inputs | | 📊 Charts | BarChart, LineChart, AreaChart, PieChart, Radar, Composed | Charts | | 🪙 Blockchain | DeFi, NFT, crypto wallet components | Blockchain | | 🎯 Icons | 5000+ Lucide + 97 custom (crypto, social, UI) | Icons | | 🌐 Routing | Standalone (auto-gen) & MFE (explicit) patterns | Routing | | ♿ Accessibility | WCAG 2.1 AA, ARIA, keyboard nav | A11y | | 🪝 Hooks & Utils | useTheme, useBreakpoint, and more | Hooks | | 🎨 Tailwind CSS v4 | All utilities pre-configured, zero extra setup | Tailwind | | 🤖 MCP Server | AI-agent integration via Model Context Protocol | MCP Server |

Installation

npm install @e-burgos/tucu-ui
# or
pnpm add @e-burgos/tucu-ui

In your main CSS file:

@import '@e-burgos/tucu-ui/styles';

Includes full Tailwind CSS v4 — no additional Tailwind setup required.

Quick Start

import { ThemeProvider, LucideIcons } from '@e-burgos/tucu-ui';

const menuItems = [
  {
    name: 'Dashboard',
    href: '/',
    icon: <LucideIcons.LayoutDashboard />,
    component: <Dashboard />,
  },
];

export default function App() {
  return (
    <ThemeProvider
      logo={{ name: 'My App' }}
      layout="minimal"
      brandColor="Blue"
      menuItems={menuItems}
      isAuthenticated={true}
    />
  );
}

→ Routing, navigation, theming and responsive layout are auto-generated.

For full API reference, patterns, and examples see the live documentation.

Tech Stack

React 19 · TypeScript · Tailwind CSS v4 · React Hook Form · Zustand · Framer Motion · Recharts · Lucide React · Swiper · Vitest

License

MIT © e-burgos