zurto-ui

The official UI component library for Zurto

Modern React components with dark theme and glassmorphism effects

Documentation • GitHub • Discord

✨ Features

• 🎨 153 Components - Comprehensive library covering all UI needs across 11 categories
• 🌙 Dark Theme First - Beautiful dark theme with glassmorphism effects
• 📦 Tree-Shakable - Import only what you need (212KB ESM, 52KB gzipped)
• 🎯 TypeScript - Full type safety out of the box
• ♿ Accessible - WCAG 2.1 AA compliant with keyboard navigation
• 🎭 Customizable - Design tokens for easy theming
• ⚡ Fast - Optimized for performance with excellent bundle size
• 📱 Responsive - Mobile-first design approach
• 🧪 Auto-Preview System - Automatic documentation generation
• 📚 Documented - Full documentation with live examples at ui.zurto.app

📦 Installation

npm install zurto-ui
# or
yarn add zurto-ui
# or
pnpm add zurto-ui

🚀 Quick Start

1. Import the styles

// In your app entry point (e.g., main.tsx or App.tsx)
import "zurto-ui/dist/styles.css";

2. Use components

import { ZButton, ZCard, ZInput } from "zurto-ui";

function App() {
  return (
    <ZCard>
      <ZInput placeholder="Enter your email" />
      <ZButton variant="primary">Subscribe</ZButton>
    </ZCard>
  );
}

🎨 Components

Core UI (14 components)

| Component | Description | | ----------- | ----------------------------------------- | | ZButton | Buttons with multiple variants and states | | ZInput | Text inputs with icons and validation | | ZSelect | Single/multi select with search | | ZCheckbox | Checkbox with indeterminate state | | ZRadio | Radio buttons and groups | | ZSwitch | Toggle switches | | ZCard | Card containers with glass effect | | ZModal | Modal dialogs with focus trap | | ZTooltip | Tooltips with 12 placements | | ZBadge | Status badges and counters | | ZAvatar | User avatars with fallback | | ZSpinner | Loading spinners | | ZProgress | Linear progress bars | | ZProvider | Theme and context provider |

Layout (6 components)

| Component | Description | | ------------ | -------------------------- | | ZContainer | Max-width container | | ZBox | Polymorphic box component | | ZStack | Flex stack (VStack/HStack) | | ZGrid | CSS Grid wrapper | | ZDivider | Dividers with labels | | ZSplitPane | Resizable split panels |

Navigation (4 components)

| Component | Description | | ----------------- | --------------------- | | ZBreadcrumbs | Breadcrumb navigation | | ZTabs | Tabbed navigation | | ZPagination | Page navigation | | ZCommandPalette | Keyboard command menu |

Data Display (3 components)

| Component | Description | | ----------- | --------------------------- | | ZTable | Sortable, filterable tables | | ZList | Basic list component | | ZStatCard | Metric display cards |

Feedback (4 components)

| Component | Description | | ------------- | ------------------------ | | ZToast | Toast notifications | | ZAlert | Alert banners | | ZSkeleton | Loading skeletons | | ZEmptyState | Empty state placeholders |

Forms (6 components)

| Component | Description | | -------------- | --------------------- | | ZForm | Form with validation | | ZFieldGroup | Form field wrapper | | ZInlineEdit | Click-to-edit fields | | ZFileUpload | Drag & drop upload | | ZDatePicker | Date/time selection | | ZColorPicker | Color selection (HSB) |

Advanced (5 components)

| Component | Description | | -------------- | ----------------------- | | ZCodeEditor | Code editor with syntax | | ZTerminal | Terminal emulator | | ZCanvas | Drawing canvas | | ZChart | Charts (line, bar, pie) | | ZVirtualList | 10k+ item lists |

🎭 Theming

Design Tokens

All components use CSS custom properties (variables) for theming:

:root {
  /* Colors */
  --z-primary: #df3e53;
  --z-bg-primary: #0a0a0a;
  --z-text-primary: #ffffff;

  /* Spacing */
  --z-space-4: 16px;

  /* Border Radius */
  --z-radius-md: 8px;

  /* Shadows */
  --z-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}

Custom Theme

Override tokens in your CSS:

:root {
  --z-primary: #your-color;
  --z-bg-primary: #your-bg;
}

📚 Documentation

Full documentation available at ui.zurto.app

• Getting Started
• Components
• Theming
• Design Tokens
• Accessibility

🤝 Contributing

We welcome contributions! Please see our Contributing Guide.

📄 License

MIT © Zurto Team