Skip to main contentSkip to navigation

Components

PreviousNext

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

Browse through over 50 beautiful and responsive React components built with Radix UI and Tailwind CSS.

What's Included

All components are built using:

  • React - Components are built with React 18
  • TypeScript - Fully typed components with TypeScript
  • Radix UI - Low-level UI primitives for accessibility
  • Tailwind CSS - Utility-first CSS framework
  • CVA - Component variants for flexible styling

Component Categories

Layout

Fundamental layout components like Accordion, Card, and Tabs.

Forms

Form inputs, buttons, and validation components.

Data Display

Tables, lists, and data visualization components.

Feedback

Alerts, toasts, progress indicators, and loading states.

Navigation

Navigation menus, breadcrumbs, and pagination.

Overlays

Dialogs, sheets, popovers, and tooltips.

Getting Started

  1. Browse Components - Explore the components in the sidebar
  2. Preview - See live examples of each component
  3. Copy Code - Copy the component code to your clipboard
  4. Customize - Modify styles and behavior to match your needs

Installation

Components can be installed individually using the CLI:

npx @hanzo/ui@latest add button

Or copy and paste the code directly into your project.

Features

  • 🎨 Customizable - Easy to customize with CSS variables
  • 🌗 Dark Mode - All components support dark mode
  • ♿ Accessible - Built on Radix UI primitives
  • 📱 Responsive - Mobile-friendly and responsive
  • 🎯 TypeScript - Full TypeScript support
  • 🚀 Production Ready - Used by thousands of applications

Popular Components

Button

Displays a button or a component that looks like a button.

Card

Displays a card with header, content, and footer.

Dialog

A modal dialog that interrupts the user workflow.

Dropdown Menu

Displays a menu to the user triggered by a button.

Need Help?