shadcn/app/content/docs/components.mdx

---
title: Components
description: 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

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
  <div className="rounded-lg border bg-card p-4">
    <h3 className="font-semibold">Layout</h3>
    <p className="text-sm text-muted-foreground">
      Fundamental layout components like Accordion, Card, and Tabs.
    </p>
  </div>
  <div className="rounded-lg border bg-card p-4">
    <h3 className="font-semibold">Forms</h3>
    <p className="text-sm text-muted-foreground">
      Form inputs, buttons, and validation components.
    </p>
  </div>
  <div className="rounded-lg border bg-card p-4">
    <h3 className="font-semibold">Data Display</h3>
    <p className="text-sm text-muted-foreground">
      Tables, lists, and data visualization components.
    </p>
  </div>
  <div className="rounded-lg border bg-card p-4">
    <h3 className="font-semibold">Feedback</h3>
    <p className="text-sm text-muted-foreground">
      Alerts, toasts, progress indicators, and loading states.
    </p>
  </div>
  <div className="rounded-lg border bg-card p-4">
    <h3 className="font-semibold">Navigation</h3>
    <p className="text-sm text-muted-foreground">
      Navigation menus, breadcrumbs, and pagination.
    </p>
  </div>
  <div className="rounded-lg border bg-card p-4">
    <h3 className="font-semibold">Overlays</h3>
    <p className="text-sm text-muted-foreground">
      Dialogs, sheets, popovers, and tooltips.
    </p>
  </div>
</div>

## 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:

```bash
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

<div className="grid gap-4 md:grid-cols-2">
  <a
    href="/docs/components/button"
    className="group flex items-center justify-between rounded-lg border p-4 hover:bg-accent"
  >
    <div>
      <h3 className="font-semibold">Button</h3>
      <p className="text-sm text-muted-foreground">
        Displays a button or a component that looks like a button.
      </p>
    </div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className="h-4 w-4 transition-transform group-hover:translate-x-1"
    >
      <path d="m9 18 6-6-6-6" />
    </svg>
  </a>
  <a
    href="/docs/components/card"
    className="group flex items-center justify-between rounded-lg border p-4 hover:bg-accent"
  >
    <div>
      <h3 className="font-semibold">Card</h3>
      <p className="text-sm text-muted-foreground">
        Displays a card with header, content, and footer.
      </p>
    </div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className="h-4 w-4 transition-transform group-hover:translate-x-1"
    >
      <path d="m9 18 6-6-6-6" />
    </svg>
  </a>
  <a
    href="/docs/components/dialog"
    className="group flex items-center justify-between rounded-lg border p-4 hover:bg-accent"
  >
    <div>
      <h3 className="font-semibold">Dialog</h3>
      <p className="text-sm text-muted-foreground">
        A modal dialog that interrupts the user workflow.
      </p>
    </div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className="h-4 w-4 transition-transform group-hover:translate-x-1"
    >
      <path d="m9 18 6-6-6-6" />
    </svg>
  </a>
  <a
    href="/docs/components/dropdown-menu"
    className="group flex items-center justify-between rounded-lg border p-4 hover:bg-accent"
  >
    <div>
      <h3 className="font-semibold">Dropdown Menu</h3>
      <p className="text-sm text-muted-foreground">
        Displays a menu to the user triggered by a button.
      </p>
    </div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className="h-4 w-4 transition-transform group-hover:translate-x-1"
    >
      <path d="m9 18 6-6-6-6" />
    </svg>
  </a>
</div>

## Need Help?

- Check out the [Installation Guide](/docs/installation)
- Read about [Theming](/docs/theming)
- Learn about [Dark Mode](/docs/dark-mode)
- Use the [CLI](/docs/cli) for quick setup