# DesignRevision — Full Component Source

> Every published component's full source, install command, and examples, concatenated for single-request ingestion. Index: https://designrevision.com/llms.txt

---

# Shadcn Accordion

> Free shadcn/ui accordion component for React — Radix-powered collapsible sections. The FAQ accordion, multiple-open, leading icons, contained cards, a plus/minus toggle, and controlled state. The examples official shadcn never shipped.

Source: https://designrevision.com/components/accordion

The **Shadcn Accordion** is the collapsible-sections component — the canonical <a href="https://ui.shadcn.com/docs/components/accordion" rel="nofollow">shadcn/ui</a> accordion built on <a href="https://www.radix-ui.com/primitives/docs/components/accordion" rel="nofollow">Radix</a>. Its number-one job is the **FAQ**, and the examples below cover that plus multiple-open, icons, a contained-card style, a plus/minus toggle, and controlled state.

## Built on Radix

Accordion is a thin wrapper over <a href="https://www.radix-ui.com/primitives/docs/components/accordion" rel="nofollow">Radix Accordion</a> with four parts — `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`. Radix handles the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/accordion/" rel="nofollow">WAI-ARIA accordion pattern</a>: keyboard navigation, focus, and the `--radix-accordion-content-height` measurement that drives the open/close animation. The chevron rotates on open via `[&[data-state=open]>svg]:rotate-180`.

## The FAQ accordion

The most common accordion is the **FAQ** — questions as triggers, answers as content, `type="single" collapsible` so one opens at a time and can close again:

```tsx
<Accordion type="single" collapsible>
  <AccordionItem value="refunds">
    <AccordionTrigger>What is your refund policy?</AccordionTrigger>
    <AccordionContent>30-day money-back guarantee…</AccordionContent>
  </AccordionItem>
</Accordion>
```

For search, pair it with **FAQPage structured data** (JSON-LD) so the Q&A can surface as rich results — this gallery emits that schema on every component page. The FAQ example is the markup.

## Single vs multiple

`type="single"` opens one item at a time (add `collapsible` to allow closing it); `type="multiple"` lets several stay open and makes `value` an **array**. Use single for FAQs where focus matters, multiple for reference content the user scans across (the Multiple open example).

## Styling

The default is flush rows with a bottom border. Restyle with classNames — no custom component:

- **Leading icons** — put an icon before the label inside `AccordionTrigger` (the Leading icons example).
- **Contained cards** — give `AccordionItem` `rounded-lg border px-4` and the `Accordion` `space-y-2` for separated cards (the Contained / card example).
- **Plus / minus** — compose `AccordionPrimitive.Trigger` directly and toggle a `PlusIcon` / `MinusIcon` with `group-data-[state]` (the Plus / minus example).

## Controlled & disabled

Use `defaultValue` for an uncontrolled start, or `value` + `onValueChange` to **control** which item is open from elsewhere (a stepper, a URL). Disable an item with the `disabled` prop on `AccordionItem`. The Controlled & disabled example drives the accordion from external buttons and disables one step.

## Animation

The expand/collapse uses the `accordion-down` and `accordion-up` keyframes, which animate to Radix's `--radix-accordion-content-height`. **These aren't core Tailwind** — they come from `tw-animate-css` (or `tailwindcss-animate`). Add `@import "tw-animate-css";` to your global CSS, or the panel snaps open with no transition.

## Tabs vs Accordion

Use an Accordion for **stacked, vertical** sections where several may be open — FAQs, settings, long forms — especially on narrow screens. Use [Tabs](/components/tabs) for **peer** sections shown one at a time in a fixed area. Accordions expand downward; tabs switch in place.

## Accessibility & theming

Radix gives the accordion full keyboard support — Enter/Space toggles, arrow keys move between triggers, Home/End jump to the ends — and wires the trigger to its panel with `aria-controls`. It reads your design tokens — `--border`, `--ring` (focus), `--muted-foreground` (the chevron) — so it follows your theme, including dark mode, with no overrides.

## Installation

### accordion

**Install:**

```bash
npx shadcn@latest add @designrevision/accordion
```

**Dependencies:** @radix-ui/react-accordion, utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| type * | "single" \| "multiple" | — | On Accordion. "single" opens one item at a time; "multiple" allows several. |
| collapsible | boolean | false | On Accordion (type="single") — lets the open item close again. |
| value / defaultValue | string \| string[] | — | The open item(s) — controlled (value + onValueChange) or uncontrolled (defaultValue). |
| disabled | boolean | false | On AccordionItem — prevents it from opening. |

`*` required.

**Usage & accessibility:** A Radix accordion — four parts (Accordion, AccordionItem, AccordionTrigger, AccordionContent), with a chevron that rotates on open. Set type="single" collapsible for an FAQ, or type="multiple" to allow several open. The open/close animation uses the accordion-down / accordion-up keyframes from tw-animate-css (or tailwindcss-animate) — without it the panel snaps open.

```tsx
// components/ui/accordion.tsx
"use client"

import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDownIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function Accordion({
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
}

function AccordionItem({
  className,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
  return (
    <AccordionPrimitive.Item
      data-slot="accordion-item"
      className={cn("border-b last:border-b-0", className)}
      {...props}
    />
  )
}

function AccordionTrigger({
  className,
  children,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
  return (
    <AccordionPrimitive.Header className="flex">
      <AccordionPrimitive.Trigger
        data-slot="accordion-trigger"
        className={cn(
          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
          className
        )}
        {...props}
      >
        {children}
        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
      </AccordionPrimitive.Trigger>
    </AccordionPrimitive.Header>
  )
}

function AccordionContent({
  className,
  children,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
  return (
    <AccordionPrimitive.Content
      data-slot="accordion-content"
      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
      {...props}
    >
      <div className={cn("pt-0 pb-4", className)}>{children}</div>
    </AccordionPrimitive.Content>
  )
}

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
```

## Examples

### Accordion

The canonical single-open, collapsible accordion — one item expanded at a time.

**Install:**

```bash
npx shadcn@latest add @designrevision/accordion-demo-01
```

**Dependencies:** @designrevision/accordion

```tsx
// components/ui/accordion-demo-01.tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

export default function AccordionDemo01() {
  return (
    <Accordion
      type="single"
      collapsible
      defaultValue="item-1"
      className="w-[420px]"
    >
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern and is fully keyboard
          navigable.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>
          Yes. It comes with default styles that match your design tokens, and
          you can override them with a className.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>
          Yes. It animates open and closed with the accordion-down /
          accordion-up keyframes.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}
```

---

### FAQ

A frequently-asked-questions accordion — the most common use, and a natural pair for **FAQPage** schema.

**Install:**

```bash
npx shadcn@latest add @designrevision/accordion-faq-01
```

**Dependencies:** @designrevision/accordion

```tsx
// components/ui/accordion-faq-01.tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const faqs = [
  {
    q: "What is your refund policy?",
    a: "We offer a 30-day money-back guarantee — no questions asked. Email support and we'll process it within 48 hours.",
  },
  {
    q: "Can I change my plan later?",
    a: "Yes. Upgrade or downgrade at any time from your billing settings; changes are prorated automatically.",
  },
  {
    q: "Do you offer a free trial?",
    a: "Every paid plan includes a 14-day free trial. No credit card required to start.",
  },
  {
    q: "How do I cancel my subscription?",
    a: "Cancel anytime from Settings → Billing. Your plan stays active until the end of the current period.",
  },
]

export default function AccordionFaq01() {
  return (
    <Accordion type="single" collapsible className="w-[480px]">
      {faqs.map((faq, index) => (
        <AccordionItem key={index} value={`faq-${index}`}>
          <AccordionTrigger>{faq.q}</AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            {faq.a}
          </AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}
```

---

### Multiple open

`type="multiple"` lets several sections stay open at once, with two open by default.

**Install:**

```bash
npx shadcn@latest add @designrevision/accordion-multiple-01
```

**Dependencies:** @designrevision/accordion

```tsx
// components/ui/accordion-multiple-01.tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const sections = [
  { value: "shipping", title: "Shipping", body: "Free standard shipping on orders over $50. Express options at checkout." },
  { value: "returns", title: "Returns", body: "Return unworn items within 30 days for a full refund." },
  { value: "warranty", title: "Warranty", body: "All products carry a two-year limited warranty against defects." },
]

export default function AccordionMultiple01() {
  return (
    <Accordion
      type="multiple"
      defaultValue={["shipping", "returns"]}
      className="w-[460px]"
    >
      {sections.map((section) => (
        <AccordionItem key={section.value} value={section.value}>
          <AccordionTrigger>{section.title}</AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            {section.body}
          </AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}
```

---

### Leading icons

An icon before each trigger label — the help-center category pattern.

**Install:**

```bash
npx shadcn@latest add @designrevision/accordion-icons-01
```

**Dependencies:** lucide-react, @designrevision/accordion

```tsx
// components/ui/accordion-icons-01.tsx
import { CreditCardIcon, ShieldCheckIcon, TruckIcon } from "lucide-react"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const items = [
  { value: "shipping", icon: TruckIcon, title: "Shipping & delivery", body: "Orders ship within 1–2 business days with tracked delivery." },
  { value: "payment", icon: CreditCardIcon, title: "Payment methods", body: "We accept all major cards, Apple Pay, and PayPal." },
  { value: "security", icon: ShieldCheckIcon, title: "Security", body: "Every transaction is protected with 256-bit encryption." },
]

export default function AccordionIcons01() {
  return (
    <Accordion type="single" collapsible className="w-[460px]">
      {items.map((item) => (
        <AccordionItem key={item.value} value={item.value}>
          <AccordionTrigger>
            <span className="flex items-center gap-3">
              <item.icon className="text-muted-foreground size-4 shrink-0" />
              {item.title}
            </span>
          </AccordionTrigger>
          <AccordionContent className="text-muted-foreground pl-7">
            {item.body}
          </AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}
```

---

### Contained / card

Each item wrapped as a bordered card with spacing between, instead of the default flush rows.

**Install:**

```bash
npx shadcn@latest add @designrevision/accordion-card-01
```

**Dependencies:** @designrevision/accordion

```tsx
// components/ui/accordion-card-01.tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const items = [
  { value: "a", title: "Getting started", body: "Install the CLI and run the init command to scaffold your project." },
  { value: "b", title: "Configuration", body: "Edit the config file to set your theme tokens and import aliases." },
  { value: "c", title: "Deployment", body: "Push to your provider and connect the repo — builds run automatically." },
]

export default function AccordionCard01() {
  return (
    <Accordion type="single" collapsible className="w-[460px] space-y-2">
      {items.map((item) => (
        <AccordionItem
          key={item.value}
          value={item.value}
          className="bg-card rounded-lg border px-4 last:border-b"
        >
          <AccordionTrigger className="hover:no-underline">
            {item.title}
          </AccordionTrigger>
          <AccordionContent className="text-muted-foreground">
            {item.body}
          </AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}
```

---

### Plus / minus icon

A custom trigger that swaps the default chevron for a plus/minus that toggles via `group-data-[state]`.

**Install:**

```bash
npx shadcn@latest add @designrevision/accordion-plus-01
```

**Dependencies:** @radix-ui/react-accordion, lucide-react, @designrevision/accordion

```tsx
// components/ui/accordion-plus-01.tsx
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { MinusIcon, PlusIcon } from "lucide-react"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
} from "@/components/ui/accordion"

const items = [
  { value: "a", title: "Can I use this in a commercial project?", body: "Yes — it's free to use in personal and commercial projects." },
  { value: "b", title: "Do I need to credit you?", body: "No attribution is required, though it's always appreciated." },
  { value: "c", title: "Will there be updates?", body: "Yes. New components and examples ship regularly." },
]

export default function AccordionPlus01() {
  return (
    <Accordion type="single" collapsible className="w-[480px]">
      {items.map((item) => (
        <AccordionItem key={item.value} value={item.value}>
          <AccordionPrimitive.Header className="flex">
            {/* Custom trigger: swap the default chevron for a +/- toggle. */}
            <AccordionPrimitive.Trigger className="group focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium outline-none focus-visible:ring-[3px]">
              {item.title}
              <PlusIcon className="text-muted-foreground size-4 shrink-0 group-data-[state=open]:hidden" />
              <MinusIcon className="text-muted-foreground size-4 shrink-0 group-data-[state=closed]:hidden" />
            </AccordionPrimitive.Trigger>
          </AccordionPrimitive.Header>
          <AccordionContent className="text-muted-foreground">
            {item.body}
          </AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}
```

---

### Controlled & disabled

Drive the open item from external buttons via `value` / `onValueChange`, with one disabled step.

**Install:**

```bash
npx shadcn@latest add @designrevision/accordion-controlled-01
```

**Dependencies:** @designrevision/accordion, button

```tsx
// components/ui/accordion-controlled-01.tsx
"use client"

import * as React from "react"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import { Button } from "@/components/ui/button"

const steps = [
  { value: "account", title: "Account", body: "Create your account and verify your email address." },
  { value: "profile", title: "Profile", body: "Add your name and a profile photo." },
  { value: "billing", title: "Billing", body: "Add a payment method — available once your profile is complete.", disabled: true },
]

export default function AccordionControlled01() {
  const [value, setValue] = React.useState("account")

  return (
    <div className="grid w-[460px] gap-3">
      <div className="flex items-center gap-2">
        {steps.map((step) => (
          <Button
            key={step.value}
            variant={value === step.value ? "default" : "outline"}
            size="sm"
            disabled={step.disabled}
            onClick={() => setValue(step.value)}
          >
            {step.title}
          </Button>
        ))}
      </div>
      <Accordion type="single" collapsible value={value} onValueChange={setValue}>
        {steps.map((step) => (
          <AccordionItem
            key={step.value}
            value={step.value}
            disabled={step.disabled}
          >
            <AccordionTrigger>{step.title}</AccordionTrigger>
            <AccordionContent className="text-muted-foreground">
              {step.body}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  )
}
```

---

# Shadcn Alert

> Free shadcn/ui alert component for React — an inline message banner with an icon, title, and description. Default and destructive variants plus success/warning/info, actions, dismissible, and a full-width banner.

Source: https://designrevision.com/components/alert

The **Shadcn Alert** is an **inline message banner** — a bordered box with an optional icon, a title, and a description that surfaces a status or notice in the page flow. It ships **default** and **destructive** variants, lays out its icon automatically, and restyles easily for success, warning, and info. The examples below cover variants, icons, actions, a dismissible alert, and a full-width banner.

## Alert vs Alert Dialog

These are two different components — don't mix them up:

- **Alert** (this page) — an **inline** message that lives in the layout. A banner, a form-error summary, a notice.
- **[Alert Dialog](/components/alert-dialog)** — a **modal** that interrupts the user to confirm or cancel a destructive action.

If you want a message *in* the page, use Alert. If you need a blocking confirm, use Alert Dialog.

## Anatomy

Three parts, composed:

```tsx
<Alert>
  <TerminalIcon />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the CLI.
  </AlertDescription>
</Alert>
```

Drop a Lucide icon as the **first child** and the component's CSS grid detects it (`has-[>svg]`) and creates an icon column automatically. With no icon, that column collapses and the content spans the full width.

## Variants

Two are built in:

```tsx
<Alert variant="destructive">
  <CircleAlertIcon />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Your session has expired.</AlertDescription>
</Alert>
```

For **success / warning / info**, override the border, text, and icon color with a `className` (the Success / warning / info example shows green, amber, and blue). If you use them often, add them to the `cva` variants so `variant="success"` works directly.

## Actions and dismissing

- **Actions** — add buttons under the content (aligned to the text column with `col-start-2`) for "Update now / Later" style notices.
- **Dismissible** — track an open state and render a corner close button (the Dismissible example uses `useState`). For transient, stacking notifications instead, reach for a **[toast](/components/sonner)** (Sonner).

## Announcement banner

For a high-emphasis, full-width bar, give the Alert a colored background and an inline link — the Announcement banner example uses `bg-primary text-primary-foreground` for a promo or notice at the top of a page.

## Accessibility

The Alert sets `role="alert"`, so assistive tech announces its content as it appears — right for important, time-sensitive messages. For routine notices you can soften the urgency (e.g. `role="status"`). Keep the meaning in the title and description; decorative icons are not announced.

## Installation

### alert

**Install:**

```bash
npx shadcn@latest add @designrevision/alert
```

**Dependencies:** utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| variant | "default" \| "destructive" | "default" | Visual style. default for neutral messages, destructive for errors. |

**Usage & accessibility:** An inline alert (a message banner) — distinct from Alert Dialog (the modal). Compose <Alert> with <AlertTitle> and <AlertDescription>; drop a Lucide icon as the first child and the CSS grid lays it out automatically. variant is "default" or "destructive" (extend the cva for success/warning/info). It carries role="alert" so screen readers announce it.

```tsx
// components/ui/alert.tsx
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const alertVariants = cva(
  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
  {
    variants: {
      variant: {
        default: "bg-card text-card-foreground",
        destructive:
          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

function Alert({
  className,
  variant,
  ...props
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
  return (
    <div
      data-slot="alert"
      role="alert"
      className={cn(alertVariants({ variant }), className)}
      {...props}
    />
  )
}

function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-title"
      className={cn(
        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
        className
      )}
      {...props}
    />
  )
}

function AlertDescription({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-description"
      className={cn(
        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
        className
      )}
      {...props}
    />
  )
}

export { Alert, AlertTitle, AlertDescription }
```

## Examples

### Default & destructive

The canonical alert — icon, title, and description in the two built-in variants.

**Install:**

```bash
npx shadcn@latest add @designrevision/alert-demo-01
```

**Dependencies:** lucide-react, alert

```tsx
// components/ui/alert-demo-01.tsx
import { CircleAlertIcon, TerminalIcon } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

export default function AlertDemo01() {
  return (
    <div className="w-full max-w-md space-y-4">
      <Alert>
        <TerminalIcon />
        <AlertTitle>Heads up!</AlertTitle>
        <AlertDescription>
          You can add components to your app using the CLI.
        </AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <CircleAlertIcon />
        <AlertTitle>Error</AlertTitle>
        <AlertDescription>
          Your session has expired. Please log in again.
        </AlertDescription>
      </Alert>
    </div>
  )
}
```

---

### Success / warning / info

Extra status colors built by overriding the border, text, and icon color.

**Install:**

```bash
npx shadcn@latest add @designrevision/alert-variants-01
```

**Dependencies:** lucide-react, alert

```tsx
// components/ui/alert-variants-01.tsx
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

export default function AlertVariants01() {
  return (
    <div className="w-full max-w-md space-y-4">
      <Alert className="border-green-500/50 text-green-700 dark:text-green-400 [&>svg]:text-green-600">
        <CircleCheckIcon />
        <AlertTitle>Success</AlertTitle>
        <AlertDescription className="text-green-700/80 dark:text-green-400/80">
          Your changes have been saved.
        </AlertDescription>
      </Alert>
      <Alert className="border-amber-500/50 text-amber-700 dark:text-amber-400 [&>svg]:text-amber-600">
        <TriangleAlertIcon />
        <AlertTitle>Warning</AlertTitle>
        <AlertDescription className="text-amber-700/80 dark:text-amber-400/80">
          Your trial ends in 3 days.
        </AlertDescription>
      </Alert>
      <Alert className="border-blue-500/50 text-blue-700 dark:text-blue-400 [&>svg]:text-blue-600">
        <InfoIcon />
        <AlertTitle>Information</AlertTitle>
        <AlertDescription className="text-blue-700/80 dark:text-blue-400/80">
          A new version is available.
        </AlertDescription>
      </Alert>
    </div>
  )
}
```

---

### Title-only & description-only

Minimal alerts — the icon column collapses automatically when there's no icon.

**Install:**

```bash
npx shadcn@latest add @designrevision/alert-simple-01
```

**Dependencies:** lucide-react, alert

```tsx
// components/ui/alert-simple-01.tsx
import { CheckIcon } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

export default function AlertSimple01() {
  return (
    <div className="w-full max-w-md space-y-4">
      {/* Title only, with an icon */}
      <Alert>
        <CheckIcon />
        <AlertTitle>Your changes have been saved.</AlertTitle>
      </Alert>
      {/* Description only, no icon — the grid collapses the icon column */}
      <Alert>
        <AlertDescription>
          We use cookies to improve your experience.
        </AlertDescription>
      </Alert>
    </div>
  )
}
```

---

### With actions

Trailing action buttons aligned under the content — the update/notice pattern.

**Install:**

```bash
npx shadcn@latest add @designrevision/alert-action-01
```

**Dependencies:** lucide-react, alert, button

```tsx
// components/ui/alert-action-01.tsx
import { RocketIcon } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"

export default function AlertAction01() {
  return (
    <Alert className="w-full max-w-md">
      <RocketIcon />
      <AlertTitle>Update available</AlertTitle>
      <AlertDescription>
        A new version is ready to install.
      </AlertDescription>
      <div className="col-start-2 mt-2 flex gap-2">
        <Button size="sm">Update now</Button>
        <Button size="sm" variant="ghost">
          Later
        </Button>
      </div>
    </Alert>
  )
}
```

---

### Dismissible

A closable alert — an X button toggles it with `useState`.

**Install:**

```bash
npx shadcn@latest add @designrevision/alert-dismissible-01
```

**Dependencies:** lucide-react, alert, button

```tsx
// components/ui/alert-dismissible-01.tsx
"use client"

import * as React from "react"
import { InfoIcon, XIcon } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"

export default function AlertDismissible01() {
  const [open, setOpen] = React.useState(true)

  if (!open) {
    return (
      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
        Show alert
      </Button>
    )
  }

  return (
    <Alert className="relative w-full max-w-md pr-12">
      <InfoIcon />
      <AlertTitle>New feature</AlertTitle>
      <AlertDescription>
        Dark mode is now available in settings.
      </AlertDescription>
      <Button
        variant="ghost"
        size="icon"
        className="absolute top-2 right-2 size-7"
        onClick={() => setOpen(false)}
      >
        <XIcon />
        <span className="sr-only">Dismiss</span>
      </Button>
    </Alert>
  )
}
```

---

### Announcement banner

A full-width, high-emphasis banner — a colored Alert with an inline link.

**Install:**

```bash
npx shadcn@latest add @designrevision/alert-banner-01
```

**Dependencies:** lucide-react, alert

```tsx
// components/ui/alert-banner-01.tsx
import { MegaphoneIcon } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

export default function AlertBanner01() {
  return (
    <Alert className="bg-primary text-primary-foreground border-primary w-full [&>svg]:text-current">
      <MegaphoneIcon />
      <AlertTitle>Black Friday — 50% off all plans</AlertTitle>
      <AlertDescription className="text-primary-foreground/90">
        Offer ends Monday.{" "}
        <a href="#" className="font-medium underline underline-offset-2">
          Claim it now
        </a>
        .
      </AlertDescription>
    </Alert>
  )
}
```

---

### With a list

A destructive alert whose description holds a bulleted list — a form-error summary.

**Install:**

```bash
npx shadcn@latest add @designrevision/alert-list-01
```

**Dependencies:** lucide-react, alert

```tsx
// components/ui/alert-list-01.tsx
import { CircleAlertIcon } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

export default function AlertList01() {
  return (
    <Alert variant="destructive" className="w-full max-w-md">
      <CircleAlertIcon />
      <AlertTitle>Unable to submit your form</AlertTitle>
      <AlertDescription>
        <ul className="list-inside list-disc text-sm">
          <li>Email is required</li>
          <li>Password must be at least 8 characters</li>
          <li>You must accept the terms</li>
        </ul>
      </AlertDescription>
    </Alert>
  )
}
```

---

# Shadcn Alert Dialog

> Free shadcn/ui alert dialog component for React — destructive confirmations, async actions with a spinner, type-to-confirm, and controlled open. The examples official shadcn never shipped.

Source: https://designrevision.com/components/alert-dialog

The **Shadcn Alert Dialog** is the interrupting confirmation — the canonical <a href="https://ui.shadcn.com/docs/components/alert-dialog" rel="nofollow">shadcn/ui</a> alert dialog built on <a href="https://www.radix-ui.com/primitives/docs/components/alert-dialog" rel="nofollow">Radix</a>, with `AlertDialogAction` and `AlertDialogCancel` pre-styled from your `buttonVariants`. Official ships it with **zero examples**; the ones below cover what you actually need — destructive deletes, async actions, and type-to-confirm guards.

## When to use — Alert Dialog vs Dialog

Use an **Alert Dialog** when an action needs a deliberate yes/no and shouldn't be dismissed by accident — **delete, discard, sign out, revoke**. It has **no close X**, doesn't close on an outside click, and is announced as an alert. Use a [Dialog](/components/dialog) for general modal content (forms, details) — it has a close X and dismisses on outside-click and Escape. If you find yourself wanting an alert dialog to close on outside click, you want a Dialog.

## Destructive actions

The most common alert dialog is a destructive confirmation. The action button defaults to your primary color; make it **red** by passing the destructive variant: `className={buttonVariants({ variant: "destructive" })}` on `AlertDialogAction`. Keep the title a plain question ("Delete this project?") and the description specific about consequences.

## Async actions

By default the action **closes** the dialog the instant it's clicked — wrong when the work is async. Control the `open` state, call `event.preventDefault()` in the action's `onClick`, run the request, and `setOpen(false)` only on success — disabling both buttons and showing a spinner in between (and blocking Escape while in flight). The Async action example is the complete pattern.

## Type-to-confirm

For irreversible, high-blast-radius actions, gate the action behind a verification phrase: keep `AlertDialogAction` `disabled` until the user types the exact value (e.g. `DELETE`). It's the GitHub "type the repo name" pattern, and it's a few lines — see the Type-to-confirm example.

## Triggering & the dropdown gotcha

Open it declaratively with `AlertDialogTrigger`, or **controlled** from state (no trigger) to confirm an action started elsewhere. A frequent bug — "the alert dialog **closes immediately**" — happens when the trigger is nested inside a `DropdownMenuItem`: the menu closing steals focus and dismisses the dialog. The fix is to control the alert dialog's `open` and set it from the menu item's `onSelect`, rendering the dialog as a sibling rather than nesting the trigger.

## Accessibility

Radix gives the alert dialog `role="alertdialog"`, traps focus, moves initial focus to the **Cancel** button (the safe default), and returns focus to the trigger on close. Always include an `AlertDialogTitle` and `AlertDialogDescription` so the prompt is announced. Escape closes it; outside-click does not.

## Theming

The alert dialog reads your design tokens (`--background`, `--border`, `--destructive`) and the shared `buttonVariants`, so it follows your theme — including dark mode — with zero overrides.

## Installation

### alert-dialog

**Install:**

```bash
npx shadcn@latest add @designrevision/alert-dialog
```

**Dependencies:** @radix-ui/react-alert-dialog, utils, button

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| open | boolean | — | Controlled open state (on AlertDialog). Pair with onOpenChange. |
| onOpenChange | (open: boolean) => void | — | Fires when the dialog opens or closes (on AlertDialog). |

**Usage & accessibility:** Eleven parts; AlertDialogAction and AlertDialogCancel are pre-styled with buttonVariants() (primary) and buttonVariants({variant:'outline'}). No close X. Closes on Escape but NOT on outside-click by design. Make the action destructive with className={buttonVariants({variant:'destructive'})}.

```tsx
// components/ui/alert-dialog.tsx
"use client"

import * as React from "react"
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

function AlertDialog({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
}

function AlertDialogTrigger({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
  return (
    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
  )
}

function AlertDialogPortal({
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
  return (
    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
  )
}

function AlertDialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
  return (
    <AlertDialogPrimitive.Overlay
      data-slot="alert-dialog-overlay"
      className={cn(
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
        className
      )}
      {...props}
    />
  )
}

function AlertDialogContent({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
  return (
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogPrimitive.Content
        data-slot="alert-dialog-content"
        className={cn(
          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
          className
        )}
        {...props}
      />
    </AlertDialogPortal>
  )
}

function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-dialog-header"
      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
      {...props}
    />
  )
}

function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-dialog-footer"
      className={cn(
        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
        className
      )}
      {...props}
    />
  )
}

function AlertDialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
  return (
    <AlertDialogPrimitive.Title
      data-slot="alert-dialog-title"
      className={cn("text-lg font-semibold", className)}
      {...props}
    />
  )
}

function AlertDialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
  return (
    <AlertDialogPrimitive.Description
      data-slot="alert-dialog-description"
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  )
}

function AlertDialogAction({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
  return (
    <AlertDialogPrimitive.Action
      className={cn(buttonVariants(), className)}
      {...props}
    />
  )
}

function AlertDialogCancel({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
  return (
    <AlertDialogPrimitive.Cancel
      className={cn(buttonVariants({ variant: "outline" }), className)}
      {...props}
    />
  )
}

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}
```

## Examples

### Basic

A confirmation with a `AlertDialogCancel` (outline) and `AlertDialogAction` (primary) — the canonical interruptive prompt.

**Install:**

```bash
npx shadcn@latest add @designrevision/alert-dialog-demo-01
```

**Dependencies:** alert-dialog, button

```tsx
// components/ui/alert-dialog-demo-01.tsx
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"

export default function AlertDialogDemo01() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Show dialog</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our servers.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
```

---

### Destructive

A delete confirmation with a **red** action — `className={buttonVariants({ variant: "destructive" })}` on `AlertDialogAction`.

**Install:**

```bash
npx shadcn@latest add @designrevision/alert-dialog-destructive-01
```

**Dependencies:** alert-dialog, button

```tsx
// components/ui/alert-dialog-destructive-01.tsx
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button, buttonVariants } from "@/components/ui/button"

export default function AlertDialogDestructive01() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="destructive">Delete project</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete this project?</AlertDialogTitle>
          <AlertDialogDescription>
            This permanently deletes the project and all of its data. This
            action cannot be undone.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction className={buttonVariants({ variant: "destructive" })}>
            Delete
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
```

---

### Async action

Keeps the dialog **open** while the action runs — `preventDefault()` on the action, a `Loader2` spinner, disabled buttons, then close on success.

**Install:**

```bash
npx shadcn@latest add @designrevision/alert-dialog-async-01
```

**Dependencies:** lucide-react, alert-dialog, button

```tsx
// components/ui/alert-dialog-async-01.tsx
"use client"

import * as React from "react"
import { Loader2Icon } from "lucide-react"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button, buttonVariants } from "@/components/ui/button"

export default function AlertDialogAsync01() {
  const [open, setOpen] = React.useState(false)
  const [loading, setLoading] = React.useState(false)

  const onConfirm = async () => {
    setLoading(true)
    await new Promise((resolve) => setTimeout(resolve, 1500))
    setLoading(false)
    setOpen(false)
  }

  return (
    <AlertDialog open={open} onOpenChange={(next) => !loading && setOpen(next)}>
      <AlertDialogTrigger asChild>
        <Button variant="destructive">Delete account</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete account?</AlertDialogTitle>
          <AlertDialogDescription>
            This permanently deletes your account. The dialog stays open while
            the request is in flight.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel disabled={loading}>Cancel</AlertDialogCancel>
          <AlertDialogAction
            disabled={loading}
            onClick={(event) => {
              event.preventDefault()
              onConfirm()
            }}
            className={buttonVariants({ variant: "destructive" })}
          >
            {loading ? (
              <>
                <Loader2Icon className="animate-spin" />
                Deleting…
              </>
            ) : (
              "Delete"
            )}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
```

---

### Type to confirm

A GitHub-style guard — the destructive action stays disabled until the user types `DELETE`.

**Install:**

```bash
npx shadcn@latest add @designrevision/alert-dialog-confirm-input-01
```

**Dependencies:** alert-dialog, button, input, label

```tsx
// components/ui/alert-dialog-confirm-input-01.tsx
"use client"

import * as React from "react"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button, buttonVariants } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function AlertDialogConfirmInput01() {
  const [value, setValue] = React.useState("")
  const confirmed = value === "DELETE"

  return (
    <AlertDialog onOpenChange={() => setValue("")}>
      <AlertDialogTrigger asChild>
        <Button variant="destructive">Delete repository</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete repository</AlertDialogTitle>
          <AlertDialogDescription>
            This cannot be undone. Type{" "}
            <span className="font-medium text-foreground">DELETE</span> to
            confirm.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <div className="grid gap-2">
          <Label htmlFor="confirm" className="sr-only">
            Type DELETE to confirm
          </Label>
          <Input
            id="confirm"
            value={value}
            onChange={(event) => setValue(event.target.value)}
            placeholder="DELETE"
            autoComplete="off"
          />
        </div>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction
            disabled={!confirmed}
            className={buttonVariants({ variant: "destructive" })}
          >
            Delete
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
```

---

### Controlled

Opened from React state with no `AlertDialogTrigger` — for confirming an action initiated elsewhere.

**Install:**

```bash
npx shadcn@latest add @designrevision/alert-dialog-controlled-01
```

**Dependencies:** alert-dialog, button

```tsx
// components/ui/alert-dialog-controlled-01.tsx
"use client"

import * as React from "react"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"

export default function AlertDialogControlled01() {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        Leave page
      </Button>
      <AlertDialog open={open} onOpenChange={setOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Discard changes?</AlertDialogTitle>
            <AlertDialogDescription>
              You have unsaved changes. Leaving now will discard them. This
              dialog is opened from state, with no AlertDialogTrigger.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Keep editing</AlertDialogCancel>
            <AlertDialogAction>Discard</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  )
}
```

---

### With icon

A centered warning-icon header for the highest-stakes confirmations.

**Install:**

```bash
npx shadcn@latest add @designrevision/alert-dialog-icon-01
```

**Dependencies:** lucide-react, alert-dialog, button

```tsx
// components/ui/alert-dialog-icon-01.tsx
import { TriangleAlertIcon } from "lucide-react"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button, buttonVariants } from "@/components/ui/button"

export default function AlertDialogIcon01() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Revoke access</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader className="items-center text-center sm:text-center">
          <div className="flex size-11 items-center justify-center rounded-full bg-destructive/10">
            <TriangleAlertIcon className="size-5 text-destructive" />
          </div>
          <AlertDialogTitle>Revoke access?</AlertDialogTitle>
          <AlertDialogDescription>
            This removes the member&apos;s access immediately. They&apos;ll need
            a new invite to return.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter className="sm:justify-center">
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction className={buttonVariants({ variant: "destructive" })}>
            Revoke
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
```

---

# Shadcn Area Chart

> Free shadcn/ui area chart for React — built on Recharts and themed with CSS variables. Stacked areas, gradient fills, legends, an interactive time-range variant, plus loading, empty, and accessible states.

Source: https://designrevision.com/components/area-chart

The **Shadcn Area Chart** is a <a href="https://recharts.org/" rel="nofollow">Recharts</a> `AreaChart` wrapped in the shadcn `ChartContainer` — themed with your `--chart` CSS variables and dark-mode-ready. It's a line chart with the area below filled, ideal for **volume and cumulative trends**. Below: stacked areas, gradient fills, legends, an interactive time-range variant, and the production states.

## The basic area chart

```tsx
const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig

<ChartContainer config={chartConfig}>
  <AreaChart accessibilityLayer data={chartData} margin={{ left: 12, right: 12 }}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" tickLine={false} axisLine={false} />
    <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />
    <Area dataKey="desktop" type="natural" fill="var(--color-desktop)" fillOpacity={0.4} stroke="var(--color-desktop)" />
  </AreaChart>
</ChartContainer>
```

## Stacking

Give areas a shared `stackId` and they sum into a cumulative band:

```tsx
<Area dataKey="mobile"  stackId="a" fill="var(--color-mobile)"  stroke="var(--color-mobile)" />
<Area dataKey="desktop" stackId="a" fill="var(--color-desktop)" stroke="var(--color-desktop)" />
```

For a proportional (100%) chart, set `stackOffset="expand"` on the `AreaChart`.

## Gradient fills

Define a `linearGradient` in `<defs>` and point the fill at it — the signature area look:

```tsx
<defs>
  <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
    <stop offset="5%"  stopColor="var(--color-desktop)" stopOpacity={0.8} />
    <stop offset="95%" stopColor="var(--color-desktop)" stopOpacity={0.1} />
  </linearGradient>
</defs>
<Area dataKey="desktop" fill="url(#fillDesktop)" stroke="var(--color-desktop)" />
```

## Interactive time range

The Interactive example holds a range in state, filters the data by date, and drives it with a `<Select>` (Last 30 / 14 / 7 days) — the analytics-dashboard pattern.

## Production states

Loading, empty, and accessible (with a data-table fallback) variants are included.

See **[Shadcn Charts](/components/chart)** for theming and dark mode, and the **[Line Chart](/components/line-chart)** for the unfilled version.

## Installation

### chart

**Install:**

```bash
npx shadcn@latest add @designrevision/chart
```

**Dependencies:** recharts, utils, card

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| config * | ChartConfig | — | Maps each data key to { label, icon?, color }. Colors become --color-<key> CSS vars. |
| children * | React.ReactElement (a Recharts chart) | — | A single Recharts chart (BarChart, LineChart, …) — ChartContainer wraps it in a ResponsiveContainer. |

`*` required.

**Usage & accessibility:** A Recharts wrapper themed with CSS variables. Pass a `config` (ChartConfig: each data key → { label, icon?, color }) to <ChartContainer>; it injects --color-<key> vars (scoped per light/dark theme) that your Recharts series reference as fill="var(--color-desktop)". Use <ChartTooltip content={<ChartTooltipContent />}> and <ChartLegend content={<ChartLegendContent />}> for themed tooltips/legends. Colors default to the --chart-1..5 tokens, which re-theme automatically in dark mode. The container needs a height — keep aspect-video / min-h-* or ResponsiveContainer measures 0. This is the base primitive; the Bar/Line/Area/Pie/Radar/Radial chart pages compose it.

```tsx
// components/ui/chart.tsx
"use client"

import * as React from "react"
import * as RechartsPrimitive from "recharts"

import { cn } from "@/lib/utils"

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

  if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

  return context
}

function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
}: React.ComponentProps<"div"> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >["children"]
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`

  return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme || config.color
  )

  if (!colorConfig.length) {
    return null
  }

  return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
}
`
          )
          .join("\n"),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = "dot",
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<"div"> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    indicator?: "line" | "dot" | "dashed"
    nameKey?: string
    labelKey?: string
  }) {
  const { config } = useChart()

  const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
      return null
    }

    const [item] = payload
    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
    const itemConfig = getPayloadConfigFromPayload(config, item, key)
    const value =
      !labelKey && typeof label === "string"
        ? config[label as keyof typeof config]?.label || label
        : itemConfig?.label

    if (labelFormatter) {
      return (
        <div className={cn("font-medium", labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      )
    }

    if (!value) {
      return null
    }

    return <div className={cn("font-medium", labelClassName)}>{value}</div>
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ])

  if (!active || !payload?.length) {
    return null
  }

  const nestLabel = payload.length === 1 && indicator !== "dot"

  return (
    <div
      className={cn(
        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
        className
      )}
    >
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-1.5">
        {payload
          .filter((item) => item.type !== "none")
          .map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

            return (
              <div
                key={item.dataKey}
                className={cn(
                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                            {
                              "h-2.5 w-2.5": indicator === "dot",
                              "w-1": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="text-foreground font-mono font-medium tabular-nums">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
      </div>
    </div>
  )
}

const ChartLegend = RechartsPrimitive.Legend

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = "bottom",
  nameKey,
}: React.ComponentProps<"div"> &
  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
    hideIcon?: boolean
    nameKey?: string
  }) {
  const { config } = useChart()

  if (!payload?.length) {
    return null
  }

  return (
    <div
      className={cn(
        "flex items-center justify-center gap-4",
        verticalAlign === "top" ? "pb-3" : "pt-3",
        className
      )}
    >
      {payload
        .filter((item) => item.type !== "none")
        .map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

          return (
            <div
              key={item.value}
              className={cn(
                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
              )}
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
    </div>
  )
}

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

  const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

  let configLabelKey: string = key

  if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

  return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
```

## Examples

### Area Chart

The canonical single area with a soft fill and a line-indicator tooltip.

**Install:**

```bash
npx shadcn@latest add @designrevision/area-chart-demo-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/area-chart-demo-01.tsx
"use client"

import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig

export default function AreaChartDemo01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Area Chart</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <AreaChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 12, right: 12 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="line" />}
            />
            <Area
              dataKey="desktop"
              type="natural"
              fill="var(--color-desktop)"
              fillOpacity={0.4}
              stroke="var(--color-desktop)"
            />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Stacked

Two stacked areas sharing a `stackId` for cumulative volume.

**Install:**

```bash
npx shadcn@latest add @designrevision/area-chart-stacked-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/area-chart-stacked-01.tsx
"use client"

import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function AreaChartStacked01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Area Chart — Stacked</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <AreaChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 12, right: 12 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="dot" />}
            />
            <Area
              dataKey="mobile"
              type="natural"
              fill="var(--color-mobile)"
              fillOpacity={0.4}
              stroke="var(--color-mobile)"
              stackId="a"
            />
            <Area
              dataKey="desktop"
              type="natural"
              fill="var(--color-desktop)"
              fillOpacity={0.4}
              stroke="var(--color-desktop)"
              stackId="a"
            />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Gradient fills

Stacked areas with `linearGradient` defs fading each fill to transparent.

**Install:**

```bash
npx shadcn@latest add @designrevision/area-chart-gradient-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/area-chart-gradient-01.tsx
"use client"

import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function AreaChartGradient01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Area Chart — Gradient</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <AreaChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 12, right: 12 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
            <defs>
              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
                <stop
                  offset="5%"
                  stopColor="var(--color-desktop)"
                  stopOpacity={0.8}
                />
                <stop
                  offset="95%"
                  stopColor="var(--color-desktop)"
                  stopOpacity={0.1}
                />
              </linearGradient>
              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
                <stop
                  offset="5%"
                  stopColor="var(--color-mobile)"
                  stopOpacity={0.8}
                />
                <stop
                  offset="95%"
                  stopColor="var(--color-mobile)"
                  stopOpacity={0.1}
                />
              </linearGradient>
            </defs>
            <Area
              dataKey="mobile"
              type="natural"
              fill="url(#fillMobile)"
              fillOpacity={0.4}
              stroke="var(--color-mobile)"
              stackId="a"
            />
            <Area
              dataKey="desktop"
              type="natural"
              fill="url(#fillDesktop)"
              fillOpacity={0.4}
              stroke="var(--color-desktop)"
              stackId="a"
            />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### With legend

Stacked areas with a chart legend and a line-indicator tooltip.

**Install:**

```bash
npx shadcn@latest add @designrevision/area-chart-legend-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/area-chart-legend-01.tsx
"use client"

import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function AreaChartLegend01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Area Chart — Legend</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <AreaChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 12, right: 12 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="line" />}
            />
            <Area
              dataKey="mobile"
              type="natural"
              fill="var(--color-mobile)"
              fillOpacity={0.4}
              stroke="var(--color-mobile)"
              stackId="a"
            />
            <Area
              dataKey="desktop"
              type="natural"
              fill="var(--color-desktop)"
              fillOpacity={0.4}
              stroke="var(--color-desktop)"
              stackId="a"
            />
            <ChartLegend content={<ChartLegendContent />} />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Interactive (time range)

A Select filters the date range and the gradient-stacked areas update.

**Install:**

```bash
npx shadcn@latest add @designrevision/area-chart-interactive-01
```

**Dependencies:** recharts, chart, card, @designrevision/select

```tsx
// components/ui/area-chart-interactive-01.tsx
"use client"

import * as React from "react"
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const chartData = [
  { date: "2024-04-01", desktop: 222, mobile: 150 },
  { date: "2024-04-02", desktop: 97, mobile: 180 },
  { date: "2024-04-03", desktop: 167, mobile: 120 },
  { date: "2024-04-04", desktop: 242, mobile: 260 },
  { date: "2024-04-05", desktop: 373, mobile: 290 },
  { date: "2024-04-06", desktop: 301, mobile: 340 },
  { date: "2024-04-07", desktop: 245, mobile: 180 },
  { date: "2024-04-08", desktop: 409, mobile: 320 },
  { date: "2024-04-09", desktop: 59, mobile: 110 },
  { date: "2024-04-10", desktop: 261, mobile: 190 },
  { date: "2024-04-11", desktop: 327, mobile: 350 },
  { date: "2024-04-12", desktop: 292, mobile: 210 },
  { date: "2024-04-13", desktop: 342, mobile: 380 },
  { date: "2024-04-14", desktop: 137, mobile: 220 },
  { date: "2024-04-15", desktop: 120, mobile: 170 },
  { date: "2024-04-16", desktop: 138, mobile: 190 },
  { date: "2024-04-17", desktop: 446, mobile: 360 },
  { date: "2024-04-18", desktop: 364, mobile: 410 },
  { date: "2024-04-19", desktop: 243, mobile: 180 },
  { date: "2024-04-20", desktop: 89, mobile: 150 },
  { date: "2024-04-21", desktop: 137, mobile: 200 },
  { date: "2024-04-22", desktop: 224, mobile: 170 },
  { date: "2024-04-23", desktop: 138, mobile: 230 },
  { date: "2024-04-24", desktop: 387, mobile: 290 },
  { date: "2024-04-25", desktop: 215, mobile: 250 },
  { date: "2024-04-26", desktop: 75, mobile: 130 },
  { date: "2024-04-27", desktop: 383, mobile: 420 },
  { date: "2024-04-28", desktop: 122, mobile: 180 },
  { date: "2024-04-29", desktop: 315, mobile: 240 },
  { date: "2024-04-30", desktop: 454, mobile: 380 },
]

const chartConfig = {
  visitors: { label: "Visitors" },
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function AreaChartInteractive01() {
  const [timeRange, setTimeRange] = React.useState("30d")

  const filteredData = chartData.filter((item) => {
    const date = new Date(item.date)
    const referenceDate = new Date("2024-04-30")
    let daysToSubtract = 30
    if (timeRange === "14d") daysToSubtract = 14
    else if (timeRange === "7d") daysToSubtract = 7
    const startDate = new Date(referenceDate)
    startDate.setDate(startDate.getDate() - daysToSubtract)
    return date >= startDate
  })

  return (
    <Card className="w-full max-w-2xl">
      <CardHeader className="flex items-center gap-2 space-y-0 border-b sm:flex-row">
        <div className="grid flex-1 gap-1">
          <CardTitle>Area Chart — Interactive</CardTitle>
          <CardDescription>Page views for the selected range</CardDescription>
        </div>
        <Select value={timeRange} onValueChange={setTimeRange}>
          <SelectTrigger
            className="w-[140px] rounded-lg"
            aria-label="Select a range"
          >
            <SelectValue placeholder="Last 30 days" />
          </SelectTrigger>
          <SelectContent className="rounded-xl">
            <SelectItem value="30d">Last 30 days</SelectItem>
            <SelectItem value="14d">Last 14 days</SelectItem>
            <SelectItem value="7d">Last 7 days</SelectItem>
          </SelectContent>
        </Select>
      </CardHeader>
      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
        <ChartContainer
          config={chartConfig}
          className="aspect-auto h-[250px] w-full"
        >
          <AreaChart data={filteredData}>
            <defs>
              <linearGradient id="fillDesktopArea" x1="0" y1="0" x2="0" y2="1">
                <stop
                  offset="5%"
                  stopColor="var(--color-desktop)"
                  stopOpacity={0.8}
                />
                <stop
                  offset="95%"
                  stopColor="var(--color-desktop)"
                  stopOpacity={0.1}
                />
              </linearGradient>
              <linearGradient id="fillMobileArea" x1="0" y1="0" x2="0" y2="1">
                <stop
                  offset="5%"
                  stopColor="var(--color-mobile)"
                  stopOpacity={0.8}
                />
                <stop
                  offset="95%"
                  stopColor="var(--color-mobile)"
                  stopOpacity={0.1}
                />
              </linearGradient>
            </defs>
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="date"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              minTickGap={32}
              tickFormatter={(value) =>
                new Date(value).toLocaleDateString("en-US", {
                  month: "short",
                  day: "numeric",
                })
              }
            />
            <ChartTooltip
              cursor={false}
              content={
                <ChartTooltipContent
                  labelFormatter={(value) =>
                    new Date(value).toLocaleDateString("en-US", {
                      month: "short",
                      day: "numeric",
                    })
                  }
                  indicator="dot"
                />
              }
            />
            <Area
              dataKey="mobile"
              type="natural"
              fill="url(#fillMobileArea)"
              stroke="var(--color-mobile)"
              stackId="a"
            />
            <Area
              dataKey="desktop"
              type="natural"
              fill="url(#fillDesktopArea)"
              stroke="var(--color-desktop)"
              stackId="a"
            />
            <ChartLegend content={<ChartLegendContent />} />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Loading state

A skeleton shaped like the area chart while data loads.

**Install:**

```bash
npx shadcn@latest add @designrevision/area-chart-loading-01
```

**Dependencies:** card, skeleton

```tsx
// components/ui/area-chart-loading-01.tsx
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

// A loading state for an area chart — header placeholders + a chart-area skeleton.
export default function AreaChartLoading01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader className="gap-2">
        <Skeleton className="h-5 w-28" />
        <Skeleton className="h-4 w-40" />
      </CardHeader>
      <CardContent>
        <div className="flex aspect-video flex-col justify-between gap-3">
          <Skeleton className="h-full w-full rounded-lg" />
          <div className="flex justify-between gap-2 px-1">
            {Array.from({ length: 6 }).map((_, i) => (
              <Skeleton key={i} className="h-3 w-8" />
            ))}
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
```

---

### Empty state

A graceful no-data state with an icon and message.

**Install:**

```bash
npx shadcn@latest add @designrevision/area-chart-empty-01
```

**Dependencies:** lucide-react, card

```tsx
// components/ui/area-chart-empty-01.tsx
import { ChartArea } from "lucide-react"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export default function AreaChartEmpty01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Area Chart</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex aspect-video flex-col items-center justify-center gap-2 rounded-lg border border-dashed text-center">
          <ChartArea className="text-muted-foreground size-8" />
          <div className="text-sm font-medium">No data to display</div>
          <p className="text-muted-foreground max-w-[15rem] text-xs">
            Once events start flowing in, your trend will show here.
          </p>
        </div>
      </CardContent>
    </Card>
  )
}
```

---

### Accessible

Keyboard-navigable with a screen-reader data-table fallback.

**Install:**

```bash
npx shadcn@latest add @designrevision/area-chart-a11y-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/area-chart-a11y-01.tsx
"use client"

import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig

export default function AreaChartA11y01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Accessible Area Chart</CardTitle>
        <CardDescription>
          Keyboard-navigable, with a screen-reader data table
        </CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer
          config={chartConfig}
          role="img"
          aria-label="Area chart of desktop visitors from January to June 2024, ranging from 73 in April to 305 in February."
        >
          <AreaChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 12, right: 12 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="line" />}
            />
            <Area
              dataKey="desktop"
              type="natural"
              fill="var(--color-desktop)"
              fillOpacity={0.4}
              stroke="var(--color-desktop)"
            />
          </AreaChart>
        </ChartContainer>

        {/* Visually-hidden data-table fallback for assistive technology. */}
        <table className="sr-only">
          <caption>Desktop visitors by month, January to June 2024</caption>
          <thead>
            <tr>
              <th scope="col">Month</th>
              <th scope="col">Visitors</th>
            </tr>
          </thead>
          <tbody>
            {chartData.map((row) => (
              <tr key={row.month}>
                <th scope="row">{row.month}</th>
                <td>{row.desktop}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </CardContent>
    </Card>
  )
}
```

---

# Shadcn Avatar

> Free shadcn/ui avatar component for React — a Radix image with a graceful initials fallback. Sizes, an avatar group/stack, status indicators, and square/ringed shapes. The examples official shadcn never shipped.

Source: https://designrevision.com/components/avatar

The **Shadcn Avatar** is the user image — the canonical <a href="https://ui.shadcn.com/docs/components/avatar" rel="nofollow">shadcn/ui</a> avatar built on <a href="https://www.radix-ui.com/primitives/docs/components/avatar" rel="nofollow">Radix</a>, with a **graceful fallback** to initials when the image is missing or still loading. Official ships one demo; the examples below cover the real uses — **groups, status dots, sizes, and shapes**.

## Built on Radix

Avatar wraps <a href="https://www.radix-ui.com/primitives/docs/components/avatar" rel="nofollow">Radix Avatar</a> with three parts:

```tsx
<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>
```

`AvatarImage` renders **only once the image has loaded**; until then — or if it fails — `AvatarFallback` shows. That's the whole point: avatars never break into a busted-image icon. Put initials in the fallback.

## Fallbacks & initials

For users without a photo, skip the image (or let it fail) and the `AvatarFallback` initials fill the circle. Give the fallback a background and text color for **colored initials** (`bg-rose-500 text-white`) — a common pattern for distinguishing people in a list. The Fallbacks example shows plain and colored.

## Sizes & shapes

Size with a className on `Avatar` — the default is `size-8`; use `size-6` … `size-16` (the Sizes example). For a **square** avatar, set `rounded-lg` on the `Avatar` and `AvatarFallback` to override the default `rounded-full`; add `ring-2 ring-offset-2` for a ringed look (the Shape & ring example).

## Avatar groups

A stacked **avatar group** is a flex row with a negative gap so they overlap, plus a ring on each so they separate cleanly:

```tsx
<div className="flex -space-x-2">
  <Avatar className="ring-background ring-2">…</Avatar>
  …
  <Avatar className="ring-background ring-2">
    <AvatarFallback>+3</AvatarFallback>
  </Avatar>
</div>
```

The Avatar group example includes the "+N" overflow.

## Status & context

Pin a **status dot** to the avatar by wrapping it in a `relative` container and absolutely positioning a small ringed `rounded-full` span at the bottom-right — green for online, amber for away, muted for offline (the Status indicator example). In a list or menu, set the avatar beside a name and email (the With name example) — the pattern this gallery now uses in its [Card](/components/card), [Dropdown Menu](/components/dropdown-menu), and [Popover](/components/popover) user examples.

## Accessibility & theming

Give `AvatarImage` a meaningful `alt` (the person's name), or `alt=""` when the name is already shown beside it. Don't rely on the **status dot color alone** — pair it with a label. The avatar reads your design tokens — `--muted` (the fallback background), `--background` (group rings) — so it follows your theme, including dark mode, with no overrides.

## Installation

### avatar

**Install:**

```bash
npx shadcn@latest add @designrevision/avatar
```

**Dependencies:** @radix-ui/react-avatar, utils

**Usage & accessibility:** A Radix avatar — three parts (Avatar, AvatarImage, AvatarFallback). AvatarImage renders only once the image has loaded; until then (or if it fails) AvatarFallback shows — put initials there. Size it with a className on Avatar (default size-8); use rounded-lg for a square avatar, and stack a group with -space-x-* plus a ring. Always give AvatarImage an alt.

```tsx
// components/ui/avatar.tsx
"use client"

import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"

import { cn } from "@/lib/utils"

function Avatar({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
  return (
    <AvatarPrimitive.Root
      data-slot="avatar"
      className={cn(
        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
        className
      )}
      {...props}
    />
  )
}

function AvatarImage({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
  return (
    <AvatarPrimitive.Image
      data-slot="avatar-image"
      className={cn("aspect-square size-full", className)}
      {...props}
    />
  )
}

function AvatarFallback({
  className,
  ...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
  return (
    <AvatarPrimitive.Fallback
      data-slot="avatar-fallback"
      className={cn(
        "bg-muted flex size-full items-center justify-center rounded-full",
        className
      )}
      {...props}
    />
  )
}

export { Avatar, AvatarImage, AvatarFallback }
```

## Examples

### Avatar

The canonical avatar — an image with an initials fallback that shows while it loads or if it fails.

**Install:**

```bash
npx shadcn@latest add @designrevision/avatar-demo-01
```

**Dependencies:** avatar

```tsx
// components/ui/avatar-demo-01.tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

export default function AvatarDemo01() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  )
}
```

---

### Fallbacks

Initials fallbacks for when there is no image — plain and colored.

**Install:**

```bash
npx shadcn@latest add @designrevision/avatar-fallback-01
```

**Dependencies:** avatar

```tsx
// components/ui/avatar-fallback-01.tsx
import { Avatar, AvatarFallback } from "@/components/ui/avatar"

const colored = [
  { initials: "AL", color: "bg-rose-500" },
  { initials: "BC", color: "bg-blue-500" },
  { initials: "CD", color: "bg-emerald-500" },
  { initials: "DE", color: "bg-violet-500" },
]

export default function AvatarFallbackDemo01() {
  return (
    <div className="flex items-center gap-3">
      {/* Plain fallback (shows when there's no image). */}
      <Avatar>
        <AvatarFallback>JD</AvatarFallback>
      </Avatar>
      {/* Colored fallbacks. */}
      {colored.map((person) => (
        <Avatar key={person.initials}>
          <AvatarFallback className={`${person.color} text-white`}>
            {person.initials}
          </AvatarFallback>
        </Avatar>
      ))}
    </div>
  )
}
```

---

### Sizes

Avatars from `size-6` to `size-16` — set the size with a className on `Avatar`.

**Install:**

```bash
npx shadcn@latest add @designrevision/avatar-sizes-01
```

**Dependencies:** avatar

```tsx
// components/ui/avatar-sizes-01.tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

const sizes = ["size-6", "size-8", "size-10", "size-12", "size-16"]

export default function AvatarSizes01() {
  return (
    <div className="flex items-center gap-4">
      {sizes.map((size) => (
        <Avatar key={size} className={size}>
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
      ))}
    </div>
  )
}
```

---

### Avatar group

A stacked group of overlapping avatars (`-space-x` + ring) with a "+N" overflow.

**Install:**

```bash
npx shadcn@latest add @designrevision/avatar-group-01
```

**Dependencies:** avatar

```tsx
// components/ui/avatar-group-01.tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

const members = [
  { src: "https://github.com/shadcn.png", fallback: "CN" },
  { src: "https://github.com/leerob.png", fallback: "LR" },
  { src: "https://github.com/evilrabbit.png", fallback: "ER" },
  { src: "https://github.com/vercel.png", fallback: "VC" },
]

export default function AvatarGroup01() {
  return (
    <div className="flex -space-x-2">
      {members.map((member, index) => (
        <Avatar key={index} className="ring-background ring-2">
          <AvatarImage src={member.src} alt="" />
          <AvatarFallback>{member.fallback}</AvatarFallback>
        </Avatar>
      ))}
      <Avatar className="ring-background ring-2">
        <AvatarFallback className="text-muted-foreground text-xs">
          +3
        </AvatarFallback>
      </Avatar>
    </div>
  )
}
```

---

### Status indicator

An online / away / offline status dot pinned to the bottom-right of the avatar.

**Install:**

```bash
npx shadcn@latest add @designrevision/avatar-status-01
```

**Dependencies:** avatar

```tsx
// components/ui/avatar-status-01.tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

const people = [
  { src: "https://github.com/shadcn.png", fallback: "CN", status: "bg-green-500", label: "Online" },
  { src: "https://github.com/leerob.png", fallback: "LR", status: "bg-amber-500", label: "Away" },
  { src: "https://github.com/evilrabbit.png", fallback: "ER", status: "bg-muted-foreground", label: "Offline" },
]

export default function AvatarStatus01() {
  return (
    <div className="flex items-center gap-6">
      {people.map((person, index) => (
        <div key={index} className="relative">
          <Avatar className="size-10">
            <AvatarImage src={person.src} alt="" />
            <AvatarFallback>{person.fallback}</AvatarFallback>
          </Avatar>
          <span
            title={person.label}
            className={`ring-background absolute right-0 bottom-0 size-3 rounded-full ring-2 ${person.status}`}
          />
        </div>
      ))}
    </div>
  )
}
```

---

### Shape & ring

Round (default), square (`rounded-lg`), and a ringed avatar with `ring-offset`.

**Install:**

```bash
npx shadcn@latest add @designrevision/avatar-shapes-01
```

**Dependencies:** avatar

```tsx
// components/ui/avatar-shapes-01.tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

export default function AvatarShapes01() {
  return (
    <div className="flex items-center gap-6">
      {/* Default round */}
      <Avatar className="size-12">
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      {/* Square (rounded-lg) */}
      <Avatar className="size-12 rounded-lg">
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback className="rounded-lg">CN</AvatarFallback>
      </Avatar>
      {/* With a ring */}
      <Avatar className="ring-primary ring-offset-background size-12 ring-2 ring-offset-2">
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
    </div>
  )
}
```

---

### With name

The user-row pattern — an avatar beside a name and email, the second falling back to initials.

**Install:**

```bash
npx shadcn@latest add @designrevision/avatar-detail-01
```

**Dependencies:** avatar

```tsx
// components/ui/avatar-detail-01.tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

const people = [
  { src: "https://github.com/shadcn.png", name: "shadcn", email: "shadcn@example.com", fallback: "CN" },
  { src: "", name: "Ada Lovelace", email: "ada@example.com", fallback: "AL" },
]

export default function AvatarDetail01() {
  return (
    <div className="grid gap-4">
      {people.map((person, index) => (
        <div key={index} className="flex items-center gap-3">
          <Avatar>
            <AvatarImage src={person.src} alt={person.name} />
            <AvatarFallback>{person.fallback}</AvatarFallback>
          </Avatar>
          <div className="grid gap-0.5">
            <p className="text-sm leading-none font-medium">{person.name}</p>
            <p className="text-muted-foreground text-xs">{person.email}</p>
          </div>
        </div>
      ))}
    </div>
  )
}
```

---

# Shadcn Badge

> Free shadcn/ui badge component for React — default, secondary, destructive and outline variants, with icon and status badge examples. Copy or install in one command.

Source: https://designrevision.com/components/badge

The **Shadcn Badge** is a small, theme-aware label for status, categories, counts, and tags — a drop-in <a href="https://ui.shadcn.com/docs/components/badge" rel="nofollow">shadcn/ui</a> badge built on `class-variance-authority` and styled entirely with CSS variables. It ships four variants and an `asChild` escape hatch for rendering as a link.

## When to use

Reach for a badge to **annotate** other content — a status pill beside a name, a count on a [button](/components/button), a category tag on a card. For interactive actions, use a button instead; a badge is a label, not a control.

## Variants

Four variants cover the common cases: `default` for emphasis, `secondary` for neutral labels, `destructive` for errors or warnings, and `outline` for a quiet, bordered style. Set them with the `variant` prop. Any SVG child is auto-sized to 12px and spaced from the text, so status badges with a leading icon need no extra classes.

## Theming

The badge reads your design tokens (`--primary`, `--secondary`, `--destructive`), so it follows your theme — including dark mode — with zero overrides.

## Installation

### badge

**Install:**

```bash
npx shadcn@latest add @designrevision/badge
```

**Dependencies:** @radix-ui/react-slot, class-variance-authority, utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| variant | 'default' \| 'secondary' \| 'destructive' \| 'outline' | default | Visual style of the badge. |
| asChild | boolean | false | Render as the child element via Radix Slot — e.g. to wrap a link. |

**Usage & accessibility:** Extends React.HTMLAttributes<HTMLSpanElement> — all native span attributes are supported.

```tsx
// components/ui/badge.tsx
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-colors [&>svg]:pointer-events-none [&>svg]:size-3",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground",
        secondary: "border-transparent bg-secondary text-secondary-foreground",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

export interface BadgeProps
  extends React.HTMLAttributes<HTMLSpanElement>,
    VariantProps<typeof badgeVariants> {
  asChild?: boolean
}

function Badge({ className, variant, asChild = false, ...props }: BadgeProps) {
  const Comp = asChild ? Slot : "span"
  return <Comp className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }
```

## Examples

### Variants

The four built-in variants — default, secondary, destructive, and outline — plus status badges with a leading icon.

**Install:**

```bash
npx shadcn@latest add @designrevision/badge-variants-01
```

**Dependencies:** lucide-react, badge

```tsx
// components/ui/badge-variants-01.tsx
import { BadgeCheck, Clock } from "lucide-react"

import { Badge } from "@/components/ui/badge"

export default function BadgeVariants01() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="secondary">
        <BadgeCheck />
        Verified
      </Badge>
      <Badge variant="outline">
        <Clock />
        Pending
      </Badge>
    </div>
  )
}
```

---

# Shadcn Bar Chart

> Free shadcn/ui bar chart for React — built on Recharts and themed with CSS variables. Single and multiple series, stacked, horizontal, an interactive variant, plus loading, empty, and accessible states.

Source: https://designrevision.com/components/bar-chart

The **Shadcn Bar Chart** is a <a href="https://recharts.org/" rel="nofollow">Recharts</a> `BarChart` wrapped in the shadcn `ChartContainer`, so it's themed with your `--chart` CSS variables and dark-mode-ready out of the box. Below: single and multiple series, stacked, horizontal, an interactive variant, and the production states (loading, empty, accessible).

## The basic bar chart

```tsx
const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig

<ChartContainer config={chartConfig}>
  <BarChart accessibilityLayer data={chartData}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" tickLine={false} axisLine={false} />
    <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
  </BarChart>
</ChartContainer>
```

## Grouped & stacked

Render one `<Bar>` per series. With **no `stackId`** they group side by side; with a **shared `stackId`** they stack — round the outer corners with `radius`:

```tsx
<Bar dataKey="desktop" stackId="a" fill="var(--color-desktop)" radius={[0, 0, 4, 4]} />
<Bar dataKey="mobile"  stackId="a" fill="var(--color-mobile)"  radius={[4, 4, 0, 0]} />
```

## Horizontal

Flip the layout — `layout="vertical"`, a category `YAxis`, and a numeric (hidden) `XAxis`:

```tsx
<BarChart data={chartData} layout="vertical">
  <YAxis dataKey="browser" type="category" />
  <XAxis dataKey="visitors" type="number" hide />
  <Bar dataKey="visitors" radius={5} />
</BarChart>
```

## Interactive

The Interactive example tracks an active series in state, shows per-series totals in clickable header tiles, and points the `Bar` at the active key — the dashboard pattern for switching between metrics.

## Production states

- **Loading** — a skeleton with bars at varying heights.
- **Empty** — an icon + message when there's no data.
- **Accessible** — `accessibilityLayer` (keyboard), `role="img"` + `aria-label`, and a visually-hidden data table.

See **[Shadcn Charts](/components/chart)** for the theming system, dark mode, and the other chart types.

## Installation

### chart

**Install:**

```bash
npx shadcn@latest add @designrevision/chart
```

**Dependencies:** recharts, utils, card

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| config * | ChartConfig | — | Maps each data key to { label, icon?, color }. Colors become --color-<key> CSS vars. |
| children * | React.ReactElement (a Recharts chart) | — | A single Recharts chart (BarChart, LineChart, …) — ChartContainer wraps it in a ResponsiveContainer. |

`*` required.

**Usage & accessibility:** A Recharts wrapper themed with CSS variables. Pass a `config` (ChartConfig: each data key → { label, icon?, color }) to <ChartContainer>; it injects --color-<key> vars (scoped per light/dark theme) that your Recharts series reference as fill="var(--color-desktop)". Use <ChartTooltip content={<ChartTooltipContent />}> and <ChartLegend content={<ChartLegendContent />}> for themed tooltips/legends. Colors default to the --chart-1..5 tokens, which re-theme automatically in dark mode. The container needs a height — keep aspect-video / min-h-* or ResponsiveContainer measures 0. This is the base primitive; the Bar/Line/Area/Pie/Radar/Radial chart pages compose it.

```tsx
// components/ui/chart.tsx
"use client"

import * as React from "react"
import * as RechartsPrimitive from "recharts"

import { cn } from "@/lib/utils"

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

  if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

  return context
}

function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
}: React.ComponentProps<"div"> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >["children"]
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`

  return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme || config.color
  )

  if (!colorConfig.length) {
    return null
  }

  return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
}
`
          )
          .join("\n"),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = "dot",
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<"div"> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    indicator?: "line" | "dot" | "dashed"
    nameKey?: string
    labelKey?: string
  }) {
  const { config } = useChart()

  const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
      return null
    }

    const [item] = payload
    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
    const itemConfig = getPayloadConfigFromPayload(config, item, key)
    const value =
      !labelKey && typeof label === "string"
        ? config[label as keyof typeof config]?.label || label
        : itemConfig?.label

    if (labelFormatter) {
      return (
        <div className={cn("font-medium", labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      )
    }

    if (!value) {
      return null
    }

    return <div className={cn("font-medium", labelClassName)}>{value}</div>
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ])

  if (!active || !payload?.length) {
    return null
  }

  const nestLabel = payload.length === 1 && indicator !== "dot"

  return (
    <div
      className={cn(
        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
        className
      )}
    >
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-1.5">
        {payload
          .filter((item) => item.type !== "none")
          .map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

            return (
              <div
                key={item.dataKey}
                className={cn(
                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                            {
                              "h-2.5 w-2.5": indicator === "dot",
                              "w-1": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="text-foreground font-mono font-medium tabular-nums">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
      </div>
    </div>
  )
}

const ChartLegend = RechartsPrimitive.Legend

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = "bottom",
  nameKey,
}: React.ComponentProps<"div"> &
  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
    hideIcon?: boolean
    nameKey?: string
  }) {
  const { config } = useChart()

  if (!payload?.length) {
    return null
  }

  return (
    <div
      className={cn(
        "flex items-center justify-center gap-4",
        verticalAlign === "top" ? "pb-3" : "pt-3",
        className
      )}
    >
      {payload
        .filter((item) => item.type !== "none")
        .map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

          return (
            <div
              key={item.value}
              className={cn(
                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
              )}
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
    </div>
  )
}

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

  const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

  let configLabelKey: string = key

  if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

  return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
```

## Examples

### Bar Chart

The canonical single-series bar chart with a grid, axis, and rounded bars.

**Install:**

```bash
npx shadcn@latest add @designrevision/bar-chart-demo-01
```

**Dependencies:** recharts, lucide-react, chart, card

```tsx
// components/ui/bar-chart-demo-01.tsx
"use client"

import { TrendingUp } from "lucide-react"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "var(--chart-1)",
  },
} satisfies ChartConfig

export default function BarChartDemo01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Bar Chart</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <BarChart accessibilityLayer data={chartData}>
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              tickMargin={10}
              axisLine={false}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel />}
            />
            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
          </BarChart>
        </ChartContainer>
      </CardContent>
      <CardFooter className="flex-col items-start gap-2 text-sm">
        <div className="flex gap-2 leading-none font-medium">
          Trending up by 5.2% this month <TrendingUp className="size-4" />
        </div>
        <div className="text-muted-foreground leading-none">
          Showing total visitors for the last 6 months
        </div>
      </CardFooter>
    </Card>
  )
}
```

---

### Multiple series

Two grouped series side by side, with a dashed-indicator tooltip.

**Install:**

```bash
npx shadcn@latest add @designrevision/bar-chart-multiple-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/bar-chart-multiple-01.tsx
"use client"

import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function BarChartMultiple01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Bar Chart — Multiple</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <BarChart accessibilityLayer data={chartData}>
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              tickMargin={10}
              axisLine={false}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="dashed" />}
            />
            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
          </BarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Stacked + legend

Two series stacked with a shared `stackId` and a chart legend.

**Install:**

```bash
npx shadcn@latest add @designrevision/bar-chart-stacked-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/bar-chart-stacked-01.tsx
"use client"

import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function BarChartStacked01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Bar Chart — Stacked + Legend</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <BarChart accessibilityLayer data={chartData}>
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              tickMargin={10}
              axisLine={false}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <ChartTooltip content={<ChartTooltipContent />} />
            <ChartLegend content={<ChartLegendContent />} />
            <Bar
              dataKey="desktop"
              stackId="a"
              fill="var(--color-desktop)"
              radius={[0, 0, 4, 4]}
            />
            <Bar
              dataKey="mobile"
              stackId="a"
              fill="var(--color-mobile)"
              radius={[4, 4, 0, 0]}
            />
          </BarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Horizontal

A horizontal bar chart (`layout="vertical"`) with per-bar colors.

**Install:**

```bash
npx shadcn@latest add @designrevision/bar-chart-horizontal-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/bar-chart-horizontal-01.tsx
"use client"

import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { browser: "Chrome", visitors: 275, fill: "var(--color-chrome)" },
  { browser: "Safari", visitors: 200, fill: "var(--color-safari)" },
  { browser: "Firefox", visitors: 187, fill: "var(--color-firefox)" },
  { browser: "Edge", visitors: 173, fill: "var(--color-edge)" },
  { browser: "Other", visitors: 90, fill: "var(--color-other)" },
]

const chartConfig = {
  visitors: { label: "Visitors" },
  chrome: { label: "Chrome", color: "var(--chart-1)" },
  safari: { label: "Safari", color: "var(--chart-2)" },
  firefox: { label: "Firefox", color: "var(--chart-3)" },
  edge: { label: "Edge", color: "var(--chart-4)" },
  other: { label: "Other", color: "var(--chart-5)" },
} satisfies ChartConfig

export default function BarChartHorizontal01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Bar Chart — Horizontal</CardTitle>
        <CardDescription>Visitors by browser</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <BarChart
            accessibilityLayer
            data={chartData}
            layout="vertical"
            margin={{ left: 8 }}
          >
            <CartesianGrid horizontal={false} />
            <YAxis
              dataKey="browser"
              type="category"
              tickLine={false}
              tickMargin={10}
              axisLine={false}
            />
            <XAxis dataKey="visitors" type="number" hide />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel />}
            />
            <Bar dataKey="visitors" radius={5} />
          </BarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Interactive

Clickable header tiles with per-series totals switch the active bars.

**Install:**

```bash
npx shadcn@latest add @designrevision/bar-chart-interactive-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/bar-chart-interactive-01.tsx
"use client"

import * as React from "react"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { date: "2024-04-01", desktop: 222, mobile: 150 },
  { date: "2024-04-02", desktop: 97, mobile: 180 },
  { date: "2024-04-03", desktop: 167, mobile: 120 },
  { date: "2024-04-04", desktop: 242, mobile: 260 },
  { date: "2024-04-05", desktop: 373, mobile: 290 },
  { date: "2024-04-06", desktop: 301, mobile: 340 },
  { date: "2024-04-07", desktop: 245, mobile: 180 },
  { date: "2024-04-08", desktop: 409, mobile: 320 },
  { date: "2024-04-09", desktop: 59, mobile: 110 },
  { date: "2024-04-10", desktop: 261, mobile: 190 },
  { date: "2024-04-11", desktop: 327, mobile: 350 },
  { date: "2024-04-12", desktop: 292, mobile: 210 },
  { date: "2024-04-13", desktop: 342, mobile: 380 },
  { date: "2024-04-14", desktop: 137, mobile: 220 },
  { date: "2024-04-15", desktop: 120, mobile: 170 },
  { date: "2024-04-16", desktop: 138, mobile: 190 },
  { date: "2024-04-17", desktop: 446, mobile: 360 },
  { date: "2024-04-18", desktop: 364, mobile: 410 },
  { date: "2024-04-19", desktop: 243, mobile: 180 },
  { date: "2024-04-20", desktop: 89, mobile: 150 },
  { date: "2024-04-21", desktop: 137, mobile: 200 },
  { date: "2024-04-22", desktop: 224, mobile: 170 },
  { date: "2024-04-23", desktop: 138, mobile: 230 },
  { date: "2024-04-24", desktop: 387, mobile: 290 },
  { date: "2024-04-25", desktop: 215, mobile: 250 },
  { date: "2024-04-26", desktop: 75, mobile: 130 },
  { date: "2024-04-27", desktop: 383, mobile: 420 },
  { date: "2024-04-28", desktop: 122, mobile: 180 },
  { date: "2024-04-29", desktop: 315, mobile: 240 },
  { date: "2024-04-30", desktop: 454, mobile: 380 },
]

const chartConfig = {
  views: { label: "Page Views" },
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function BarChartInteractive01() {
  const [activeChart, setActiveChart] =
    React.useState<"desktop" | "mobile">("desktop")

  const total = React.useMemo(
    () => ({
      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
    }),
    []
  )

  return (
    <Card className="w-full max-w-2xl py-0">
      <CardHeader className="flex flex-col items-stretch border-b !p-0 sm:flex-row">
        <div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:pb-0">
          <CardTitle>Bar Chart — Interactive</CardTitle>
          <CardDescription>Daily page views for April 2024</CardDescription>
        </div>
        <div className="flex">
          {(["desktop", "mobile"] as const).map((key) => (
            <button
              key={key}
              data-active={activeChart === key}
              className="data-[active=true]:bg-muted/50 relative flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
              onClick={() => setActiveChart(key)}
            >
              <span className="text-muted-foreground text-xs">
                {chartConfig[key].label}
              </span>
              <span className="text-lg leading-none font-bold sm:text-3xl">
                {total[key].toLocaleString()}
              </span>
            </button>
          ))}
        </div>
      </CardHeader>
      <CardContent className="px-2 sm:p-6">
        <ChartContainer
          config={chartConfig}
          className="aspect-auto h-[250px] w-full"
        >
          <BarChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 12, right: 12 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="date"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              minTickGap={32}
              tickFormatter={(value) =>
                new Date(value).toLocaleDateString("en-US", {
                  month: "short",
                  day: "numeric",
                })
              }
            />
            <ChartTooltip
              content={
                <ChartTooltipContent
                  className="w-[150px]"
                  nameKey="views"
                  labelFormatter={(value) =>
                    new Date(value).toLocaleDateString("en-US", {
                      month: "short",
                      day: "numeric",
                      year: "numeric",
                    })
                  }
                />
              }
            />
            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />
          </BarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Loading state

A skeleton shaped like the bar chart while data loads.

**Install:**

```bash
npx shadcn@latest add @designrevision/bar-chart-loading-01
```

**Dependencies:** card, skeleton

```tsx
// components/ui/bar-chart-loading-01.tsx
import {
  Card,
  CardContent,
  CardHeader,
} from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

// A loading state shaped like the chart it stands in for.
const bars = [60, 90, 75, 40, 80, 85]

export default function BarChartLoading01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader className="gap-2">
        <Skeleton className="h-5 w-28" />
        <Skeleton className="h-4 w-40" />
      </CardHeader>
      <CardContent>
        <div className="flex aspect-video items-end justify-between gap-2 px-1 pb-6">
          {bars.map((height, i) => (
            <Skeleton
              key={i}
              className="w-full rounded-md rounded-b-none"
              style={{ height: `${height}%` }}
            />
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
```

---

### Empty state

A graceful no-data state with an icon and message.

**Install:**

```bash
npx shadcn@latest add @designrevision/bar-chart-empty-01
```

**Dependencies:** lucide-react, card

```tsx
// components/ui/bar-chart-empty-01.tsx
import { ChartColumnBig } from "lucide-react"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export default function BarChartEmpty01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Bar Chart</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex aspect-video flex-col items-center justify-center gap-2 rounded-lg border border-dashed text-center">
          <ChartColumnBig className="text-muted-foreground size-8" />
          <div className="text-sm font-medium">No data to display</div>
          <p className="text-muted-foreground max-w-[15rem] text-xs">
            Data will appear here once your first events come in.
          </p>
        </div>
      </CardContent>
    </Card>
  )
}
```

---

### Accessible

Keyboard-navigable with a screen-reader data-table fallback.

**Install:**

```bash
npx shadcn@latest add @designrevision/bar-chart-a11y-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/bar-chart-a11y-01.tsx
"use client"

import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig

export default function BarChartA11y01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Accessible Bar Chart</CardTitle>
        <CardDescription>
          Keyboard-navigable, with a screen-reader data table
        </CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer
          config={chartConfig}
          role="img"
          aria-label="Bar chart of desktop visitors from January to June 2024, ranging from 73 in April to 305 in February."
        >
          <BarChart accessibilityLayer data={chartData}>
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              tickMargin={10}
              axisLine={false}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel />}
            />
            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
          </BarChart>
        </ChartContainer>

        {/* Visually-hidden data-table fallback for assistive technology. */}
        <table className="sr-only">
          <caption>Desktop visitors by month, January to June 2024</caption>
          <thead>
            <tr>
              <th scope="col">Month</th>
              <th scope="col">Visitors</th>
            </tr>
          </thead>
          <tbody>
            {chartData.map((row) => (
              <tr key={row.month}>
                <th scope="row">{row.month}</th>
                <td>{row.desktop}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </CardContent>
    </Card>
  )
}
```

---

# Shadcn Breadcrumb

> Free shadcn/ui breadcrumb component for React — an accessible navigation trail: a basic crumb, a collapsed dropdown, an ellipsis truncation, a custom separator, and a home icon.

Source: https://designrevision.com/components/breadcrumb

The **Shadcn Breadcrumb** is an accessible **navigation trail** for React — it shows where the current page sits in the hierarchy and lets users step back up. It is composed of small parts you assemble by hand, so you build the exact trail you need. The examples below cover a basic crumb, a collapsed dropdown, an ellipsis truncation, a custom separator, and a home icon.

## The parts

```tsx
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

`Breadcrumb` is a `<nav>` landmark, `BreadcrumbList` the ordered list, and each `BreadcrumbItem` holds either a `BreadcrumbLink` or — for the current page — a `BreadcrumbPage`.

## Marking the current page

The **last** crumb should be a `BreadcrumbPage`, not a link. It renders as plain text and carries `aria-current`, so screen readers announce it as the page you're on. Everything before it is a `BreadcrumbLink`.

## Custom separator

`BreadcrumbSeparator` shows a chevron by default; pass a child to override it:

```tsx
<BreadcrumbSeparator>
  <Slash />
</BreadcrumbSeparator>
```

The separator is decorative (`aria-hidden`), so changing the glyph never affects the announced trail.

## Collapsing a long trail

For deep hierarchies, collapse the middle with `BreadcrumbEllipsis`. Keep it static, or make it interactive by wrapping a `DropdownMenu` around it so the hidden crumbs are still reachable:

```tsx
<BreadcrumbItem>
  <DropdownMenu>
    <DropdownMenuTrigger>
      <BreadcrumbEllipsis />
    </DropdownMenuTrigger>
    <DropdownMenuContent>{/* hidden crumbs */}</DropdownMenuContent>
  </DropdownMenu>
</BreadcrumbItem>
```

## Framework links

`BreadcrumbLink` renders an `<a>`, but `asChild` slots in your router link without losing the styling:

```tsx
<BreadcrumbLink asChild>
  <Link href="/components">Components</Link>
</BreadcrumbLink>
```

## Accessibility

The component renders `<nav aria-label="breadcrumb">` around an ordered list, separators are hidden from assistive tech, and the current page is marked with `aria-current`. For search rich results, add `BreadcrumbList` JSON-LD structured data alongside the visual component.

## Installation

### breadcrumb

**Install:**

```bash
npx shadcn@latest add @designrevision/breadcrumb
```

**Dependencies:** @radix-ui/react-slot, utils

**Usage & accessibility:** A breadcrumb trail (no dependency beyond Slot). Compose <Breadcrumb> → <BreadcrumbList> of <BreadcrumbItem>s, each holding a <BreadcrumbLink> (use asChild to wrap your router's Link) or a <BreadcrumbPage> for the current page; put a <BreadcrumbSeparator> (a chevron by default) between them, and <BreadcrumbEllipsis> to collapse middle items. Carries the right ARIA (nav aria-label, aria-current="page").

```tsx
// components/ui/breadcrumb.tsx
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"

function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
}

function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
  return (
    <ol
      data-slot="breadcrumb-list"
      className={cn(
        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
        className
      )}
      {...props}
    />
  )
}

function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="breadcrumb-item"
      className={cn("inline-flex items-center gap-1.5", className)}
      {...props}
    />
  )
}

function BreadcrumbLink({
  asChild,
  className,
  ...props
}: React.ComponentProps<"a"> & {
  asChild?: boolean
}) {
  const Comp = asChild ? Slot : "a"

  return (
    <Comp
      data-slot="breadcrumb-link"
      className={cn("hover:text-foreground transition-colors", className)}
      {...props}
    />
  )
}

function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="breadcrumb-page"
      role="link"
      aria-disabled="true"
      aria-current="page"
      className={cn("text-foreground font-normal", className)}
      {...props}
    />
  )
}

function BreadcrumbSeparator({
  children,
  className,
  ...props
}: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
      className={cn("[&>svg]:size-3.5", className)}
      {...props}
    >
      {children ?? <ChevronRight />}
    </li>
  )
}

function BreadcrumbEllipsis({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="breadcrumb-ellipsis"
      role="presentation"
      aria-hidden="true"
      className={cn("flex size-9 items-center justify-center", className)}
      {...props}
    >
      <MoreHorizontal className="size-4" />
      <span className="sr-only">More</span>
    </span>
  )
}

export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
}
```

## Examples

### Basic

The canonical breadcrumb — links, separators, and a current page.

**Install:**

```bash
npx shadcn@latest add @designrevision/breadcrumb-demo-01
```

**Dependencies:** breadcrumb

```tsx
// components/ui/breadcrumb-demo-01.tsx
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

export default function BreadcrumbDemo01() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}
```

---

### Collapsed dropdown

Middle items collapsed into a dropdown menu behind an ellipsis.

**Install:**

```bash
npx shadcn@latest add @designrevision/breadcrumb-dropdown-01
```

**Dependencies:** breadcrumb, dropdown-menu

```tsx
// components/ui/breadcrumb-dropdown-01.tsx
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function BreadcrumbDropdown01() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <DropdownMenu>
            <DropdownMenuTrigger className="flex items-center gap-1">
              <BreadcrumbEllipsis />
              <span className="sr-only">Toggle menu</span>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
              <DropdownMenuItem>Documentation</DropdownMenuItem>
              <DropdownMenuItem>Themes</DropdownMenuItem>
              <DropdownMenuItem>GitHub</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}
```

---

### With ellipsis

A truncated trail using a static ellipsis for the collapsed middle.

**Install:**

```bash
npx shadcn@latest add @designrevision/breadcrumb-ellipsis-01
```

**Dependencies:** breadcrumb

```tsx
// components/ui/breadcrumb-ellipsis-01.tsx
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

export default function BreadcrumbEllipsis01() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbEllipsis />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}
```

---

### Custom separator

A slash separator in place of the default chevron.

**Install:**

```bash
npx shadcn@latest add @designrevision/breadcrumb-separator-01
```

**Dependencies:** lucide-react, breadcrumb

```tsx
// components/ui/breadcrumb-separator-01.tsx
import { Slash } from "lucide-react"

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

export default function BreadcrumbSeparator01() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
          <Slash />
        </BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
          <Slash />
        </BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}
```

---

### With icon

A home icon on the first crumb.

**Install:**

```bash
npx shadcn@latest add @designrevision/breadcrumb-icon-01
```

**Dependencies:** lucide-react, breadcrumb

```tsx
// components/ui/breadcrumb-icon-01.tsx
import { House } from "lucide-react"

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

export default function BreadcrumbIcon01() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#" className="flex items-center gap-1.5">
            <House className="size-3.5" />
            Home
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Settings</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Profile</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}
```

---

# Shadcn Button

> Free shadcn/ui button component for React: solid, outline, ghost, link and destructive variants, plus icon and loading buttons. Copy or install in one command.

Source: https://designrevision.com/components/button

The **Shadcn Button** is the foundation of every action in your interface — a drop-in <a href="https://ui.shadcn.com/docs/components/button" rel="nofollow">shadcn/ui</a> button built on <a href="https://www.radix-ui.com/primitives/docs/utilities/slot" rel="nofollow">Radix</a> Slot and `class-variance-authority`, themed entirely with CSS variables. It ships six visual variants, seven size presets, ready-made icon and loading buttons, and an `asChild` escape hatch for rendering a link as a button.

## When to use

Use a button for **actions** the user takes — submitting a form, opening a dialog, triggering a mutation. For **navigation** between pages, prefer a link (the `link` variant, or `asChild` wrapping an anchor) so the markup stays semantic and accessible.

Match the variant to emphasis: **default** for the single most important action in a view, **secondary** or **outline** for supporting actions, **ghost** for low-emphasis toolbar actions, and **destructive** for irreversible operations like deleting.

## Button variants and sizes

Six variants cover the full emphasis scale: `default`, `secondary`, `outline`, `ghost`, `link`, and `destructive`. Seven sizes span `xs` through `lg`, plus three square icon sizes (`icon-sm`, `icon`, `icon-lg`) for icon-only buttons — set both with the `variant` and `size` props (see the Props panel in the Installation section for the full type signature). The button also auto-sizes any SVG child to 16px and spaces it from the label, so adding a `lucide-react` icon, a count `Badge`, or a `Kbd` shortcut hint needs no extra classes.

## Accessibility

Every button is keyboard-navigable with a visible focus ring and respects `prefers-reduced-motion`. Icon-only buttons must carry an `aria-label` so screen readers announce the action. Disabled buttons set the `disabled` attribute (not just a class), so they are removed from the tab order and announced correctly.

## Theming

The button reads your design tokens (`--primary`, `--secondary`, `--ring`, and friends), so it follows your theme — including dark mode — with zero overrides. Any palette produced by a shadcn-compatible theme generator applies automatically.

## Installation

### button

**Install:**

```bash
npx shadcn@latest add @designrevision/button
```

**Dependencies:** @radix-ui/react-slot, class-variance-authority, utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| variant | 'default' \| 'destructive' \| 'outline' \| 'secondary' \| 'ghost' \| 'link' | default | Visual style of the button. |
| size | 'default' \| 'xs' \| 'sm' \| 'lg' \| 'icon' \| 'icon-sm' \| 'icon-lg' | default | Size preset. The "icon" sizes render square icon-only buttons. |
| asChild | boolean | false | Render as the child element via Radix Slot — e.g. to make a link look like a button. |

**Usage & accessibility:** Extends React.ButtonHTMLAttributes — all native <button> attributes are supported.

```tsx
// components/ui/button.tsx
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
        outline:
          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-9 px-4 py-2",
        xs: "h-7 gap-1.5 rounded-md px-2.5 text-xs",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
        icon: "size-9",
        "icon-sm": "size-8",
        "icon-lg": "size-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }
```

## Examples

### Simple

A versatile button with solid, ghost, outline and loading variants — keyboard-navigable and reduced-motion aware.

**Install:**

```bash
npx shadcn@latest add @designrevision/button-simple-01
```

**Dependencies:** button

```tsx
// components/ui/button-simple-01.tsx
"use client"

import { Button } from "@/components/ui/button"

export default function ButtonSimple01() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button>Button</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="link">Link</Button>
    </div>
  )
}
```

---

### With icon

Drop a `lucide-react` icon before the label — the button auto-sizes icons and spaces them, so no extra classes are needed.

**Install:**

```bash
npx shadcn@latest add @designrevision/button-icon-01
```

**Dependencies:** lucide-react, button

```tsx
// components/ui/button-icon-01.tsx
import { Download, Plus, Send } from "lucide-react"

import { Button } from "@/components/ui/button"

export default function ButtonIcon01() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button>
        <Download />
        Download
      </Button>
      <Button variant="secondary">
        <Plus />
        New project
      </Button>
      <Button variant="outline">
        <Send />
        Send message
      </Button>
    </div>
  )
}
```

---

### With trailing icon

Place the icon after the label for forward actions like “Continue” or “Open”. Same auto-sizing and spacing.

**Install:**

```bash
npx shadcn@latest add @designrevision/button-icon-02
```

**Dependencies:** lucide-react, button

```tsx
// components/ui/button-icon-02.tsx
import { ArrowRight, ChevronRight, ExternalLink } from "lucide-react"

import { Button } from "@/components/ui/button"

export default function ButtonIcon02() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button>
        Continue
        <ArrowRight />
      </Button>
      <Button variant="outline">
        Open docs
        <ExternalLink />
      </Button>
      <Button variant="ghost">
        Next
        <ChevronRight />
      </Button>
    </div>
  )
}
```

---

### Rounded

Add `rounded-full` for a pill shape. Works across every variant.

**Install:**

```bash
npx shadcn@latest add @designrevision/button-rounded-01
```

**Dependencies:** button

```tsx
// components/ui/button-rounded-01.tsx
import { Button } from "@/components/ui/button"

export default function ButtonRounded01() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button className="rounded-full">Button</Button>
      <Button variant="secondary" className="rounded-full">
        Secondary
      </Button>
      <Button variant="outline" className="rounded-full">
        Outline
      </Button>
    </div>
  )
}
```

---

### Loading

Show an in-flight action with a spinning `Loader2` icon and `disabled` to block repeat clicks.

**Install:**

```bash
npx shadcn@latest add @designrevision/button-loading-01
```

**Dependencies:** lucide-react, button

```tsx
// components/ui/button-loading-01.tsx
import { Loader2 } from "lucide-react"

import { Button } from "@/components/ui/button"

export default function ButtonLoading01() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button disabled>
        <Loader2 className="animate-spin" />
        Saving
      </Button>
      <Button variant="secondary" disabled>
        <Loader2 className="animate-spin" />
        Please wait
      </Button>
      <Button variant="outline" disabled>
        <Loader2 className="animate-spin" />
        Loading
      </Button>
    </div>
  )
}
```

---

### With count

Pair the label with a `Badge` to surface a count — unread, pending, or selected items.

**Install:**

```bash
npx shadcn@latest add @designrevision/button-count-01
```

**Dependencies:** lucide-react, button, badge

```tsx
// components/ui/button-count-01.tsx
import { Bell, Inbox, Mail } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

export default function ButtonCount01() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button>
        <Inbox />
        Inbox
        <Badge variant="secondary">24</Badge>
      </Button>
      <Button variant="secondary">
        <Mail />
        Messages
        <Badge>5</Badge>
      </Button>
      <Button variant="outline">
        <Bell />
        Alerts
        <Badge variant="destructive">9</Badge>
      </Button>
    </div>
  )
}
```

---

### With shortcut

Hint a keyboard shortcut with the `Kbd` component — common on search and command triggers.

**Install:**

```bash
npx shadcn@latest add @designrevision/button-kbd-01
```

**Dependencies:** lucide-react, button, kbd

```tsx
// components/ui/button-kbd-01.tsx
import { Search } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Kbd } from "@/components/ui/kbd"

export default function ButtonKbd01() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="outline">
        <Search />
        Search
        <Kbd>⌘K</Kbd>
      </Button>
      <Button variant="secondary">
        Save
        <Kbd>⌘S</Kbd>
      </Button>
      <Button>
        Command menu
        <Kbd>⌘J</Kbd>
      </Button>
    </div>
  )
}
```

---

### Sizes

Four size presets — `xs`, `sm`, `default`, and `lg` — set via the `size` prop.

**Install:**

```bash
npx shadcn@latest add @designrevision/button-sizes-01
```

**Dependencies:** button

```tsx
// components/ui/button-sizes-01.tsx
import { Button } from "@/components/ui/button"

export default function ButtonSizes01() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="xs">Extra small</Button>
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
    </div>
  )
}
```

---

### Icon button

Square icon-only buttons with `size="icon"`. Always pass an `aria-label` for accessibility.

**Install:**

```bash
npx shadcn@latest add @designrevision/button-icon-only-01
```

**Dependencies:** lucide-react, button

```tsx
// components/ui/button-icon-only-01.tsx
import { Bell, Settings, Star } from "lucide-react"

import { Button } from "@/components/ui/button"

export default function ButtonIconOnly01() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="icon" aria-label="Settings">
        <Settings />
      </Button>
      <Button variant="secondary" size="icon" aria-label="Favorite">
        <Star />
      </Button>
      <Button variant="outline" size="icon" aria-label="Notifications">
        <Bell />
      </Button>
    </div>
  )
}
```

---

### Icon button sizes

Icon buttons at the `icon-sm`, `icon`, and `icon-lg` presets.

**Install:**

```bash
npx shadcn@latest add @designrevision/button-icon-sizes-01
```

**Dependencies:** lucide-react, button

```tsx
// components/ui/button-icon-sizes-01.tsx
import { Plus } from "lucide-react"

import { Button } from "@/components/ui/button"

export default function ButtonIconSizes01() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="outline" size="icon-sm" aria-label="Add">
        <Plus />
      </Button>
      <Button variant="outline" size="icon" aria-label="Add">
        <Plus />
      </Button>
      <Button variant="outline" size="icon-lg" aria-label="Add">
        <Plus />
      </Button>
    </div>
  )
}
```

---

### Icon button with count

Overlay a `Badge` in the corner for a notification count.

**Install:**

```bash
npx shadcn@latest add @designrevision/button-icon-count-01
```

**Dependencies:** lucide-react, button, badge

```tsx
// components/ui/button-icon-count-01.tsx
import { Bell } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

export default function ButtonIconCount01() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <div className="relative inline-flex">
        <Button variant="outline" size="icon" aria-label="Notifications">
          <Bell />
        </Button>
        <Badge className="absolute -right-1.5 -top-1.5 size-5 justify-center rounded-full p-0 tabular-nums">
          3
        </Badge>
      </div>
      <div className="relative inline-flex">
        <Button variant="outline" size="icon" aria-label="Notifications">
          <Bell />
        </Button>
        <Badge
          variant="destructive"
          className="absolute -right-1.5 -top-1.5 size-5 justify-center rounded-full p-0 tabular-nums"
        >
          9
        </Badge>
      </div>
    </div>
  )
}
```

---

### Icon button states

Rounded, loading, and disabled icon buttons.

**Install:**

```bash
npx shadcn@latest add @designrevision/button-icon-states-01
```

**Dependencies:** lucide-react, button

```tsx
// components/ui/button-icon-states-01.tsx
import { Heart, Loader2, Trash2 } from "lucide-react"

import { Button } from "@/components/ui/button"

export default function ButtonIconStates01() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button
        variant="outline"
        size="icon"
        className="rounded-full"
        aria-label="Like"
      >
        <Heart />
      </Button>
      <Button variant="outline" size="icon" disabled aria-label="Loading">
        <Loader2 className="animate-spin" />
      </Button>
      <Button variant="outline" size="icon" disabled aria-label="Delete">
        <Trash2 />
      </Button>
    </div>
  )
}
```

---

# Shadcn Calendar

> Free shadcn/ui calendar for React — built on react-day-picker v9. Single, range, and multiple selection, month/year dropdowns, disabled dates, two-up months, presets, and an appointment-booking flow. The examples official shadcn never shipped.

Source: https://designrevision.com/components/calendar

The **Shadcn Calendar** is the date grid — the canonical <a href="https://ui.shadcn.com/docs/components/calendar" rel="nofollow">shadcn/ui</a> calendar built on <a href="https://daypicker.dev/" rel="nofollow">**react-day-picker**</a> v9. Official ships one single-date demo; the examples below cover the real range — **range and multiple selection, month/year dropdowns, disabled dates, two-up months, presets, and a booking flow**.

## Built on react-day-picker

The Calendar is a styled wrapper over <a href="https://daypicker.dev/" rel="nofollow">**react-day-picker**</a> (with <a href="https://date-fns.org/" rel="nofollow">date-fns</a> for the date math) — the headless library that owns the calendar grid, keyboard navigation, and the selection modes. The shadcn layer adds Tailwind styling, your design tokens, and a `CalendarDayButton` built from the [Button](/components/button). Install the two dependencies:

```bash
npm install react-day-picker date-fns
```

**Version matters:** this Calendar targets **react-day-picker v9**. It uses `getDefaultClassNames()`, the v9 `components` override map, and v9 `classNames` keys — none of which exist in v8, so a v8 install renders the calendar unstyled. Pin `react-day-picker` to `^9`.

## Selection modes

The `mode` prop sets what you can pick:

- **`single`** — one date. `selected` is a `Date`.
- **`range`** — a start and end. `selected` is a `DateRange` (`{ from, to }`).
- **`multiple`** — a list. `selected` is a `Date[]`, with an optional `max`.

Each pairs with an `onSelect` of the matching shape. The Calendar, Range, and Multiple dates examples cover all three.

## Month & year navigation

By default the header is a static label with prev/next arrows. Set `captionLayout="dropdown"` (and bound it with `startMonth` / `endMonth`) to turn the month and year into dropdowns — the right choice for **date-of-birth** fields where paging month by month is painful. The Month & year dropdowns example jumps decades in two clicks.

## Disabling dates

Pass a **matcher** (or array) to `disabled`:

```tsx
disabled={[{ before: new Date() }, { dayOfWeek: [0, 6] }]}
```

`{ before }` / `{ after }` block ranges, `{ dayOfWeek: [0, 6] }` blocks weekends, and an array of `Date`s blocks specific days. The Disabled dates example blocks the past and weekends; the Booking example also blocks individual booked days.

## Layout, presets & ranges

Render **two months** side by side with `numberOfMonths={2}` for a date-range UI (the Two months example). Pair the calendar with **preset buttons** — Today, Tomorrow, In a week — by setting both the selected date and the visible `month`, and show the choice in a footer (the With presets example).

## Booking & custom days

For scheduling, combine `disabled` (past, weekends, and already-booked days) with a `booked` **modifier** and `modifiersClassNames` to strike through unavailable days, then show time slots beside the grid. The Appointment booking example is the full flow. For deeper customization, the exported `CalendarDayButton` lets you render anything inside a day cell (prices, dots, badges).

## Calendar vs Date Picker

This page is the **standalone** Calendar. A **Date Picker** is the same Calendar inside a [Popover](/components/popover) behind a button, so the field stays compact and the grid opens on click — compose `Calendar` + `Popover` to build one. (That's a separate pattern, like Table vs Data Table.)

## Accessibility & theming

react-day-picker handles the hard parts — a labelled grid, full arrow-key navigation, and focus management (the `CalendarDayButton` focuses the active day). The calendar reads your design tokens — `--accent` (today and ranges), `--primary` (the selected day), `--muted-foreground` (weekday headers) — so it follows your theme, including dark mode, with no overrides.

## Installation

### calendar

**Install:**

```bash
npx shadcn@latest add @designrevision/calendar
```

**Dependencies:** react-day-picker, date-fns, utils, button

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| mode | "single" \| "range" \| "multiple" | "single" | Selection mode (forwarded to react-day-picker). Pair with selected / onSelect. |
| selected | Date \| Date[] \| DateRange | — | The selected date(s); shape matches mode. |
| onSelect | (value) => void | — | Fires when the selection changes. |
| captionLayout | "label" \| "dropdown" \| "dropdown-months" \| "dropdown-years" | "label" | Header style — a static label or month/year dropdowns. |
| numberOfMonths | number | 1 | How many months to render side by side. |
| disabled | Matcher \| Matcher[] | — | Dates to disable — { before } / { after } / { dayOfWeek } / specific dates. |

**Usage & accessibility:** The shadcn calendar built on react-day-picker v9 + date-fns. Exports Calendar and CalendarDayButton; forwards all DayPicker props (mode, selected, onSelect, month, captionLayout, numberOfMonths, disabled, modifiers, etc.). For a date input that opens this in a popover, compose it with Popover (the Date Picker pattern). Requires react-day-picker v9 — v8 classNames will not match.

```tsx
// components/ui/calendar.tsx
"use client"

import * as React from "react"
import {
  ChevronDownIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
} from "lucide-react"
import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"

import { cn } from "@/lib/utils"
import { Button, buttonVariants } from "@/components/ui/button"

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  captionLayout = "label",
  buttonVariant = "ghost",
  formatters,
  components,
  ...props
}: React.ComponentProps<typeof DayPicker> & {
  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
}) {
  const defaultClassNames = getDefaultClassNames()

  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn(
        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
        className
      )}
      captionLayout={captionLayout}
      formatters={{
        formatMonthDropdown: (date) =>
          date.toLocaleString("default", { month: "short" }),
        ...formatters,
      }}
      classNames={{
        root: cn("w-fit", defaultClassNames.root),
        months: cn(
          "flex gap-4 flex-col md:flex-row relative",
          defaultClassNames.months
        ),
        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
        nav: cn(
          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
          defaultClassNames.nav
        ),
        button_previous: cn(
          buttonVariants({ variant: buttonVariant }),
          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
          defaultClassNames.button_previous
        ),
        button_next: cn(
          buttonVariants({ variant: buttonVariant }),
          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
          defaultClassNames.button_next
        ),
        month_caption: cn(
          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
          defaultClassNames.month_caption
        ),
        dropdowns: cn(
          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
          defaultClassNames.dropdowns
        ),
        dropdown_root: cn(
          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
          defaultClassNames.dropdown_root
        ),
        dropdown: cn(
          "absolute bg-popover inset-0 opacity-0",
          defaultClassNames.dropdown
        ),
        caption_label: cn(
          "select-none font-medium",
          captionLayout === "label"
            ? "text-sm"
            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
          defaultClassNames.caption_label
        ),
        table: "w-full border-collapse",
        weekdays: cn("flex", defaultClassNames.weekdays),
        weekday: cn(
          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
          defaultClassNames.weekday
        ),
        week: cn("flex w-full mt-2", defaultClassNames.week),
        week_number_header: cn(
          "select-none w-(--cell-size)",
          defaultClassNames.week_number_header
        ),
        week_number: cn(
          "text-[0.8rem] select-none text-muted-foreground",
          defaultClassNames.week_number
        ),
        day: cn(
          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
          defaultClassNames.day
        ),
        range_start: cn(
          "rounded-l-md bg-accent",
          defaultClassNames.range_start
        ),
        range_middle: cn("rounded-none", defaultClassNames.range_middle),
        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
        today: cn(
          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
          defaultClassNames.today
        ),
        outside: cn(
          "text-muted-foreground aria-selected:text-muted-foreground",
          defaultClassNames.outside
        ),
        disabled: cn(
          "text-muted-foreground opacity-50",
          defaultClassNames.disabled
        ),
        hidden: cn("invisible", defaultClassNames.hidden),
        ...classNames,
      }}
      components={{
        Root: ({ className, rootRef, ...props }) => {
          return (
            <div
              data-slot="calendar"
              ref={rootRef}
              className={cn(className)}
              {...props}
            />
          )
        },
        Chevron: ({ className, orientation, ...props }) => {
          if (orientation === "left") {
            return (
              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
            )
          }

          if (orientation === "right") {
            return (
              <ChevronRightIcon
                className={cn("size-4", className)}
                {...props}
              />
            )
          }

          return (
            <ChevronDownIcon className={cn("size-4", className)} {...props} />
          )
        },
        DayButton: CalendarDayButton,
        WeekNumber: ({ children, ...props }) => {
          return (
            <td {...props}>
              <div className="flex size-(--cell-size) items-center justify-center text-center">
                {children}
              </div>
            </td>
          )
        },
        ...components,
      }}
      {...props}
    />
  )
}

function CalendarDayButton({
  className,
  day,
  modifiers,
  ...props
}: React.ComponentProps<typeof DayButton>) {
  const defaultClassNames = getDefaultClassNames()

  const ref = React.useRef<HTMLButtonElement>(null)
  React.useEffect(() => {
    if (modifiers.focused) ref.current?.focus()
  }, [modifiers.focused])

  return (
    <Button
      ref={ref}
      variant="ghost"
      size="icon"
      data-day={day.date.toISOString().split("T")[0]}
      data-selected-single={
        modifiers.selected &&
        !modifiers.range_start &&
        !modifiers.range_end &&
        !modifiers.range_middle
      }
      data-range-start={modifiers.range_start}
      data-range-end={modifiers.range_end}
      data-range-middle={modifiers.range_middle}
      className={cn(
        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
        defaultClassNames.day,
        className
      )}
      {...props}
    />
  )
}

export { Calendar, CalendarDayButton }
```

## Examples

### Calendar

A single-date calendar in a bordered card with a controlled `selected` date.

**Install:**

```bash
npx shadcn@latest add @designrevision/calendar-demo-01
```

**Dependencies:** calendar

```tsx
// components/ui/calendar-demo-01.tsx
"use client"

import * as React from "react"

import { Calendar } from "@/components/ui/calendar"

export default function CalendarDemo01() {
  const [date, setDate] = React.useState<Date | undefined>(new Date())

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-md border shadow-sm"
    />
  )
}
```

---

### Range

Date-range selection with `mode="range"` — pick a start and end day.

**Install:**

```bash
npx shadcn@latest add @designrevision/calendar-range-01
```

**Dependencies:** date-fns, calendar

```tsx
// components/ui/calendar-range-01.tsx
"use client"

import * as React from "react"
import { addDays } from "date-fns"
import { type DateRange } from "react-day-picker"

import { Calendar } from "@/components/ui/calendar"

export default function CalendarRange01() {
  const [range, setRange] = React.useState<DateRange | undefined>({
    from: new Date(),
    to: addDays(new Date(), 5),
  })

  return (
    <Calendar
      mode="range"
      selected={range}
      onSelect={setRange}
      className="rounded-md border shadow-sm"
    />
  )
}
```

---

### Multiple dates

Select several individual dates with `mode="multiple"` and a `max`.

**Install:**

```bash
npx shadcn@latest add @designrevision/calendar-multiple-01
```

**Dependencies:** calendar

```tsx
// components/ui/calendar-multiple-01.tsx
"use client"

import * as React from "react"

import { Calendar } from "@/components/ui/calendar"

export default function CalendarMultiple01() {
  const [dates, setDates] = React.useState<Date[] | undefined>([])

  return (
    <Calendar
      mode="multiple"
      max={5}
      selected={dates}
      onSelect={setDates}
      className="rounded-md border shadow-sm"
    />
  )
}
```

---

### Month & year dropdowns

`captionLayout="dropdown"` with `startMonth` / `endMonth` bounds — fast navigation for date-of-birth pickers.

**Install:**

```bash
npx shadcn@latest add @designrevision/calendar-dropdown-01
```

**Dependencies:** calendar

```tsx
// components/ui/calendar-dropdown-01.tsx
"use client"

import * as React from "react"

import { Calendar } from "@/components/ui/calendar"

export default function CalendarDropdown01() {
  const [date, setDate] = React.useState<Date | undefined>(new Date(1990, 0, 1))

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      captionLayout="dropdown"
      startMonth={new Date(1980, 0)}
      endMonth={new Date(2030, 11)}
      className="rounded-md border shadow-sm"
    />
  )
}
```

---

### Disabled dates

Block past dates and weekends with the `disabled` matcher — `{ before }` plus `{ dayOfWeek }`.

**Install:**

```bash
npx shadcn@latest add @designrevision/calendar-disabled-01
```

**Dependencies:** calendar

```tsx
// components/ui/calendar-disabled-01.tsx
"use client"

import * as React from "react"

import { Calendar } from "@/components/ui/calendar"

export default function CalendarDisabled01() {
  const [date, setDate] = React.useState<Date | undefined>()

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      // No past dates and no weekends.
      disabled={[{ before: new Date() }, { dayOfWeek: [0, 6] }]}
      className="rounded-md border shadow-sm"
    />
  )
}
```

---

### Two months

A range across two months side by side with `numberOfMonths={2}` — the date-range-picker layout.

**Install:**

```bash
npx shadcn@latest add @designrevision/calendar-two-months-01
```

**Dependencies:** date-fns, calendar

```tsx
// components/ui/calendar-two-months-01.tsx
"use client"

import * as React from "react"
import { addDays } from "date-fns"
import { type DateRange } from "react-day-picker"

import { Calendar } from "@/components/ui/calendar"

export default function CalendarTwoMonths01() {
  const [range, setRange] = React.useState<DateRange | undefined>({
    from: new Date(),
    to: addDays(new Date(), 8),
  })

  return (
    <Calendar
      mode="range"
      selected={range}
      onSelect={setRange}
      numberOfMonths={2}
      defaultMonth={range?.from}
      className="rounded-md border shadow-sm"
    />
  )
}
```

---

### With presets

Quick-select buttons (Today / Tomorrow / In a week) beside the calendar, with a selected-date footer.

**Install:**

```bash
npx shadcn@latest add @designrevision/calendar-presets-01
```

**Dependencies:** date-fns, calendar, button

```tsx
// components/ui/calendar-presets-01.tsx
"use client"

import * as React from "react"
import { addDays, format } from "date-fns"

import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"

const presets = [
  { label: "Today", days: 0 },
  { label: "Tomorrow", days: 1 },
  { label: "In a week", days: 7 },
  { label: "In a month", days: 30 },
]

export default function CalendarPresets01() {
  const [date, setDate] = React.useState<Date | undefined>(new Date())
  const [month, setMonth] = React.useState<Date>(new Date())

  const selectPreset = (days: number) => {
    const next = addDays(new Date(), days)
    setDate(next)
    setMonth(next)
  }

  return (
    <div className="rounded-md border shadow-sm">
      <div className="flex max-sm:flex-col">
        <div className="flex flex-col gap-1 border-b p-2 sm:border-e sm:border-b-0">
          {presets.map((preset) => (
            <Button
              key={preset.label}
              variant="ghost"
              size="sm"
              className="justify-start font-normal"
              onClick={() => selectPreset(preset.days)}
            >
              {preset.label}
            </Button>
          ))}
        </div>
        <Calendar
          mode="single"
          selected={date}
          onSelect={setDate}
          month={month}
          onMonthChange={setMonth}
        />
      </div>
      <div className="border-t p-3 text-center text-sm">
        {date ? (
          <>
            Selected <span className="font-medium">{format(date, "PPP")}</span>
          </>
        ) : (
          "Pick a date"
        )}
      </div>
    </div>
  )
}
```

---

### Appointment booking

A booking flow — disabled past/weekend/booked days with a struck-through `booked` modifier and a time-slot panel.

**Install:**

```bash
npx shadcn@latest add @designrevision/calendar-booking-01
```

**Dependencies:** calendar, button

```tsx
// components/ui/calendar-booking-01.tsx
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"

const today = new Date()

// A few already-booked (unavailable) days over the next two weeks.
const bookedDates = [3, 5, 8, 11].map((offset) => {
  const date = new Date(today)
  date.setDate(today.getDate() + offset)
  return date
})

const timeSlots = [
  "9:00 AM",
  "9:30 AM",
  "10:00 AM",
  "10:30 AM",
  "11:00 AM",
  "1:00 PM",
  "1:30 PM",
  "2:00 PM",
]

export default function CalendarBooking01() {
  const [date, setDate] = React.useState<Date | undefined>()
  const [time, setTime] = React.useState<string | null>(null)

  return (
    <div className="rounded-md border shadow-sm">
      <div className="flex max-sm:flex-col">
        <Calendar
          mode="single"
          selected={date}
          onSelect={(value) => {
            setDate(value)
            setTime(null)
          }}
          disabled={[{ before: today }, { dayOfWeek: [0, 6] }, ...bookedDates]}
          modifiers={{ booked: bookedDates }}
          modifiersClassNames={{ booked: "[&>button]:line-through" }}
          className="p-2 sm:border-e"
        />
        <div className="w-full space-y-2 p-3 sm:w-44">
          <p className="text-sm font-medium">
            {date
              ? date.toLocaleDateString("en-US", {
                  weekday: "long",
                  month: "long",
                  day: "numeric",
                })
              : "Select a date"}
          </p>
          <div className="grid grid-cols-2 gap-2 sm:grid-cols-1">
            {timeSlots.map((slot) => (
              <Button
                key={slot}
                variant={time === slot ? "default" : "outline"}
                size="sm"
                disabled={!date}
                onClick={() => setTime(slot)}
              >
                {slot}
              </Button>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
```

---

# Shadcn Card

> Free shadcn/ui card component for React — a styled container with header, title, description, content, footer, and a top-right CardAction slot. Login, stats, pricing, image, and action-menu cards. The examples official shadcn never spelled out.

Source: https://designrevision.com/components/card

The **Shadcn Card** is the container everything else lives in — a styled surface with a header, content, and footer, plus a top-right **`CardAction`** slot. It's the canonical <a href="https://ui.shadcn.com/docs/components/card" rel="nofollow">shadcn/ui</a> card, with **no dependency**, and the component you'll reuse most: dashboards, pricing, auth, and settings all sit inside one.

## The parts

Seven plain, styled divs:

- **`Card`** — the surface (`rounded-xl border bg-card shadow-sm`, `py-6`, `gap-6`).
- **`CardHeader`** — a grid holding the title, description, and an optional action.
- **`CardTitle`** / **`CardDescription`** — the heading and subtext.
- **`CardAction`** — a top-right slot in the header (see below).
- **`CardContent`** — the body (`px-6`); put anything here.
- **`CardFooter`** — actions or meta (`px-6`, flex).

## CardAction — the top-right slot

`CardHeader` is a grid that **automatically makes room** for a `CardAction` (`has-data-[slot=card-action]:grid-cols-[1fr_auto]`), so the title/description flow left while a button, [Dropdown Menu](/components/dropdown-menu), or [Badge](/components/badge) stays pinned top-right. The Card, Stat cards, Pricing, and Action-menu examples all use it.

## It's a container

A Card has no opinion about its content — it's a surface you compose inside. That's why the examples below are really a tour of the rest of the library:

- **Forms** — a login card with [Input](/components/input) + [Label](/components/label) + [Button](/components/button) (the Login form example).
- **Stats** — a `CardDescription` label over a big `CardTitle` number with a trend [Badge](/components/badge) (the Stat cards example).
- **Settings** — labelled [Switch](/components/switch) rows (the Settings card example).
- **Data** — a list of rows with avatars and amounts (the Recent activity example).

## Pricing & media

A **pricing card** is a Card with a "Most popular" badge in `CardAction`, the price under the description, a check-listed feature set, and a CTA footer (the Pricing card example). For a **media card**, add `pt-0` + `overflow-hidden` to the Card and drop an image as the first child so it bleeds to the rounded top edge (the Card with image example).

## Footers & dividers

`CardFooter` is `flex items-center` — use `justify-between` for a split, or `flex-col gap-2` for stacked full-width buttons. To add a **divider**, put `border-b` on the header or `border-t` on the footer; the primitive's `[.border-b]:pb-6` / `[.border-t]:pt-6` adjust the padding for you.

## Theming

The Card reads your design tokens — `--card` / `--card-foreground` (the surface), `--border`, `--muted-foreground` (descriptions) — so it follows your theme, including dark mode, with no overrides. Restyle a single card with a className: `border-primary bg-transparent shadow-none` for an outline look, or drop the border for a flat surface.

## Installation

### card

**Install:**

```bash
npx shadcn@latest add @designrevision/card
```

**Dependencies:** utils

**Usage & accessibility:** Seven styled container parts (Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter) — plain divs, no dependency. CardHeader is a grid that makes room for a top-right CardAction (button or menu) automatically via has-data-[slot=card-action]. Add [.border-b] to the header or [.border-t] to the footer to get the divider padding. Compose anything inside CardContent — it's a container, not a fixed layout.

```tsx
// components/ui/card.tsx
import * as React from "react"

import { cn } from "@/lib/utils"

function Card({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card"
      className={cn(
        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
        className
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
        className
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-title"
      className={cn("leading-none font-semibold", className)}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-description"
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
        className
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-content"
      className={cn("px-6", className)}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-footer"
      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
}
```

## Examples

### Card

Every part in one place — a header with a `CardAction`, a content form, and a footer.

**Install:**

```bash
npx shadcn@latest add @designrevision/card-demo-01
```

**Dependencies:** card, button, input, label

```tsx
// components/ui/card-demo-01.tsx
import { Button } from "@/components/ui/button"
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function CardDemo01() {
  return (
    <Card className="w-[360px]">
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy your new project in one click.</CardDescription>
        <CardAction>
          <Button variant="outline" size="sm">
            Import
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent className="grid gap-4">
        <div className="grid gap-2">
          <Label htmlFor="project">Name</Label>
          <Input id="project" placeholder="Name of your project" />
        </div>
        <div className="grid gap-2">
          <Label htmlFor="framework">Framework</Label>
          <Input id="framework" placeholder="Next.js" />
        </div>
      </CardContent>
      <CardFooter className="justify-between">
        <Button variant="ghost">Cancel</Button>
        <Button>Deploy</Button>
      </CardFooter>
    </Card>
  )
}
```

---

### Login form

A sign-in card with email/password fields, a forgot-password link, and primary + OAuth [buttons](/components/button).

**Install:**

```bash
npx shadcn@latest add @designrevision/card-login-01
```

**Dependencies:** card, button, input, label

```tsx
// components/ui/card-login-01.tsx
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function CardLogin01() {
  return (
    <Card className="w-[360px]">
      <CardHeader>
        <CardTitle>Login to your account</CardTitle>
        <CardDescription>Enter your email below to sign in.</CardDescription>
      </CardHeader>
      <CardContent className="grid gap-4">
        <div className="grid gap-2">
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="m@example.com" />
        </div>
        <div className="grid gap-2">
          <div className="flex items-center justify-between">
            <Label htmlFor="password">Password</Label>
            <a
              href="#"
              className="text-sm underline-offset-4 hover:underline"
            >
              Forgot?
            </a>
          </div>
          <Input id="password" type="password" />
        </div>
      </CardContent>
      <CardFooter className="flex-col gap-2">
        <Button className="w-full">Sign in</Button>
        <Button variant="outline" className="w-full">
          Continue with Google
        </Button>
      </CardFooter>
    </Card>
  )
}
```

---

### Stat cards

A row of metric cards — a label, a big number, and a trend [Badge](/components/badge) in the `CardAction` slot.

**Install:**

```bash
npx shadcn@latest add @designrevision/card-stats-01
```

**Dependencies:** lucide-react, card, badge

```tsx
// components/ui/card-stats-01.tsx
import { TrendingDownIcon, TrendingUpIcon } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import {
  Card,
  CardAction,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

const stats = [
  { label: "Total Revenue", value: "$45,231.89", change: "+20.1%", up: true },
  { label: "Subscriptions", value: "+2,350", change: "+180.1%", up: true },
  { label: "Churn rate", value: "1.2%", change: "-0.4%", up: false },
]

export default function CardStats01() {
  return (
    <div className="grid gap-4 sm:grid-cols-3">
      {stats.map((stat) => (
        <Card key={stat.label} className="gap-2">
          <CardHeader>
            <CardDescription>{stat.label}</CardDescription>
            <CardTitle className="text-2xl tabular-nums">{stat.value}</CardTitle>
            <CardAction>
              <Badge variant="secondary" className="gap-1">
                {stat.up ? (
                  <TrendingUpIcon className="size-3" />
                ) : (
                  <TrendingDownIcon className="size-3" />
                )}
                {stat.change}
              </Badge>
            </CardAction>
          </CardHeader>
        </Card>
      ))}
    </div>
  )
}
```

---

### Settings card

A notifications card with labelled [Switch](/components/switch) rows — the toggleable-settings panel.

**Install:**

```bash
npx shadcn@latest add @designrevision/card-notifications-01
```

**Dependencies:** card, label, switch

```tsx
// components/ui/card-notifications-01.tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

const settings = [
  { id: "comments", label: "Comments", desc: "When someone comments on your post.", checked: true },
  { id: "mentions", label: "Mentions", desc: "When someone @mentions you.", checked: true },
  { id: "follows", label: "Follows", desc: "When you gain a new follower.", checked: false },
]

export default function CardNotifications01() {
  return (
    <Card className="w-[400px]">
      <CardHeader>
        <CardTitle>Notifications</CardTitle>
        <CardDescription>
          Choose what you want to be notified about.
        </CardDescription>
      </CardHeader>
      <CardContent className="grid gap-5">
        {settings.map((setting) => (
          <div
            key={setting.id}
            className="flex items-center justify-between gap-4"
          >
            <div className="space-y-0.5">
              <Label htmlFor={setting.id}>{setting.label}</Label>
              <p className="text-muted-foreground text-xs">{setting.desc}</p>
            </div>
            <Switch id={setting.id} defaultChecked={setting.checked} />
          </div>
        ))}
      </CardContent>
    </Card>
  )
}
```

---

### Pricing card

A pricing tier — a "Most popular" [Badge](/components/badge), a price, a check-listed feature set, and a CTA.

**Install:**

```bash
npx shadcn@latest add @designrevision/card-pricing-01
```

**Dependencies:** lucide-react, card, badge, button

```tsx
// components/ui/card-pricing-01.tsx
import { CheckIcon } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

const features = [
  "Unlimited projects",
  "Advanced analytics",
  "24/7 priority support",
  "Custom domains",
  "Team collaboration",
]

export default function CardPricing01() {
  return (
    <Card className="w-[340px]">
      <CardHeader>
        <CardAction>
          <Badge>Most popular</Badge>
        </CardAction>
        <CardTitle>Pro</CardTitle>
        <CardDescription>For growing teams that need more.</CardDescription>
        <div className="pt-2">
          <span className="text-3xl font-bold">$29</span>
          <span className="text-muted-foreground"> / month</span>
        </div>
      </CardHeader>
      <CardContent>
        <ul className="grid gap-2 text-sm">
          {features.map((feature) => (
            <li key={feature} className="flex items-center gap-2">
              <CheckIcon className="text-primary size-4 shrink-0" />
              {feature}
            </li>
          ))}
        </ul>
      </CardContent>
      <CardFooter>
        <Button className="w-full">Get started</Button>
      </CardFooter>
    </Card>
  )
}
```

---

### Card with image

A media card whose image bleeds to the top edge via `pt-0` + `overflow-hidden`, with a price/CTA footer.

**Install:**

```bash
npx shadcn@latest add @designrevision/card-image-01
```

**Dependencies:** card, button

```tsx
// components/ui/card-image-01.tsx
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export default function CardImage01() {
  return (
    <Card className="w-[340px] gap-0 overflow-hidden pt-0">
      {/* Swap this for an <img> or next/image. */}
      <div className="aspect-video bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500" />
      <CardHeader className="pt-6">
        <CardTitle>Mountain Retreat</CardTitle>
        <CardDescription>A quiet cabin in the Dolomites.</CardDescription>
      </CardHeader>
      <CardContent className="text-muted-foreground pt-2 text-sm">
        Two nights, breakfast included. Free cancellation up to 48 hours before
        check-in.
      </CardContent>
      <CardFooter className="justify-between pt-6">
        <span className="font-semibold">
          $240{" "}
          <span className="text-muted-foreground text-sm font-normal">
            / night
          </span>
        </span>
        <Button>Book now</Button>
      </CardFooter>
    </Card>
  )
}
```

---

### Action menu

A `CardAction` holding a "⋮" [Dropdown Menu](/components/dropdown-menu) in the top-right of the header.

**Install:**

```bash
npx shadcn@latest add @designrevision/card-action-01
```

**Dependencies:** lucide-react, card, button, dropdown-menu

```tsx
// components/ui/card-action-01.tsx
import {
  MoreVerticalIcon,
  PencilIcon,
  ShareIcon,
  Trash2Icon,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function CardAction01() {
  return (
    <Card className="w-[360px]">
      <CardHeader>
        <CardTitle>Design System</CardTitle>
        <CardDescription>Last edited 2 hours ago by Ada.</CardDescription>
        <CardAction>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                variant="ghost"
                size="icon"
                className="size-8"
                aria-label="Open menu"
              >
                <MoreVerticalIcon />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem>
                <PencilIcon />
                Edit
              </DropdownMenuItem>
              <DropdownMenuItem>
                <ShareIcon />
                Share
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem variant="destructive">
                <Trash2Icon />
                Delete
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </CardAction>
      </CardHeader>
      <CardContent className="text-muted-foreground text-sm">
        A shared library of tokens, components, and guidelines for the product
        team.
      </CardContent>
    </Card>
  )
}
```

---

### Recent activity

A data card listing recent sales — an initials avatar, name/email, and a right-aligned amount.

**Install:**

```bash
npx shadcn@latest add @designrevision/card-data-01
```

**Dependencies:** card, avatar

```tsx
// components/ui/card-data-01.tsx
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

const sales = [
  { name: "Olivia Martin", email: "olivia@example.com", amount: "+$1,999.00", initials: "OM" },
  { name: "Jackson Lee", email: "jackson@example.com", amount: "+$39.00", initials: "JL" },
  { name: "Isabella Nguyen", email: "isabella@example.com", amount: "+$299.00", initials: "IN" },
  { name: "William Kim", email: "will@example.com", amount: "+$99.00", initials: "WK" },
]

export default function CardData01() {
  return (
    <Card className="w-[400px]">
      <CardHeader>
        <CardTitle>Recent sales</CardTitle>
        <CardDescription>You made 265 sales this month.</CardDescription>
      </CardHeader>
      <CardContent className="grid gap-5">
        {sales.map((sale) => (
          <div key={sale.email} className="flex items-center gap-3">
            <Avatar className="size-9">
              <AvatarFallback className="text-xs">{sale.initials}</AvatarFallback>
            </Avatar>
            <div className="grid gap-0.5">
              <p className="text-sm font-medium leading-none">{sale.name}</p>
              <p className="text-muted-foreground text-xs">{sale.email}</p>
            </div>
            <span className="ml-auto text-sm font-medium tabular-nums">
              {sale.amount}
            </span>
          </div>
        ))}
      </CardContent>
    </Card>
  )
}
```

---

# Shadcn Carousel

> Free shadcn/ui carousel for React — built on Embla. Image and product carousels, multiple slides per view, vertical orientation, dot indicators, autoplay, and a synced thumbnail strip.

Source: https://designrevision.com/components/carousel

The **Shadcn Carousel** is a slider built on <a href="https://www.embla-carousel.com/" rel="nofollow">**Embla**</a> — the lightweight, dependency-free carousel engine. You compose it from a few parts, and Embla handles the dragging, snapping, and momentum. The examples below go well beyond the basics: **image** and **product** carousels, multiple-per-view, vertical, dot indicators, autoplay, and a synced **thumbnail** strip.

## Built on Embla

Install the engine:

```bash
npm install embla-carousel-react
```

Then compose the carousel:

```tsx
<Carousel>
  <CarouselContent>
    <CarouselItem>…</CarouselItem>
    <CarouselItem>…</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>
```

Each `CarouselItem` is full-width by default. Pass Embla **options** through `opts` (e.g. `{ loop: true, align: "start" }`) and Embla **plugins** through `plugins`.

## Image carousel

The most-searched use — put an image in each slide and let it loop:

```tsx
<Carousel opts={{ loop: true }}>
  <CarouselContent>
    {images.map((src) => (
      <CarouselItem key={src}>
        <img src={src} alt="" className="aspect-video w-full rounded-lg object-cover" />
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>
```

The **Image carousel** example is a ready-to-use looping photo slider, and **Thumbnails** pairs the main image with a clickable thumbnail strip.

## Multiple slides per view

Set a `basis` fraction on each item — `basis-1/3` shows three at a time, `basis-1/2` shows two. Add responsive variants to change the count by breakpoint:

```tsx
<CarouselItem className="basis-1/2 md:basis-1/3">…</CarouselItem>
```

The **Product carousel** uses this for an e-commerce row of cards.

## Vertical

Set `orientation="vertical"` and give the content a height:

```tsx
<Carousel orientation="vertical">
  <CarouselContent className="h-[260px]">…</CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>
```

The arrows automatically move to the top and bottom.

## Dots & the API

Pass `setApi` to get Embla's API, then drive a dot row from it:

```tsx
const [api, setApi] = React.useState<CarouselApi>()
React.useEffect(() => {
  if (!api) return
  setCount(api.scrollSnapList().length)
  api.on("select", () => setCurrent(api.selectedScrollSnap()))
}, [api])
```

Render a dot per snap and call `api.scrollTo(i)` on click — the **Dot indicators** example.

## Autoplay

Install `embla-carousel-autoplay` and pass it as a plugin, pausing on hover:

```tsx
const plugin = React.useRef(Autoplay({ delay: 2000 }))
<Carousel
  plugins={[plugin.current]}
  onMouseEnter={plugin.current.stop}
  onMouseLeave={plugin.current.reset}
>
```

## Accessibility

The carousel is a labelled region (`role="region"`, `aria-roledescription="carousel"`) and each slide is a `group` with `aria-roledescription="slide"`. The arrow buttons carry screen-reader labels, and **Left / Right arrow keys** scroll it when focused. Provide meaningful `alt` text on slide images.

## Installation

### carousel

**Install:**

```bash
npx shadcn@latest add @designrevision/carousel
```

**Dependencies:** embla-carousel-react, utils, button

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| orientation | "horizontal" \| "vertical" | "horizontal" | Scroll axis of the carousel. |
| opts | EmblaOptionsType | — | Embla options — e.g. { loop: true, align: "start" }. |
| plugins | EmblaPluginType[] | — | Embla plugins, e.g. Autoplay() from embla-carousel-autoplay. |
| setApi | (api: CarouselApi) => void | — | Receive the Embla API to read/drive the carousel (dots, current slide). |

**Usage & accessibility:** A carousel built on Embla — compose <Carousel> with <CarouselContent> wrapping <CarouselItem>s, plus <CarouselPrevious> / <CarouselNext>. Each item is basis-full by default; set basis-1/2 or basis-1/3 on CarouselItem to show multiple per view. Pass opts (e.g. { loop: true }), orientation for a vertical carousel, plugins (Autoplay) for autoplay, and setApi to read the Embla API for dot indicators or the current slide. Arrow keys scroll it; slides carry the right ARIA roles.

```tsx
// components/ui/carousel.tsx
"use client"

import * as React from "react"
import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from "embla-carousel-react"
import { ArrowLeft, ArrowRight } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]

type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin
  orientation?: "horizontal" | "vertical"
  setApi?: (api: CarouselApi) => void
}

type CarouselContextProps = {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
  api: ReturnType<typeof useEmblaCarousel>[1]
  scrollPrev: () => void
  scrollNext: () => void
  canScrollPrev: boolean
  canScrollNext: boolean
} & CarouselProps

const CarouselContext = React.createContext<CarouselContextProps | null>(null)

function useCarousel() {
  const context = React.useContext(CarouselContext)

  if (!context) {
    throw new Error("useCarousel must be used within a <Carousel />")
  }

  return context
}

function Carousel({
  orientation = "horizontal",
  opts,
  setApi,
  plugins,
  className,
  children,
  ...props
}: React.ComponentProps<"div"> & CarouselProps) {
  const [carouselRef, api] = useEmblaCarousel(
    {
      ...opts,
      axis: orientation === "horizontal" ? "x" : "y",
    },
    plugins
  )
  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
  const [canScrollNext, setCanScrollNext] = React.useState(false)

  const onSelect = React.useCallback((api: CarouselApi) => {
    if (!api) return
    setCanScrollPrev(api.canScrollPrev())
    setCanScrollNext(api.canScrollNext())
  }, [])

  const scrollPrev = React.useCallback(() => {
    api?.scrollPrev()
  }, [api])

  const scrollNext = React.useCallback(() => {
    api?.scrollNext()
  }, [api])

  const handleKeyDown = React.useCallback(
    (event: React.KeyboardEvent<HTMLDivElement>) => {
      if (event.key === "ArrowLeft") {
        event.preventDefault()
        scrollPrev()
      } else if (event.key === "ArrowRight") {
        event.preventDefault()
        scrollNext()
      }
    },
    [scrollPrev, scrollNext]
  )

  React.useEffect(() => {
    if (!api || !setApi) return
    setApi(api)
  }, [api, setApi])

  React.useEffect(() => {
    if (!api) return
    onSelect(api)
    api.on("reInit", onSelect)
    api.on("select", onSelect)

    return () => {
      api?.off("select", onSelect)
    }
  }, [api, onSelect])

  return (
    <CarouselContext.Provider
      value={{
        carouselRef,
        api: api,
        opts,
        orientation:
          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
        scrollPrev,
        scrollNext,
        canScrollPrev,
        canScrollNext,
      }}
    >
      <div
        onKeyDownCapture={handleKeyDown}
        className={cn("relative", className)}
        role="region"
        aria-roledescription="carousel"
        data-slot="carousel"
        {...props}
      >
        {children}
      </div>
    </CarouselContext.Provider>
  )
}

function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
  const { carouselRef, orientation } = useCarousel()

  return (
    <div
      ref={carouselRef}
      className="overflow-hidden"
      data-slot="carousel-content"
    >
      <div
        className={cn(
          "flex",
          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
          className
        )}
        {...props}
      />
    </div>
  )
}

function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
  const { orientation } = useCarousel()

  return (
    <div
      role="group"
      aria-roledescription="slide"
      data-slot="carousel-item"
      className={cn(
        "min-w-0 shrink-0 grow-0 basis-full",
        orientation === "horizontal" ? "pl-4" : "pt-4",
        className
      )}
      {...props}
    />
  )
}

function CarouselPrevious({
  className,
  variant = "outline",
  size = "icon",
  ...props
}: React.ComponentProps<typeof Button>) {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel()

  return (
    <Button
      data-slot="carousel-previous"
      variant={variant}
      size={size}
      className={cn(
        "absolute size-8 rounded-full",
        orientation === "horizontal"
          ? "top-1/2 -left-12 -translate-y-1/2"
          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
      {...props}
    >
      <ArrowLeft />
      <span className="sr-only">Previous slide</span>
    </Button>
  )
}

function CarouselNext({
  className,
  variant = "outline",
  size = "icon",
  ...props
}: React.ComponentProps<typeof Button>) {
  const { orientation, scrollNext, canScrollNext } = useCarousel()

  return (
    <Button
      data-slot="carousel-next"
      variant={variant}
      size={size}
      className={cn(
        "absolute size-8 rounded-full",
        orientation === "horizontal"
          ? "top-1/2 -right-12 -translate-y-1/2"
          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollNext}
      onClick={scrollNext}
      {...props}
    >
      <ArrowRight />
      <span className="sr-only">Next slide</span>
    </Button>
  )
}

export {
  type CarouselApi,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
}
```

## Examples

### Basic

The canonical carousel — slides with previous/next arrows, one per view.

**Install:**

```bash
npx shadcn@latest add @designrevision/carousel-demo-01
```

**Dependencies:** carousel, card

```tsx
// components/ui/carousel-demo-01.tsx
import { Card, CardContent } from "@/components/ui/card"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

export default function CarouselDemo01() {
  return (
    <Carousel className="w-full max-w-xs">
      <CarouselContent>
        {Array.from({ length: 5 }).map((_, i) => (
          <CarouselItem key={i}>
            <Card>
              <CardContent className="flex aspect-square items-center justify-center p-6">
                <span className="text-4xl font-semibold">{i + 1}</span>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}
```

---

### Multiple per view

Show several slides at once — `basis-1/3` on CarouselItem with `align: "start"`.

**Install:**

```bash
npx shadcn@latest add @designrevision/carousel-sizes-01
```

**Dependencies:** carousel, card

```tsx
// components/ui/carousel-sizes-01.tsx
import { Card, CardContent } from "@/components/ui/card"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

export default function CarouselSizes01() {
  return (
    <Carousel opts={{ align: "start" }} className="w-full max-w-sm">
      <CarouselContent>
        {Array.from({ length: 6 }).map((_, i) => (
          <CarouselItem key={i} className="basis-1/3">
            <Card>
              <CardContent className="flex aspect-square items-center justify-center p-6">
                <span className="text-2xl font-semibold">{i + 1}</span>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}
```

---

### Vertical

A vertical carousel — `orientation="vertical"` with a fixed-height content area.

**Install:**

```bash
npx shadcn@latest add @designrevision/carousel-vertical-01
```

**Dependencies:** carousel, card

```tsx
// components/ui/carousel-vertical-01.tsx
import { Card, CardContent } from "@/components/ui/card"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

export default function CarouselVertical01() {
  return (
    <Carousel
      orientation="vertical"
      opts={{ align: "start" }}
      className="w-full max-w-xs"
    >
      <CarouselContent className="h-[260px]">
        {Array.from({ length: 5 }).map((_, i) => (
          <CarouselItem key={i} className="basis-1/2">
            <Card>
              <CardContent className="flex items-center justify-center p-6">
                <span className="text-3xl font-semibold">{i + 1}</span>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}
```

---

### Dot indicators

Dot navigation and the current slide, read from the Embla API via `setApi`.

**Install:**

```bash
npx shadcn@latest add @designrevision/carousel-dots-01
```

**Dependencies:** carousel, card

```tsx
// components/ui/carousel-dots-01.tsx
"use client"

import * as React from "react"

import { cn } from "@/lib/utils"
import { Card, CardContent } from "@/components/ui/card"
import {
  Carousel,
  type CarouselApi,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

export default function CarouselDots01() {
  const [api, setApi] = React.useState<CarouselApi>()
  const [current, setCurrent] = React.useState(0)
  const [count, setCount] = React.useState(0)

  React.useEffect(() => {
    if (!api) return
    setCount(api.scrollSnapList().length)
    setCurrent(api.selectedScrollSnap())
    api.on("select", () => setCurrent(api.selectedScrollSnap()))
  }, [api])

  return (
    <div className="w-full max-w-xs">
      <Carousel setApi={setApi}>
        <CarouselContent>
          {Array.from({ length: 5 }).map((_, i) => (
            <CarouselItem key={i}>
              <Card>
                <CardContent className="flex aspect-square items-center justify-center p-6">
                  <span className="text-4xl font-semibold">{i + 1}</span>
                </CardContent>
              </Card>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
      <div className="mt-4 flex items-center justify-center gap-2">
        {Array.from({ length: count }).map((_, i) => (
          <button
            key={i}
            onClick={() => api?.scrollTo(i)}
            aria-label={`Go to slide ${i + 1}`}
            className={cn(
              "size-2 rounded-full transition-colors",
              i === current ? "bg-primary" : "bg-primary/30"
            )}
          />
        ))}
      </div>
    </div>
  )
}
```

---

### Autoplay

Auto-advancing slides with the `embla-carousel-autoplay` plugin, pausing on hover.

**Install:**

```bash
npx shadcn@latest add @designrevision/carousel-autoplay-01
```

**Dependencies:** embla-carousel-autoplay, carousel, card

```tsx
// components/ui/carousel-autoplay-01.tsx
"use client"

import * as React from "react"
import Autoplay from "embla-carousel-autoplay"

import { Card, CardContent } from "@/components/ui/card"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

export default function CarouselAutoplay01() {
  const plugin = React.useRef(
    Autoplay({ delay: 2000, stopOnInteraction: true })
  )

  return (
    <Carousel
      plugins={[plugin.current]}
      className="w-full max-w-xs"
      onMouseEnter={plugin.current.stop}
      onMouseLeave={plugin.current.reset}
    >
      <CarouselContent>
        {Array.from({ length: 5 }).map((_, i) => (
          <CarouselItem key={i}>
            <Card>
              <CardContent className="flex aspect-square items-center justify-center p-6">
                <span className="text-4xl font-semibold">{i + 1}</span>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}
```

---

### Image carousel

A looping image carousel — aspect-video photos that slide with the arrows.

**Install:**

```bash
npx shadcn@latest add @designrevision/carousel-images-01
```

**Dependencies:** carousel

```tsx
// components/ui/carousel-images-01.tsx
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

const images = [10, 20, 30, 40, 50]

export default function CarouselImages01() {
  return (
    <Carousel opts={{ loop: true }} className="w-full max-w-md">
      <CarouselContent>
        {images.map((seed, i) => (
          <CarouselItem key={seed}>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={`https://picsum.photos/seed/${seed}/640/360`}
              alt={`Slide ${i + 1}`}
              className="aspect-video w-full rounded-lg object-cover"
            />
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}
```

---

### Product carousel

Image cards with name and price, two per view — the e-commerce pattern.

**Install:**

```bash
npx shadcn@latest add @designrevision/carousel-product-01
```

**Dependencies:** carousel, card

```tsx
// components/ui/carousel-product-01.tsx
import { Card, CardContent } from "@/components/ui/card"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

const products = [
  { id: 101, name: "Aergo Headphones", price: "$129" },
  { id: 102, name: "Lumen Desk Lamp", price: "$59" },
  { id: 103, name: "Terra Mug", price: "$24" },
  { id: 104, name: "Nimbus Backpack", price: "$89" },
  { id: 105, name: "Pulse Watch", price: "$199" },
]

export default function CarouselProduct01() {
  return (
    <Carousel opts={{ align: "start" }} className="w-full max-w-md">
      <CarouselContent>
        {products.map((product) => (
          <CarouselItem key={product.id} className="basis-1/2">
            <Card className="overflow-hidden p-0">
              <CardContent className="p-0">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={`https://picsum.photos/seed/${product.id}/400/400`}
                  alt={product.name}
                  className="aspect-square w-full object-cover"
                />
                <div className="space-y-1 p-3">
                  <h3 className="text-sm leading-none font-medium">
                    {product.name}
                  </h3>
                  <p className="text-muted-foreground text-sm">
                    {product.price}
                  </p>
                </div>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}
```

---

### Thumbnails

A main image carousel synced to a thumbnail strip — two Embla instances driving each other.

**Install:**

```bash
npx shadcn@latest add @designrevision/carousel-thumbnails-01
```

**Dependencies:** carousel

```tsx
// components/ui/carousel-thumbnails-01.tsx
"use client"

import * as React from "react"

import { cn } from "@/lib/utils"
import {
  Carousel,
  type CarouselApi,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel"

const images = [11, 22, 33, 44, 55]

export default function CarouselThumbnails01() {
  const [mainApi, setMainApi] = React.useState<CarouselApi>()
  const [thumbApi, setThumbApi] = React.useState<CarouselApi>()
  const [current, setCurrent] = React.useState(0)

  const onThumbClick = React.useCallback(
    (index: number) => mainApi?.scrollTo(index),
    [mainApi]
  )

  React.useEffect(() => {
    if (!mainApi) return
    const onSelect = () => {
      const index = mainApi.selectedScrollSnap()
      setCurrent(index)
      thumbApi?.scrollTo(index)
    }
    onSelect()
    mainApi.on("select", onSelect)
    return () => {
      mainApi.off("select", onSelect)
    }
  }, [mainApi, thumbApi])

  return (
    <div className="w-full max-w-md space-y-3">
      <Carousel setApi={setMainApi} opts={{ loop: true }}>
        <CarouselContent>
          {images.map((seed, i) => (
            <CarouselItem key={seed}>
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={`https://picsum.photos/seed/${seed}/640/360`}
                alt={`Slide ${i + 1}`}
                className="aspect-video w-full rounded-lg object-cover"
              />
            </CarouselItem>
          ))}
        </CarouselContent>
      </Carousel>
      <Carousel
        setApi={setThumbApi}
        opts={{ containScroll: "keepSnaps", dragFree: true }}
      >
        <CarouselContent className="-ml-2">
          {images.map((seed, i) => (
            <CarouselItem key={seed} className="basis-1/5 pl-2">
              <button
                onClick={() => onThumbClick(i)}
                className={cn(
                  "overflow-hidden rounded-md border-2 transition-colors",
                  i === current ? "border-primary" : "border-transparent"
                )}
              >
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={`https://picsum.photos/seed/${seed}/120/80`}
                  alt={`Thumbnail ${i + 1}`}
                  className="aspect-video w-full object-cover"
                />
              </button>
            </CarouselItem>
          ))}
        </CarouselContent>
      </Carousel>
    </div>
  )
}
```

---

# Shadcn Charts

> Free shadcn/ui charts for React — composable chart components built on Recharts and themed with CSS variables for automatic dark mode. Bar, line, area, and pie/donut charts with themed tooltips, legends, and production-ready loading, empty, and accessible states.

Source: https://designrevision.com/components/chart

The **Shadcn Charts** are a set of **composable** chart components built on <a href="https://recharts.org/" rel="nofollow">Recharts</a> and themed with **CSS variables** — so every chart picks up your design system and **re-themes for dark mode automatically**. You don't get one rigid `<Chart>`; you compose a `ChartContainer` with standard Recharts elements, and the shadcn layer adds the styling, tooltips, and legends. The examples above sample each type plus the production-ready states; the per-type pages have the full set.

## Built on Recharts

Install the component and Recharts comes with it:

```bash
npx shadcn add chart
```

Inside, you write **ordinary Recharts** — `BarChart`, `LineChart`, `AreaChart`, `PieChart` — wrapped in `ChartContainer`. Recharts handles the geometry; shadcn handles the look.

## The ChartContainer system

Two pieces do the work: a **`ChartConfig`** that maps each data key to a label and color, and **`ChartContainer`** that provides it and renders a responsive chart:

```tsx
const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig

<ChartContainer config={chartConfig}>
  <BarChart data={chartData}>
    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
  </BarChart>
</ChartContainer>
```

## Theming & automatic dark mode

This is the headline. Colors live in **five CSS variables** — `--chart-1` … `--chart-5` — in your `globals.css`. Your `ChartConfig` points each series at one (`var(--chart-1)`), `ChartContainer` turns that into a scoped `--color-<key>` variable, and your series reference it (`fill="var(--color-desktop)"`).

Because they're CSS variables, you set a **second palette under `.dark`** and **every chart re-themes for dark mode with zero JavaScript**:

```css
:root  { --chart-1: oklch(0.646 0.222 41.116); /* … */ }
.dark  { --chart-1: oklch(0.488 0.243 264.376); /* … */ }
```

No other popular charting library does dark mode this cleanly — Recharts, Chart.js, and Nivo all need manual color swapping on theme change.

## Themed tooltips & legends

Drop in the shadcn tooltip and legend and they read your config automatically:

```tsx
<ChartTooltip content={<ChartTooltipContent />} />
<ChartLegend content={<ChartLegendContent />} />
```

`ChartTooltipContent` supports `dot`, `line`, and `dashed` indicators, `hideLabel`, custom formatters, and icons.

## Chart types

Each type has its own page with the full variant set plus loading, empty, and accessible states:

- **[Bar Chart](/components/bar-chart)** — grouped, stacked, horizontal, interactive.
- **[Line Chart](/components/line-chart)** — linear, multiple, custom dots, interactive.
- **[Area Chart](/components/area-chart)** — stacked, gradient, legend, interactive.
- **[Pie / Donut Chart](/components/pie-chart)** — donut, donut-with-text, labels, interactive.

## Production-ready

Real dashboards aren't just static data. Every chart type ships the states most libraries skip:

- **Loading** — a skeleton shaped like the chart.
- **Empty** — a graceful no-data state instead of a blank canvas.
- **Accessible** — `accessibilityLayer` for keyboard nav, `role`/`aria-label`, and a visually-hidden data table for screen readers.

## Responsiveness

`ChartContainer` uses a Recharts `ResponsiveContainer`, so charts fill their parent. The one gotcha: **give the container a height** — keep the default `aspect-video`, or set `h-[250px]` / `min-h-*`. With no height, the container measures zero and nothing renders.

## Installation

### chart

**Install:**

```bash
npx shadcn@latest add @designrevision/chart
```

**Dependencies:** recharts, utils, card

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| config * | ChartConfig | — | Maps each data key to { label, icon?, color }. Colors become --color-<key> CSS vars. |
| children * | React.ReactElement (a Recharts chart) | — | A single Recharts chart (BarChart, LineChart, …) — ChartContainer wraps it in a ResponsiveContainer. |

`*` required.

**Usage & accessibility:** A Recharts wrapper themed with CSS variables. Pass a `config` (ChartConfig: each data key → { label, icon?, color }) to <ChartContainer>; it injects --color-<key> vars (scoped per light/dark theme) that your Recharts series reference as fill="var(--color-desktop)". Use <ChartTooltip content={<ChartTooltipContent />}> and <ChartLegend content={<ChartLegendContent />}> for themed tooltips/legends. Colors default to the --chart-1..5 tokens, which re-theme automatically in dark mode. The container needs a height — keep aspect-video / min-h-* or ResponsiveContainer measures 0. This is the base primitive; the Bar/Line/Area/Pie/Radar/Radial chart pages compose it.

```tsx
// components/ui/chart.tsx
"use client"

import * as React from "react"
import * as RechartsPrimitive from "recharts"

import { cn } from "@/lib/utils"

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

  if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

  return context
}

function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
}: React.ComponentProps<"div"> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >["children"]
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`

  return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme || config.color
  )

  if (!colorConfig.length) {
    return null
  }

  return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
}
`
          )
          .join("\n"),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = "dot",
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<"div"> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    indicator?: "line" | "dot" | "dashed"
    nameKey?: string
    labelKey?: string
  }) {
  const { config } = useChart()

  const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
      return null
    }

    const [item] = payload
    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
    const itemConfig = getPayloadConfigFromPayload(config, item, key)
    const value =
      !labelKey && typeof label === "string"
        ? config[label as keyof typeof config]?.label || label
        : itemConfig?.label

    if (labelFormatter) {
      return (
        <div className={cn("font-medium", labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      )
    }

    if (!value) {
      return null
    }

    return <div className={cn("font-medium", labelClassName)}>{value}</div>
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ])

  if (!active || !payload?.length) {
    return null
  }

  const nestLabel = payload.length === 1 && indicator !== "dot"

  return (
    <div
      className={cn(
        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
        className
      )}
    >
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-1.5">
        {payload
          .filter((item) => item.type !== "none")
          .map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

            return (
              <div
                key={item.dataKey}
                className={cn(
                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                            {
                              "h-2.5 w-2.5": indicator === "dot",
                              "w-1": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="text-foreground font-mono font-medium tabular-nums">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
      </div>
    </div>
  )
}

const ChartLegend = RechartsPrimitive.Legend

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = "bottom",
  nameKey,
}: React.ComponentProps<"div"> &
  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
    hideIcon?: boolean
    nameKey?: string
  }) {
  const { config } = useChart()

  if (!payload?.length) {
    return null
  }

  return (
    <div
      className={cn(
        "flex items-center justify-center gap-4",
        verticalAlign === "top" ? "pb-3" : "pt-3",
        className
      )}
    >
      {payload
        .filter((item) => item.type !== "none")
        .map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

          return (
            <div
              key={item.value}
              className={cn(
                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
              )}
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
    </div>
  )
}

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

  const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

  let configLabelKey: string = key

  if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

  return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
```

## Examples

### Bar Chart

A single-series bar chart with a themed tooltip and rounded bars.

**Install:**

```bash
npx shadcn@latest add @designrevision/bar-chart-demo-01
```

**Dependencies:** recharts, lucide-react, chart, card

```tsx
// components/ui/bar-chart-demo-01.tsx
"use client"

import { TrendingUp } from "lucide-react"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "var(--chart-1)",
  },
} satisfies ChartConfig

export default function BarChartDemo01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Bar Chart</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <BarChart accessibilityLayer data={chartData}>
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              tickMargin={10}
              axisLine={false}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel />}
            />
            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
          </BarChart>
        </ChartContainer>
      </CardContent>
      <CardFooter className="flex-col items-start gap-2 text-sm">
        <div className="flex gap-2 leading-none font-medium">
          Trending up by 5.2% this month <TrendingUp className="size-4" />
        </div>
        <div className="text-muted-foreground leading-none">
          Showing total visitors for the last 6 months
        </div>
      </CardFooter>
    </Card>
  )
}
```

---

### Line Chart

Two monotone lines with a legend — time-series trends.

**Install:**

```bash
npx shadcn@latest add @designrevision/line-chart-multiple-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/line-chart-multiple-01.tsx
"use client"

import { CartesianGrid, Line, LineChart, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function LineChartMultiple01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Line Chart — Multiple</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <LineChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 12, right: 12 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
            <ChartLegend content={<ChartLegendContent />} />
            <Line
              dataKey="desktop"
              type="monotone"
              stroke="var(--color-desktop)"
              strokeWidth={2}
              dot={false}
            />
            <Line
              dataKey="mobile"
              type="monotone"
              stroke="var(--color-mobile)"
              strokeWidth={2}
              dot={false}
            />
          </LineChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Area Chart

Stacked areas with gradient fills built from `linearGradient` defs.

**Install:**

```bash
npx shadcn@latest add @designrevision/area-chart-gradient-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/area-chart-gradient-01.tsx
"use client"

import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function AreaChartGradient01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Area Chart — Gradient</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <AreaChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 12, right: 12 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
            <defs>
              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
                <stop
                  offset="5%"
                  stopColor="var(--color-desktop)"
                  stopOpacity={0.8}
                />
                <stop
                  offset="95%"
                  stopColor="var(--color-desktop)"
                  stopOpacity={0.1}
                />
              </linearGradient>
              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
                <stop
                  offset="5%"
                  stopColor="var(--color-mobile)"
                  stopOpacity={0.8}
                />
                <stop
                  offset="95%"
                  stopColor="var(--color-mobile)"
                  stopOpacity={0.1}
                />
              </linearGradient>
            </defs>
            <Area
              dataKey="mobile"
              type="natural"
              fill="url(#fillMobile)"
              fillOpacity={0.4}
              stroke="var(--color-mobile)"
              stackId="a"
            />
            <Area
              dataKey="desktop"
              type="natural"
              fill="url(#fillDesktop)"
              fillOpacity={0.4}
              stroke="var(--color-desktop)"
              stackId="a"
            />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Pie / Donut Chart

A donut with a centered total — part-to-whole breakdowns.

**Install:**

```bash
npx shadcn@latest add @designrevision/pie-chart-donut-text-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/pie-chart-donut-text-01.tsx
"use client"

import * as React from "react"
import { Label, Pie, PieChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
  { browser: "other", visitors: 90, fill: "var(--color-other)" },
]

const chartConfig = {
  visitors: { label: "Visitors" },
  chrome: { label: "Chrome", color: "var(--chart-1)" },
  safari: { label: "Safari", color: "var(--chart-2)" },
  firefox: { label: "Firefox", color: "var(--chart-3)" },
  edge: { label: "Edge", color: "var(--chart-4)" },
  other: { label: "Other", color: "var(--chart-5)" },
} satisfies ChartConfig

export default function PieChartDonutText01() {
  const totalVisitors = React.useMemo(
    () => chartData.reduce((acc, curr) => acc + curr.visitors, 0),
    []
  )

  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-0">
        <CardTitle>Pie Chart — Donut with Text</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent className="flex-1 pb-0">
        <ChartContainer
          config={chartConfig}
          className="mx-auto aspect-square max-h-[250px]"
        >
          <PieChart>
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel />}
            />
            <Pie
              data={chartData}
              dataKey="visitors"
              nameKey="browser"
              innerRadius={60}
              strokeWidth={5}
            >
              <Label
                content={({ viewBox }) => {
                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                    return (
                      <text
                        x={viewBox.cx}
                        y={viewBox.cy}
                        textAnchor="middle"
                        dominantBaseline="middle"
                      >
                        <tspan
                          x={viewBox.cx}
                          y={viewBox.cy}
                          className="fill-foreground text-3xl font-bold"
                        >
                          {totalVisitors.toLocaleString()}
                        </tspan>
                        <tspan
                          x={viewBox.cx}
                          y={(viewBox.cy || 0) + 24}
                          className="fill-muted-foreground"
                        >
                          Visitors
                        </tspan>
                      </text>
                    )
                  }
                }}
              />
            </Pie>
          </PieChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Interactive

Clickable header tiles with per-series totals switch the active series.

**Install:**

```bash
npx shadcn@latest add @designrevision/bar-chart-interactive-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/bar-chart-interactive-01.tsx
"use client"

import * as React from "react"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { date: "2024-04-01", desktop: 222, mobile: 150 },
  { date: "2024-04-02", desktop: 97, mobile: 180 },
  { date: "2024-04-03", desktop: 167, mobile: 120 },
  { date: "2024-04-04", desktop: 242, mobile: 260 },
  { date: "2024-04-05", desktop: 373, mobile: 290 },
  { date: "2024-04-06", desktop: 301, mobile: 340 },
  { date: "2024-04-07", desktop: 245, mobile: 180 },
  { date: "2024-04-08", desktop: 409, mobile: 320 },
  { date: "2024-04-09", desktop: 59, mobile: 110 },
  { date: "2024-04-10", desktop: 261, mobile: 190 },
  { date: "2024-04-11", desktop: 327, mobile: 350 },
  { date: "2024-04-12", desktop: 292, mobile: 210 },
  { date: "2024-04-13", desktop: 342, mobile: 380 },
  { date: "2024-04-14", desktop: 137, mobile: 220 },
  { date: "2024-04-15", desktop: 120, mobile: 170 },
  { date: "2024-04-16", desktop: 138, mobile: 190 },
  { date: "2024-04-17", desktop: 446, mobile: 360 },
  { date: "2024-04-18", desktop: 364, mobile: 410 },
  { date: "2024-04-19", desktop: 243, mobile: 180 },
  { date: "2024-04-20", desktop: 89, mobile: 150 },
  { date: "2024-04-21", desktop: 137, mobile: 200 },
  { date: "2024-04-22", desktop: 224, mobile: 170 },
  { date: "2024-04-23", desktop: 138, mobile: 230 },
  { date: "2024-04-24", desktop: 387, mobile: 290 },
  { date: "2024-04-25", desktop: 215, mobile: 250 },
  { date: "2024-04-26", desktop: 75, mobile: 130 },
  { date: "2024-04-27", desktop: 383, mobile: 420 },
  { date: "2024-04-28", desktop: 122, mobile: 180 },
  { date: "2024-04-29", desktop: 315, mobile: 240 },
  { date: "2024-04-30", desktop: 454, mobile: 380 },
]

const chartConfig = {
  views: { label: "Page Views" },
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function BarChartInteractive01() {
  const [activeChart, setActiveChart] =
    React.useState<"desktop" | "mobile">("desktop")

  const total = React.useMemo(
    () => ({
      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
    }),
    []
  )

  return (
    <Card className="w-full max-w-2xl py-0">
      <CardHeader className="flex flex-col items-stretch border-b !p-0 sm:flex-row">
        <div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:pb-0">
          <CardTitle>Bar Chart — Interactive</CardTitle>
          <CardDescription>Daily page views for April 2024</CardDescription>
        </div>
        <div className="flex">
          {(["desktop", "mobile"] as const).map((key) => (
            <button
              key={key}
              data-active={activeChart === key}
              className="data-[active=true]:bg-muted/50 relative flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
              onClick={() => setActiveChart(key)}
            >
              <span className="text-muted-foreground text-xs">
                {chartConfig[key].label}
              </span>
              <span className="text-lg leading-none font-bold sm:text-3xl">
                {total[key].toLocaleString()}
              </span>
            </button>
          ))}
        </div>
      </CardHeader>
      <CardContent className="px-2 sm:p-6">
        <ChartContainer
          config={chartConfig}
          className="aspect-auto h-[250px] w-full"
        >
          <BarChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 12, right: 12 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="date"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              minTickGap={32}
              tickFormatter={(value) =>
                new Date(value).toLocaleDateString("en-US", {
                  month: "short",
                  day: "numeric",
                })
              }
            />
            <ChartTooltip
              content={
                <ChartTooltipContent
                  className="w-[150px]"
                  nameKey="views"
                  labelFormatter={(value) =>
                    new Date(value).toLocaleDateString("en-US", {
                      month: "short",
                      day: "numeric",
                      year: "numeric",
                    })
                  }
                />
              }
            />
            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />
          </BarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Loading state

A skeleton shaped like the chart while data loads.

**Install:**

```bash
npx shadcn@latest add @designrevision/bar-chart-loading-01
```

**Dependencies:** card, skeleton

```tsx
// components/ui/bar-chart-loading-01.tsx
import {
  Card,
  CardContent,
  CardHeader,
} from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

// A loading state shaped like the chart it stands in for.
const bars = [60, 90, 75, 40, 80, 85]

export default function BarChartLoading01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader className="gap-2">
        <Skeleton className="h-5 w-28" />
        <Skeleton className="h-4 w-40" />
      </CardHeader>
      <CardContent>
        <div className="flex aspect-video items-end justify-between gap-2 px-1 pb-6">
          {bars.map((height, i) => (
            <Skeleton
              key={i}
              className="w-full rounded-md rounded-b-none"
              style={{ height: `${height}%` }}
            />
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
```

---

### Empty state

A graceful no-data state instead of a blank canvas.

**Install:**

```bash
npx shadcn@latest add @designrevision/bar-chart-empty-01
```

**Dependencies:** lucide-react, card

```tsx
// components/ui/bar-chart-empty-01.tsx
import { ChartColumnBig } from "lucide-react"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export default function BarChartEmpty01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Bar Chart</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex aspect-video flex-col items-center justify-center gap-2 rounded-lg border border-dashed text-center">
          <ChartColumnBig className="text-muted-foreground size-8" />
          <div className="text-sm font-medium">No data to display</div>
          <p className="text-muted-foreground max-w-[15rem] text-xs">
            Data will appear here once your first events come in.
          </p>
        </div>
      </CardContent>
    </Card>
  )
}
```

---

### Accessible

Keyboard-navigable with a screen-reader data-table fallback.

**Install:**

```bash
npx shadcn@latest add @designrevision/bar-chart-a11y-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/bar-chart-a11y-01.tsx
"use client"

import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig

export default function BarChartA11y01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Accessible Bar Chart</CardTitle>
        <CardDescription>
          Keyboard-navigable, with a screen-reader data table
        </CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer
          config={chartConfig}
          role="img"
          aria-label="Bar chart of desktop visitors from January to June 2024, ranging from 73 in April to 305 in February."
        >
          <BarChart accessibilityLayer data={chartData}>
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              tickMargin={10}
              axisLine={false}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel />}
            />
            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
          </BarChart>
        </ChartContainer>

        {/* Visually-hidden data-table fallback for assistive technology. */}
        <table className="sr-only">
          <caption>Desktop visitors by month, January to June 2024</caption>
          <thead>
            <tr>
              <th scope="col">Month</th>
              <th scope="col">Visitors</th>
            </tr>
          </thead>
          <tbody>
            {chartData.map((row) => (
              <tr key={row.month}>
                <th scope="row">{row.month}</th>
                <td>{row.desktop}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </CardContent>
    </Card>
  )
}
```

---

# Shadcn Checkbox

> Free shadcn/ui checkbox component for React — indeterminate select-all, checkbox groups, React Hook Form validation and card examples. Copy or install in one command.

Source: https://designrevision.com/components/checkbox

The **Shadcn Checkbox** is the control for binary and multi-select choices — the canonical <a href="https://ui.shadcn.com/docs/components/checkbox" rel="nofollow">shadcn/ui</a> checkbox built on <a href="https://www.radix-ui.com/primitives/docs/components/checkbox" rel="nofollow">Radix</a>, themed entirely with CSS variables. It pairs with a [Label](/components/label) for a complete field, and it ships one fix the original leaves out: the **indeterminate** state renders a *minus*, not a checkmark. The examples below cover the patterns you actually build — groups, select-all, cards, and validated forms.

## When to use

Reach for a checkbox when each option is **independent** — accept terms, toggle a setting, pick any number of items from a list. For **one choice out of several**, use a radio group; for an instant on/off with no submit, a switch often reads better. A single checkbox should always have a [Label](/components/label); a set of related checkboxes belongs in a `fieldset` with a `legend`.

## Indeterminate and select-all

Pass `checked="indeterminate"` for the **mixed** state and the control renders a minus icon. The classic use is a **select-all** header over a list: it's `true` when every row is selected, `"indeterminate"` when only some are, and `false` when none are — and toggling it selects or clears the whole group. This is the pattern behind table headers and bulk-action lists; the Select-all example is the complete, copy-pasteable version.

## Groups and accessibility

Group related checkboxes in a `fieldset` with a `legend` so screen readers announce the set as a unit, and bind every checkbox to its own `Label` with `htmlFor`/`id`. The checkbox uses the standard **`aria-invalid`** attribute for errors — set it and the destructive ring and border switch on automatically — and you should pair an invalid field with a visible message linked by `aria-describedby`.

## React Hook Form

The checkbox is fully controllable, so it slots into <a href="https://react-hook-form.com" rel="nofollow">React Hook Form</a>: drive the control's `checked` from the field value and call `setValue` (or `field.onChange`) from `onCheckedChange`. Combined with a `zod` schema that refines a required opt-in to `true`, you get inline validation with an `aria-invalid` error message — see the React Hook Form example for the full, working form.

## Theming

The checkbox reads your design tokens (`--primary`, `--ring`, `--destructive`), so it follows your theme — including dark mode — with zero overrides. Any palette produced by a shadcn-compatible theme generator applies automatically.

## Installation

### checkbox

**Install:**

```bash
npx shadcn@latest add @designrevision/checkbox
```

**Dependencies:** @radix-ui/react-checkbox, lucide-react, utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| checked | boolean \| 'indeterminate' | — | Controlled checked state. Pass 'indeterminate' for the mixed (partial) state — it renders a minus instead of a check. |
| defaultChecked | boolean | false | Initial checked state when uncontrolled. |
| onCheckedChange | (checked: boolean \| 'indeterminate') => void | — | Fires when the user toggles the checkbox. |
| disabled | boolean | false | Prevents interaction and dims the control. |

**Usage & accessibility:** Extends the Radix Checkbox Root (@radix-ui/react-checkbox). Set aria-invalid for the destructive error styling. The indicator shows a check when checked and a minus when indeterminate.

```tsx
// components/ui/checkbox.tsx
"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { CheckIcon, MinusIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function Checkbox({
  className,
  ...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        "peer group border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="flex items-center justify-center text-current"
      >
        <CheckIcon className="size-3.5 group-data-[state=indeterminate]:hidden" />
        <MinusIcon className="hidden size-3.5 group-data-[state=indeterminate]:block" />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  )
}

export { Checkbox }
```

## Examples

### With label

The canonical opt-in field — a `Label` and description bound to a controlled checkbox via `htmlFor`, toggled with `onCheckedChange`.

**Install:**

```bash
npx shadcn@latest add @designrevision/checkbox-label-01
```

**Dependencies:** checkbox, label

```tsx
// components/ui/checkbox-label-01.tsx
"use client"

import * as React from "react"

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

export default function CheckboxLabel01() {
  const [checked, setChecked] = React.useState(true)

  return (
    <div className="flex items-start gap-3">
      <Checkbox
        id="terms"
        checked={checked}
        onCheckedChange={(value) => setChecked(value === true)}
      />
      <div className="grid gap-1.5">
        <Label htmlFor="terms">Accept terms and conditions</Label>
        <p className="text-sm text-muted-foreground">
          You agree to our Terms of Service and Privacy Policy.
        </p>
      </div>
    </div>
  )
}
```

---

### Group

A set of related checkboxes wrapped in a `fieldset` with a `legend` — the accessible way to group multiple options with descriptions.

**Install:**

```bash
npx shadcn@latest add @designrevision/checkbox-group-01
```

**Dependencies:** checkbox, label

```tsx
// components/ui/checkbox-group-01.tsx
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

const items = [
  {
    id: "comments",
    label: "Comments",
    description: "Get notified when someone comments on your post.",
  },
  {
    id: "mentions",
    label: "Mentions",
    description: "Get notified when someone @mentions you.",
  },
  {
    id: "follows",
    label: "Follows",
    description: "Get notified when someone follows you.",
  },
]

export default function CheckboxGroup01() {
  return (
    <fieldset className="grid w-full max-w-sm gap-4">
      <legend className="mb-1 text-sm font-medium text-foreground">
        Email notifications
      </legend>
      {items.map((item) => (
        <div key={item.id} className="flex items-start gap-3">
          <Checkbox id={item.id} defaultChecked={item.id !== "follows"} />
          <div className="grid gap-1.5">
            <Label htmlFor={item.id}>{item.label}</Label>
            <p className="text-sm text-muted-foreground">{item.description}</p>
          </div>
        </div>
      ))}
    </fieldset>
  )
}
```

---

### Select all (indeterminate)

A parent checkbox that renders the **indeterminate** state — a minus, not a check — when only some children are selected. Checking it toggles the whole group.

**Install:**

```bash
npx shadcn@latest add @designrevision/checkbox-select-all-01
```

**Dependencies:** checkbox, label

```tsx
// components/ui/checkbox-select-all-01.tsx
"use client"

import * as React from "react"

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

const tasks = [
  { id: "task-1", label: "Review pull request" },
  { id: "task-2", label: "Update documentation" },
  { id: "task-3", label: "Deploy to staging" },
]

export default function CheckboxSelectAll01() {
  const [checked, setChecked] = React.useState<string[]>(["task-1"])

  const allChecked = checked.length === tasks.length
  const someChecked = checked.length > 0 && !allChecked

  return (
    <div className="grid w-full max-w-sm gap-3">
      <div className="flex items-center gap-3 border-b border-border pb-3">
        <Checkbox
          id="select-all"
          checked={allChecked ? true : someChecked ? "indeterminate" : false}
          onCheckedChange={(value) =>
            setChecked(value === true ? tasks.map((t) => t.id) : [])
          }
        />
        <Label htmlFor="select-all" className="font-medium">
          Select all
        </Label>
      </div>
      {tasks.map((task) => (
        <div key={task.id} className="flex items-center gap-3">
          <Checkbox
            id={task.id}
            checked={checked.includes(task.id)}
            onCheckedChange={(value) =>
              setChecked((prev) =>
                value === true
                  ? [...prev, task.id]
                  : prev.filter((t) => t !== task.id)
              )
            }
          />
          <Label htmlFor={task.id} className="font-normal text-muted-foreground">
            {task.label}
          </Label>
        </div>
      ))}
    </div>
  )
}
```

---

### Cards

Whole-card selectable options with a title and description that highlight when checked, using `has-[[data-state=checked]]`.

**Install:**

```bash
npx shadcn@latest add @designrevision/checkbox-card-01
```

**Dependencies:** checkbox, label

```tsx
// components/ui/checkbox-card-01.tsx
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

const plans = [
  {
    id: "plan-starter",
    title: "Starter",
    description: "For individuals getting started.",
  },
  {
    id: "plan-pro",
    title: "Pro",
    description: "For small teams that need more room to grow.",
  },
]

export default function CheckboxCard01() {
  return (
    <div className="grid w-full max-w-sm gap-3">
      {plans.map((plan) => (
        <Label
          key={plan.id}
          htmlFor={plan.id}
          className="flex items-start gap-3 rounded-lg border border-border p-4 has-[[data-state=checked]]:border-primary has-[[data-state=checked]]:bg-primary/5"
        >
          <Checkbox
            id={plan.id}
            defaultChecked={plan.id === "plan-pro"}
            className="mt-0.5"
          />
          <div className="grid gap-1.5 font-normal">
            <span className="text-sm font-medium leading-none">{plan.title}</span>
            <span className="text-sm text-muted-foreground">
              {plan.description}
            </span>
          </div>
        </Label>
      ))}
    </div>
  )
}
```

---

### React Hook Form

A required “accept terms” checkbox validated with `react-hook-form` and `zod`, showing an `aria-invalid` error message until it is checked.

**Install:**

```bash
npx shadcn@latest add @designrevision/checkbox-form-01
```

**Dependencies:** react-hook-form, zod, @hookform/resolvers, checkbox, label, button

```tsx
// components/ui/checkbox-form-01.tsx
"use client"

import * as React from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

const schema = z.object({
  terms: z.boolean().refine((value) => value === true, {
    message: "You must accept the terms to continue.",
  }),
})

type FormValues = z.infer<typeof schema>

export default function CheckboxForm01() {
  const [submitted, setSubmitted] = React.useState(false)
  const {
    handleSubmit,
    setValue,
    watch,
    formState: { errors },
  } = useForm<FormValues>({
    resolver: zodResolver(schema),
    defaultValues: { terms: false },
  })

  const terms = watch("terms")

  return (
    <form
      onSubmit={handleSubmit(() => setSubmitted(true))}
      className="grid w-full max-w-sm gap-4"
    >
      <div className="flex items-start gap-3">
        <Checkbox
          id="accept"
          checked={terms}
          onCheckedChange={(value) =>
            setValue("terms", value === true, { shouldValidate: true })
          }
          aria-invalid={!!errors.terms}
          aria-describedby={errors.terms ? "accept-error" : undefined}
        />
        <div className="grid gap-1.5">
          <Label htmlFor="accept">Accept terms and conditions</Label>
          <p className="text-sm text-muted-foreground">
            You agree to our Terms of Service and Privacy Policy.
          </p>
          {errors.terms ? (
            <p id="accept-error" className="text-sm text-destructive">
              {errors.terms.message}
            </p>
          ) : null}
        </div>
      </div>
      <Button type="submit" className="w-fit">
        {submitted ? "Submitted!" : "Submit"}
      </Button>
    </form>
  )
}
```

---

### States

Checked, disabled, disabled-and-checked, and invalid (`aria-invalid` switches on the destructive ring, paired with `aria-describedby`).

**Install:**

```bash
npx shadcn@latest add @designrevision/checkbox-states-01
```

**Dependencies:** checkbox, label

```tsx
// components/ui/checkbox-states-01.tsx
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

export default function CheckboxStates01() {
  return (
    <div className="grid w-full max-w-sm gap-5">
      <div className="flex items-center gap-3">
        <Checkbox id="state-default" defaultChecked />
        <Label htmlFor="state-default">Checked by default</Label>
      </div>
      <div className="flex items-center gap-3">
        <Checkbox id="state-disabled" disabled />
        <Label htmlFor="state-disabled">Disabled</Label>
      </div>
      <div className="flex items-center gap-3">
        <Checkbox id="state-disabled-checked" defaultChecked disabled />
        <Label htmlFor="state-disabled-checked">Disabled &amp; checked</Label>
      </div>
      <div className="grid gap-1.5">
        <div className="flex items-center gap-3">
          <Checkbox
            id="state-invalid"
            aria-invalid
            aria-describedby="state-invalid-error"
          />
          <Label htmlFor="state-invalid">Required — please accept</Label>
        </div>
        <p id="state-invalid-error" className="text-sm text-destructive">
          This field is required.
        </p>
      </div>
    </div>
  )
}
```

---

### Sizes

Small, default, and large checkboxes — the size scales from the `size-*` class, with the indicator icon following.

**Install:**

```bash
npx shadcn@latest add @designrevision/checkbox-sizes-01
```

**Dependencies:** checkbox, label

```tsx
// components/ui/checkbox-sizes-01.tsx
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

export default function CheckboxSizes01() {
  return (
    <div className="flex items-center gap-6">
      <div className="flex items-center gap-2">
        <Checkbox
          id="size-sm"
          defaultChecked
          className="size-3.5 rounded-[3px] [&_svg]:size-3"
        />
        <Label htmlFor="size-sm" className="text-xs">
          Small
        </Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="size-default" defaultChecked />
        <Label htmlFor="size-default">Default</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="size-lg" defaultChecked className="size-5 [&_svg]:size-4" />
        <Label htmlFor="size-lg" className="text-base">
          Large
        </Label>
      </div>
    </div>
  )
}
```

---

# Shadcn Collapsible

> Free shadcn/ui collapsible for React — built on Radix. An accessible show/hide disclosure: a controlled toggle, a chevron trigger, show-more text, a sidebar filter group, nested trees, and expandable rows.

Source: https://designrevision.com/components/collapsible

The **Shadcn Collapsible** is the simplest disclosure: an accessible **show/hide** for a single region, built on <a href="https://www.radix-ui.com/primitives/docs/components/collapsible" rel="nofollow">Radix</a>. Three parts — root, trigger, content — and Radix handles the state, focus, and ARIA. The examples below cover a controlled toggle, a rotating chevron, show-more text, a filter group, nested trees, and expandable rows.

## Three parts

```tsx
<Collapsible>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>Hidden until opened.</CollapsibleContent>
</Collapsible>
```

`Collapsible` owns the open state, `CollapsibleTrigger` toggles it, and `CollapsibleContent` is shown or hidden.

## Collapsible vs Accordion

They look similar but solve different problems:

- **Collapsible** — toggle **one** region open or closed.
- **[Accordion](/components/accordion)** — a **set** of items where opening one can close the others (an FAQ, a settings list).

Reach for Collapsible when there's a single thing to reveal.

## Controlled state

Pass `open` and `onOpenChange` to control it — useful for flipping a trigger label:

```tsx
const [open, setOpen] = React.useState(false)

<Collapsible open={open} onOpenChange={setOpen}>
  {/* … */}
  <CollapsibleTrigger asChild>
    <Button variant="link">{open ? "Show less" : "Show more"}</Button>
  </CollapsibleTrigger>
</Collapsible>
```

For an uncontrolled collapsible, pass `defaultOpen` instead.

## Rotating chevron

Put `group` on the trigger and key the icon rotation to the open state:

```tsx
<CollapsibleTrigger className="group ...">
  Section
  <ChevronDown className="transition-transform group-data-[state=open]:rotate-180" />
</CollapsibleTrigger>
```

The trigger carries `data-state="open" | "closed"`, so the chevron turns when it expands.

## Animating the height

Radix exposes the content height as `--radix-collapsible-content-height`. Add keyframes that animate from `0` to that variable to get a smooth slide:

```css
@keyframes collapsible-down { from { height: 0 } to { height: var(--radix-collapsible-content-height) } }
@keyframes collapsible-up   { from { height: var(--radix-collapsible-content-height) } to { height: 0 } }
```

Apply them on `data-[state=open]` / `data-[state=closed]`. Without animation the section just toggles, which is fine for most uses.

## Common patterns

- **Show more / less** — a read-more for long text (the Show more example).
- **Filter group** — a collapsible sidebar facet of checkboxes (the Filter group example).
- **Nested** — collapsibles inside collapsibles for a file tree (the Nested example).
- **Expandable row** — a list row that opens to show details (the Expandable row example).

## Accessibility

Radix links the trigger to the content with `aria-controls` and `aria-expanded`, and manages the open state with the keyboard (Enter/Space toggles). Keep the trigger text meaningful so the control is clear when announced.

## Installation

### collapsible

**Install:**

```bash
npx shadcn@latest add @designrevision/collapsible
```

**Dependencies:** @radix-ui/react-collapsible, utils

**Usage & accessibility:** A Radix disclosure — show/hide a single section. Compose <Collapsible> (optionally controlled with open / onOpenChange) around a <CollapsibleTrigger> and <CollapsibleContent>. Unlike Accordion (a set of items, one open at a time), Collapsible toggles one region. The content has data-state open/closed for animating height with the collapsible-down/up keyframes.

```tsx
// components/ui/collapsible.tsx
"use client"

import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"

function Collapsible({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
}

function CollapsibleTrigger({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
  return (
    <CollapsiblePrimitive.CollapsibleTrigger
      data-slot="collapsible-trigger"
      {...props}
    />
  )
}

function CollapsibleContent({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
  return (
    <CollapsiblePrimitive.CollapsibleContent
      data-slot="collapsible-content"
      {...props}
    />
  )
}

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
```

## Examples

### Basic

The canonical collapsible — a toggle that reveals extra items, controlled with open state.

**Install:**

```bash
npx shadcn@latest add @designrevision/collapsible-demo-01
```

**Dependencies:** lucide-react, collapsible, button

```tsx
// components/ui/collapsible-demo-01.tsx
"use client"

import * as React from "react"
import { ChevronsUpDown } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

export default function CollapsibleDemo01() {
  const [open, setOpen] = React.useState(false)

  return (
    <Collapsible
      open={open}
      onOpenChange={setOpen}
      className="flex w-full max-w-sm flex-col gap-2"
    >
      <div className="flex items-center justify-between gap-4 px-1">
        <h4 className="text-sm font-semibold">
          @peduarte starred 3 repositories
        </h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="icon" className="size-8">
            <ChevronsUpDown />
            <span className="sr-only">Toggle</span>
          </Button>
        </CollapsibleTrigger>
      </div>
      <div className="rounded-md border px-4 py-2 font-mono text-sm">
        @radix-ui/primitives
      </div>
      <CollapsibleContent className="flex flex-col gap-2">
        <div className="rounded-md border px-4 py-2 font-mono text-sm">
          @radix-ui/colors
        </div>
        <div className="rounded-md border px-4 py-2 font-mono text-sm">
          @stitches/react
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}
```

---

### Chevron trigger

A full-width trigger with a chevron that rotates on open, via `group-data-[state=open]`.

**Install:**

```bash
npx shadcn@latest add @designrevision/collapsible-chevron-01
```

**Dependencies:** lucide-react, collapsible

```tsx
// components/ui/collapsible-chevron-01.tsx
import { ChevronRight } from "lucide-react"

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

export default function CollapsibleChevron01() {
  return (
    <Collapsible className="w-full max-w-sm rounded-md border">
      <CollapsibleTrigger className="group flex w-full items-center justify-between p-4 text-sm font-medium">
        What is your refund policy?
        <ChevronRight className="size-4 transition-transform group-data-[state=open]:rotate-90" />
      </CollapsibleTrigger>
      <CollapsibleContent className="text-muted-foreground px-4 pb-4 text-sm">
        We offer a 30-day money-back guarantee on all plans — no questions
        asked. Refunds are processed to your original payment method.
      </CollapsibleContent>
    </Collapsible>
  )
}
```

---

### Show more / less

A read-more pattern — the trigger label flips between Show more and Show less.

**Install:**

```bash
npx shadcn@latest add @designrevision/collapsible-text-01
```

**Dependencies:** collapsible, button

```tsx
// components/ui/collapsible-text-01.tsx
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

export default function CollapsibleText01() {
  const [open, setOpen] = React.useState(false)

  return (
    <Collapsible open={open} onOpenChange={setOpen} className="w-full max-w-md">
      <p className="text-sm leading-relaxed">
        Embla is a bare-bones carousel library with great fluid motion and
        awesome swipe precision. It is library agnostic, dependency free, and
        100% open source.
      </p>
      <CollapsibleContent>
        <p className="mt-2 text-sm leading-relaxed">
          It ships a tiny core with optional plugins for autoplay, auto-scroll,
          class names, and more. The shadcn Carousel wraps it with styling and
          accessible controls.
        </p>
      </CollapsibleContent>
      <CollapsibleTrigger asChild>
        <Button variant="link" className="mt-1 h-auto p-0">
          {open ? "Show less" : "Show more"}
        </Button>
      </CollapsibleTrigger>
    </Collapsible>
  )
}
```

---

### Filter group

A collapsible sidebar filter — a category group of checkboxes that folds away.

**Install:**

```bash
npx shadcn@latest add @designrevision/collapsible-filter-01
```

**Dependencies:** lucide-react, collapsible, checkbox, label

```tsx
// components/ui/collapsible-filter-01.tsx
import { ChevronDown } from "lucide-react"

import { Checkbox } from "@/components/ui/checkbox"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { Label } from "@/components/ui/label"

const categories = ["Electronics", "Clothing", "Home & Garden", "Sports"]

export default function CollapsibleFilter01() {
  return (
    <div className="w-full max-w-xs">
      <Collapsible defaultOpen className="rounded-md border p-3">
        <CollapsibleTrigger className="group flex w-full items-center justify-between text-sm font-medium">
          Category
          <ChevronDown className="size-4 transition-transform group-data-[state=open]:rotate-180" />
        </CollapsibleTrigger>
        <CollapsibleContent className="mt-3 space-y-2.5">
          {categories.map((category) => (
            <div key={category} className="flex items-center gap-2">
              <Checkbox id={category} />
              <Label htmlFor={category} className="text-sm font-normal">
                {category}
              </Label>
            </div>
          ))}
        </CollapsibleContent>
      </Collapsible>
    </div>
  )
}
```

---

### Nested (file tree)

Collapsibles inside collapsibles — a folder/file tree with rotating chevrons.

**Install:**

```bash
npx shadcn@latest add @designrevision/collapsible-nested-01
```

**Dependencies:** lucide-react, collapsible

```tsx
// components/ui/collapsible-nested-01.tsx
import { ChevronRight, FileText, Folder } from "lucide-react"

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

export default function CollapsibleNested01() {
  return (
    <div className="w-full max-w-xs text-sm">
      <Collapsible defaultOpen>
        <CollapsibleTrigger className="group hover:bg-accent flex w-full items-center gap-1.5 rounded-md px-2 py-1.5">
          <ChevronRight className="size-4 transition-transform group-data-[state=open]:rotate-90" />
          <Folder className="size-4" />
          src
        </CollapsibleTrigger>
        <CollapsibleContent className="ml-4 border-l pl-2">
          <Collapsible>
            <CollapsibleTrigger className="group hover:bg-accent flex w-full items-center gap-1.5 rounded-md px-2 py-1.5">
              <ChevronRight className="size-4 transition-transform group-data-[state=open]:rotate-90" />
              <Folder className="size-4" />
              components
            </CollapsibleTrigger>
            <CollapsibleContent className="ml-4 border-l pl-2">
              <div className="flex items-center gap-1.5 px-2 py-1.5">
                <FileText className="size-4" />
                button.tsx
              </div>
              <div className="flex items-center gap-1.5 px-2 py-1.5">
                <FileText className="size-4" />
                card.tsx
              </div>
            </CollapsibleContent>
          </Collapsible>
          <div className="flex items-center gap-1.5 px-2 py-1.5">
            <FileText className="size-4" />
            index.ts
          </div>
        </CollapsibleContent>
      </Collapsible>
    </div>
  )
}
```

---

### Expandable row

A list row that expands to reveal details — the order/record disclosure pattern.

**Install:**

```bash
npx shadcn@latest add @designrevision/collapsible-details-01
```

**Dependencies:** lucide-react, collapsible, badge

```tsx
// components/ui/collapsible-details-01.tsx
import { ChevronDown } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

export default function CollapsibleDetails01() {
  return (
    <Collapsible className="w-full max-w-md rounded-lg border">
      <CollapsibleTrigger className="group flex w-full items-center justify-between p-4">
        <div className="flex items-center gap-3">
          <span className="font-medium">Order #3201</span>
          <Badge variant="secondary">Shipped</Badge>
        </div>
        <ChevronDown className="size-4 transition-transform group-data-[state=open]:rotate-180" />
      </CollapsibleTrigger>
      <CollapsibleContent className="space-y-1.5 border-t px-4 py-3 text-sm">
        <div className="flex justify-between">
          <span className="text-muted-foreground">Items</span>
          <span>3</span>
        </div>
        <div className="flex justify-between">
          <span className="text-muted-foreground">Total</span>
          <span>$148.00</span>
        </div>
        <div className="flex justify-between">
          <span className="text-muted-foreground">Tracking</span>
          <span>1Z999AA10123456784</span>
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}
```

---

# Shadcn Combobox

> Free shadcn/ui combobox for React — the searchable select / autocomplete built from Popover + Command. A drop-in component plus raw composition: grouped options, icons, async search, create-new, and a responsive Drawer. The examples official shadcn never shipped.

Source: https://designrevision.com/components/combobox

The **Shadcn Combobox** is the searchable select — an autocomplete built from a [Popover](/components/popover) and a [Command](/components/command) menu. Officially shadcn ships it as a *composition pattern* rather than a component; we give you **both** — a drop-in `<Combobox>` for the common case and the raw Popover + Command composition for everything custom: grouped options, icons, async search, create-new, and a responsive [Drawer](/components/drawer) on mobile.

## Component or composition?

There's no canonical `Combobox` primitive in shadcn — it's Popover + Command wired together. That's flexible but repetitive, so we provide a small reusable `<Combobox>` that covers the 80% case:

```tsx
<Combobox
  options={frameworks}
  value={value}
  onValueChange={setValue}
  placeholder="Select framework…"
/>
```

Reach for the **raw composition** (shown in every example below the first) when you need a custom trigger, grouped headings, icons, async loading, or a create-new action. Both render the same UI — pick the level of control you want.

## Combobox vs Autocomplete vs Select

These names overlap, so to be concrete:

- **[Select](/components/select)** — a short, static list; no typing. Best when there are only a handful of options.
- **Combobox / Autocomplete** — a searchable list; type to filter, then pick. shadcn has no separate "Autocomplete" — the Combobox **is** it. Best for long lists (countries, frameworks, users).
- **[Multi-Select](/components/multi-select)** — a Combobox that keeps several values as removable badges.

## Matching the popover to the trigger width

The one detail every combobox needs: the dropdown should be as wide as the button. Radix exposes the trigger width to the popover as a CSS variable, so set it on `PopoverContent`:

```tsx
<PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
```

Our `<Combobox>` wrapper applies this automatically; the raw examples use a fixed width for clarity.

## Grouped options

Wrap sets of items in `CommandGroup` with a `heading` to organise a long list into sections — the Grouped options example splits produce into Fruits and Vegetables. cmdk keeps the headings while filtering.

## Icons & status

A combobox isn't just text — render an icon in both the trigger and each item for status pickers, country flags, or user avatars. The Icons & status example is the issue-tracker pattern (Backlog / In Progress / Done / Canceled).

## Responsive (Popover + Drawer)

On a phone, a popover anchored to a button is cramped. The pattern shadcn documents is a **Popover on desktop and a [Drawer](/components/drawer) on mobile**: detect the viewport with a `useMediaQuery` hook and render the same `Command` list in whichever container fits. The Responsive example is the full implementation.

## Async / server-side search

For options that live on a server, set `shouldFilter={false}` so cmdk stops filtering locally, drive `CommandInput` as a controlled value, debounce a request, and render the results you receive — with a loading spinner in between. The Async / server search example simulates the round-trip end to end.

## Create-new option

When the search matches nothing, let the user **add** it: offer a "Create '<query>'" item that appends a new option and selects it. It's the tag-input pattern, and the Create new option example shows it with a `shouldFilter={false}` list you control.

## Accessibility

The trigger is a `Button` with `role="combobox"` and `aria-expanded`, so it's announced correctly; cmdk handles arrow-key navigation, type-ahead, and Enter to select inside the list. Always give the popover a searchable `CommandInput` and a `CommandEmpty` fallback so keyboard and screen-reader users get feedback when nothing matches.

## Theming

The combobox reads your design tokens — `--popover`, `--accent` (the highlighted item), `--input` (the trigger border) — so it follows your theme, including dark mode, with no overrides.

## Installation

### combobox

**Install:**

```bash
npx shadcn@latest add @designrevision/combobox
```

**Dependencies:** lucide-react, utils, popover, command, button

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| options * | { value: string; label: string; disabled?: boolean }[] | — | The selectable options. label is shown and searched; value is returned on select. |
| value | string | — | Controlled selected value. Selecting the active option again clears it. |
| onValueChange | (value: string) => void | — | Fires with the new value (empty string when cleared). |
| placeholder | string | "Select an option…" | Trigger text shown when nothing is selected. |
| searchPlaceholder | string | "Search…" | Placeholder for the search input. |
| emptyText | string | "No results found." | Message shown when the search matches nothing. |

`*` required.

**Usage & accessibility:** A reusable single-select combobox wrapping Popover + Command + Button (cmdk-powered search), with the popover width matched to the trigger via --radix-popover-trigger-width. For grouped options, icons, async search, or create-new, compose Popover + Command directly (see the examples); for multiple selection use the Multi-Select component.

```tsx
// components/ui/combobox.tsx
"use client"

import * as React from "react"
import { CheckIcon, ChevronsUpDownIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

export interface ComboboxOption {
  value: string
  label: string
  disabled?: boolean
}

export interface ComboboxProps {
  options: ComboboxOption[]
  value?: string
  onValueChange?: (value: string) => void
  placeholder?: string
  searchPlaceholder?: string
  emptyText?: string
  className?: string
  disabled?: boolean
  id?: string
}

function Combobox({
  options,
  value,
  onValueChange,
  placeholder = "Select an option…",
  searchPlaceholder = "Search…",
  emptyText = "No results found.",
  className,
  disabled,
  id,
}: ComboboxProps) {
  const [open, setOpen] = React.useState(false)
  const selected = options.find((option) => option.value === value)

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          id={id}
          type="button"
          variant="outline"
          role="combobox"
          aria-expanded={open}
          disabled={disabled}
          className={cn("w-full justify-between font-normal", className)}
        >
          <span
            className={cn("truncate", !selected && "text-muted-foreground")}
          >
            {selected ? selected.label : placeholder}
          </span>
          <ChevronsUpDownIcon className="ml-2 size-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent
        className="w-[var(--radix-popover-trigger-width)] p-0"
        align="start"
      >
        <Command>
          <CommandInput placeholder={searchPlaceholder} />
          <CommandList>
            <CommandEmpty>{emptyText}</CommandEmpty>
            <CommandGroup>
              {options.map((option) => (
                <CommandItem
                  key={option.value}
                  value={option.label}
                  disabled={option.disabled}
                  onSelect={() => {
                    onValueChange?.(option.value === value ? "" : option.value)
                    setOpen(false)
                  }}
                >
                  <CheckIcon
                    className={cn(
                      "mr-2 size-4",
                      option.value === value ? "opacity-100" : "opacity-0"
                    )}
                  />
                  {option.label}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}

export { Combobox }
```

## Examples

### Combobox

The drop-in `<Combobox>` — a searchable single-select built from an `options` array with a controlled value.

**Install:**

```bash
npx shadcn@latest add @designrevision/combobox-demo-01
```

**Dependencies:** @designrevision/combobox

```tsx
// components/ui/combobox-demo-01.tsx
"use client"

import * as React from "react"

import { Combobox } from "@/components/ui/combobox"

const frameworks = [
  { value: "next.js", label: "Next.js" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt.js", label: "Nuxt.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
]

export default function ComboboxDemo01() {
  const [value, setValue] = React.useState("")

  return (
    <div className="w-[240px]">
      <Combobox
        options={frameworks}
        value={value}
        onValueChange={setValue}
        placeholder="Select framework…"
        searchPlaceholder="Search framework…"
        emptyText="No framework found."
      />
    </div>
  )
}
```

---

### Raw composition

The canonical shadcn pattern — [Popover](/components/popover) + [Command](/components/command) composed by hand for full control over the trigger and items.

**Install:**

```bash
npx shadcn@latest add @designrevision/combobox-composition-01
```

**Dependencies:** lucide-react, popover, command, button

```tsx
// components/ui/combobox-composition-01.tsx
"use client"

import * as React from "react"
import { CheckIcon, ChevronsUpDownIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

const frameworks = [
  { value: "next.js", label: "Next.js" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt.js", label: "Nuxt.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
]

export default function ComboboxComposition01() {
  const [open, setOpen] = React.useState(false)
  const [value, setValue] = React.useState("")

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="w-[240px] justify-between font-normal"
        >
          {value
            ? frameworks.find((f) => f.value === value)?.label
            : "Select framework…"}
          <ChevronsUpDownIcon className="ml-2 size-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[240px] p-0" align="start">
        <Command>
          <CommandInput placeholder="Search framework…" />
          <CommandList>
            <CommandEmpty>No framework found.</CommandEmpty>
            <CommandGroup>
              {frameworks.map((framework) => (
                <CommandItem
                  key={framework.value}
                  value={framework.label}
                  onSelect={() => {
                    setValue(framework.value === value ? "" : framework.value)
                    setOpen(false)
                  }}
                >
                  <CheckIcon
                    className={cn(
                      "mr-2 size-4",
                      value === framework.value ? "opacity-100" : "opacity-0"
                    )}
                  />
                  {framework.label}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}
```

---

### In a form

A labelled, controlled combobox inside a form that reports the selected value on submit.

**Install:**

```bash
npx shadcn@latest add @designrevision/combobox-form-01
```

**Dependencies:** @designrevision/combobox, button, label

```tsx
// components/ui/combobox-form-01.tsx
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Combobox } from "@/components/ui/combobox"
import { Label } from "@/components/ui/label"

const languages = [
  { value: "en", label: "English" },
  { value: "fr", label: "French" },
  { value: "de", label: "German" },
  { value: "es", label: "Spanish" },
  { value: "pt", label: "Portuguese" },
]

export default function ComboboxForm01() {
  const [language, setLanguage] = React.useState("")
  const [submitted, setSubmitted] = React.useState<string | null>(null)

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault()
        setSubmitted(
          languages.find((l) => l.value === language)?.label ?? "nothing"
        )
      }}
      className="grid w-[260px] gap-3"
    >
      <div className="grid gap-2">
        <Label htmlFor="language">Language</Label>
        <Combobox
          id="language"
          options={languages}
          value={language}
          onValueChange={setLanguage}
          placeholder="Select language…"
          searchPlaceholder="Search language…"
          emptyText="No language found."
        />
        <p className="text-sm text-muted-foreground">
          This is the language used across your dashboard.
        </p>
      </div>
      <Button type="submit" className="w-fit">
        Save
      </Button>
      {submitted && (
        <p className="text-sm">
          Saved: <span className="font-medium">{submitted}</span>
        </p>
      )}
    </form>
  )
}
```

---

### Grouped options

Options organised under category headings with `CommandGroup`.

**Install:**

```bash
npx shadcn@latest add @designrevision/combobox-groups-01
```

**Dependencies:** lucide-react, popover, command, button

```tsx
// components/ui/combobox-groups-01.tsx
"use client"

import * as React from "react"
import { CheckIcon, ChevronsUpDownIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

const groups = [
  {
    label: "Fruits",
    items: [
      { value: "apple", label: "Apple" },
      { value: "banana", label: "Banana" },
      { value: "orange", label: "Orange" },
    ],
  },
  {
    label: "Vegetables",
    items: [
      { value: "carrot", label: "Carrot" },
      { value: "potato", label: "Potato" },
      { value: "spinach", label: "Spinach" },
    ],
  },
]

const allItems = groups.flatMap((group) => group.items)

export default function ComboboxGroups01() {
  const [open, setOpen] = React.useState(false)
  const [value, setValue] = React.useState("")

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="w-[240px] justify-between font-normal"
        >
          {value
            ? allItems.find((item) => item.value === value)?.label
            : "Select produce…"}
          <ChevronsUpDownIcon className="ml-2 size-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[240px] p-0" align="start">
        <Command>
          <CommandInput placeholder="Search produce…" />
          <CommandList>
            <CommandEmpty>No produce found.</CommandEmpty>
            {groups.map((group) => (
              <CommandGroup key={group.label} heading={group.label}>
                {group.items.map((item) => (
                  <CommandItem
                    key={item.value}
                    value={item.label}
                    onSelect={() => {
                      setValue(item.value === value ? "" : item.value)
                      setOpen(false)
                    }}
                  >
                    <CheckIcon
                      className={cn(
                        "mr-2 size-4",
                        value === item.value ? "opacity-100" : "opacity-0"
                      )}
                    />
                    {item.label}
                  </CommandItem>
                ))}
              </CommandGroup>
            ))}
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}
```

---

### Icons & status

A status picker with an icon in both the trigger and each item — the issue-tracker pattern.

**Install:**

```bash
npx shadcn@latest add @designrevision/combobox-icons-01
```

**Dependencies:** lucide-react, popover, command, button

```tsx
// components/ui/combobox-icons-01.tsx
"use client"

import * as React from "react"
import {
  CheckIcon,
  ChevronsUpDownIcon,
  CircleCheckIcon,
  CircleDotIcon,
  CircleIcon,
  CircleXIcon,
} from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

const statuses = [
  { value: "backlog", label: "Backlog", icon: CircleIcon },
  { value: "in-progress", label: "In Progress", icon: CircleDotIcon },
  { value: "done", label: "Done", icon: CircleCheckIcon },
  { value: "canceled", label: "Canceled", icon: CircleXIcon },
]

export default function ComboboxIcons01() {
  const [open, setOpen] = React.useState(false)
  const [value, setValue] = React.useState("")
  const selected = statuses.find((status) => status.value === value)

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="w-[220px] justify-between font-normal"
        >
          <span className="flex min-w-0 items-center gap-2">
            {selected && <selected.icon className="size-4 shrink-0" />}
            <span className={cn("truncate", !selected && "text-muted-foreground")}>
              {selected ? selected.label : "Select status…"}
            </span>
          </span>
          <ChevronsUpDownIcon className="ml-2 size-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[220px] p-0" align="start">
        <Command>
          <CommandInput placeholder="Change status…" />
          <CommandList>
            <CommandEmpty>No status found.</CommandEmpty>
            <CommandGroup>
              {statuses.map((status) => (
                <CommandItem
                  key={status.value}
                  value={status.label}
                  onSelect={() => {
                    setValue(status.value === value ? "" : status.value)
                    setOpen(false)
                  }}
                >
                  <status.icon className="size-4" />
                  <span>{status.label}</span>
                  <CheckIcon
                    className={cn(
                      "ml-auto size-4",
                      value === status.value ? "opacity-100" : "opacity-0"
                    )}
                  />
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}
```

---

### Responsive (Popover + Drawer)

A Popover on desktop and a [Drawer](/components/drawer) on mobile via `useMediaQuery`, sharing one Command list.

**Install:**

```bash
npx shadcn@latest add @designrevision/combobox-responsive-01
```

**Dependencies:** popover, command, @designrevision/drawer, button

```tsx
// components/ui/combobox-responsive-01.tsx
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

type Status = { value: string; label: string }

const statuses: Status[] = [
  { value: "backlog", label: "Backlog" },
  { value: "todo", label: "Todo" },
  { value: "in-progress", label: "In Progress" },
  { value: "done", label: "Done" },
  { value: "canceled", label: "Canceled" },
]

function useMediaQuery(query: string) {
  const [matches, setMatches] = React.useState(false)

  React.useEffect(() => {
    const result = window.matchMedia(query)
    const onChange = () => setMatches(result.matches)
    onChange()
    result.addEventListener("change", onChange)
    return () => result.removeEventListener("change", onChange)
  }, [query])

  return matches
}

function StatusList({
  setOpen,
  setSelected,
}: {
  setOpen: (open: boolean) => void
  setSelected: (status: Status | null) => void
}) {
  return (
    <Command>
      <CommandInput placeholder="Filter status…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup>
          {statuses.map((status) => (
            <CommandItem
              key={status.value}
              value={status.value}
              onSelect={(value) => {
                setSelected(statuses.find((s) => s.value === value) ?? null)
                setOpen(false)
              }}
            >
              {status.label}
            </CommandItem>
          ))}
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

export default function ComboboxResponsive01() {
  const [open, setOpen] = React.useState(false)
  const [selected, setSelected] = React.useState<Status | null>(null)
  const isDesktop = useMediaQuery("(min-width: 768px)")
  const label = selected ? selected.label : "+ Set status"

  if (isDesktop) {
    return (
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button variant="outline" className="w-[200px] justify-start font-normal">
            {label}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-[200px] p-0" align="start">
          <StatusList setOpen={setOpen} setSelected={setSelected} />
        </PopoverContent>
      </Popover>
    )
  }

  return (
    <Drawer open={open} onOpenChange={setOpen}>
      <DrawerTrigger asChild>
        <Button variant="outline" className="w-[200px] justify-start font-normal">
          {label}
        </Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader className="sr-only">
          <DrawerTitle>Set status</DrawerTitle>
        </DrawerHeader>
        <div className="mt-4 border-t">
          <StatusList setOpen={setOpen} setSelected={setSelected} />
        </div>
      </DrawerContent>
    </Drawer>
  )
}
```

---

### Async / server search

Server-side search with `shouldFilter={false}`, a debounced request, and a loading spinner.

**Install:**

```bash
npx shadcn@latest add @designrevision/combobox-async-01
```

**Dependencies:** lucide-react, popover, command, button

```tsx
// components/ui/combobox-async-01.tsx
"use client"

import * as React from "react"
import { ChevronsUpDownIcon, Loader2Icon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

const ALL = [
  "Next.js",
  "React",
  "Vue",
  "Svelte",
  "Angular",
  "Solid",
  "Astro",
  "Remix",
  "Nuxt",
  "Qwik",
]

export default function ComboboxAsync01() {
  const [open, setOpen] = React.useState(false)
  const [value, setValue] = React.useState("")
  const [query, setQuery] = React.useState("")
  const [results, setResults] = React.useState<string[]>([])
  const [loading, setLoading] = React.useState(false)

  React.useEffect(() => {
    if (!query) {
      setResults([])
      setLoading(false)
      return
    }
    // Simulate a debounced server request.
    setLoading(true)
    const id = setTimeout(() => {
      setResults(ALL.filter((f) => f.toLowerCase().includes(query.toLowerCase())))
      setLoading(false)
    }, 500)
    return () => clearTimeout(id)
  }, [query])

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="w-[240px] justify-between font-normal"
        >
          <span className={value ? "" : "text-muted-foreground"}>
            {value || "Search frameworks…"}
          </span>
          <ChevronsUpDownIcon className="ml-2 size-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[240px] p-0" align="start">
        <Command shouldFilter={false}>
          <CommandInput
            value={query}
            onValueChange={setQuery}
            placeholder="Type to search (simulated)…"
          />
          <CommandList>
            {loading && (
              <div className="flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground">
                <Loader2Icon className="size-4 animate-spin" />
                Searching…
              </div>
            )}
            {!loading && query && results.length === 0 && (
              <CommandEmpty>No results found.</CommandEmpty>
            )}
            {!loading && results.length > 0 && (
              <CommandGroup>
                {results.map((framework) => (
                  <CommandItem
                    key={framework}
                    value={framework}
                    onSelect={(current) => {
                      setValue(current === value ? "" : framework)
                      setOpen(false)
                    }}
                  >
                    {framework}
                  </CommandItem>
                ))}
              </CommandGroup>
            )}
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}
```

---

### Create new option

A tag picker that offers **Create "<query>"** when the search matches nothing — add on the fly.

**Install:**

```bash
npx shadcn@latest add @designrevision/combobox-create-01
```

**Dependencies:** lucide-react, popover, command, button

```tsx
// components/ui/combobox-create-01.tsx
"use client"

import * as React from "react"
import { CheckIcon, ChevronsUpDownIcon, PlusIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

export default function ComboboxCreate01() {
  const [open, setOpen] = React.useState(false)
  const [query, setQuery] = React.useState("")
  const [value, setValue] = React.useState("")
  const [options, setOptions] = React.useState([
    { value: "design", label: "Design" },
    { value: "engineering", label: "Engineering" },
    { value: "marketing", label: "Marketing" },
  ])

  const filtered = options.filter((option) =>
    option.label.toLowerCase().includes(query.toLowerCase())
  )
  const exists = options.some(
    (option) => option.label.toLowerCase() === query.trim().toLowerCase()
  )
  const selected = options.find((option) => option.value === value)

  const createOption = () => {
    const label = query.trim()
    if (!label) return
    const next = label.toLowerCase().replace(/\s+/g, "-")
    setOptions((prev) => [...prev, { value: next, label }])
    setValue(next)
    setQuery("")
    setOpen(false)
  }

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="w-[240px] justify-between font-normal"
        >
          <span className={selected ? "" : "text-muted-foreground"}>
            {selected ? selected.label : "Select or create tag…"}
          </span>
          <ChevronsUpDownIcon className="ml-2 size-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[240px] p-0" align="start">
        <Command shouldFilter={false}>
          <CommandInput
            value={query}
            onValueChange={setQuery}
            placeholder="Search or add a tag…"
          />
          <CommandList>
            {filtered.length === 0 && !query.trim() && (
              <CommandEmpty>No tags found.</CommandEmpty>
            )}
            <CommandGroup>
              {filtered.map((option) => (
                <CommandItem
                  key={option.value}
                  value={option.value}
                  onSelect={() => {
                    setValue(option.value === value ? "" : option.value)
                    setOpen(false)
                  }}
                >
                  <CheckIcon
                    className={cn(
                      "mr-2 size-4",
                      value === option.value ? "opacity-100" : "opacity-0"
                    )}
                  />
                  {option.label}
                </CommandItem>
              ))}
              {query.trim() && !exists && (
                <CommandItem value="__create__" onSelect={createOption}>
                  <PlusIcon className="mr-2 size-4" />
                  Create “{query.trim()}”
                </CommandItem>
              )}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}
```

---

# Shadcn Combo Chart

> Free shadcn/ui combo chart for React — built on Recharts ComposedChart and themed with CSS variables. Bar + line, dual-axis, area + bars, stacked + line, and a target reference line, plus loading, empty, and accessible states.

Source: https://designrevision.com/components/combo-chart

The **Shadcn Combo Chart** is a <a href="https://recharts.org/" rel="nofollow">Recharts</a> `ComposedChart` wrapped in the shadcn `ChartContainer` — themed with your `--chart` CSS variables and dark-mode-ready. It overlays **bars, lines, and areas** on the same canvas, the pattern for two correlated metrics — **volume bars with a rate line**, totals with an average, actuals against a target. Below: bar + line, dual-axis, area + bars, stacked + line, and a target reference line, plus the production states.

## The basic combo chart

`ComposedChart` lets you mix series types. Render the bars first, then the line on top:

```tsx
const chartConfig = {
  revenue: { label: "Revenue", color: "var(--chart-1)" },
  orders: { label: "Orders", color: "var(--chart-2)" },
} satisfies ChartConfig

<ChartContainer config={chartConfig}>
  <ComposedChart data={chartData}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" tickLine={false} axisLine={false} />
    <YAxis tickLine={false} axisLine={false} />
    <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
    <Line dataKey="orders" type="monotone" stroke="var(--color-orders)" strokeWidth={2} dot={false} />
  </ComposedChart>
</ChartContainer>
```

Series draw in **render order** — Bar before Line so the line sits on top.

## Dual axis

For two different scales (dollars vs. percent), add a second Y axis and point each series at one:

```tsx
<YAxis yAxisId="left" />
<YAxis yAxisId="right" orientation="right" />
<Bar  yAxisId="left"  dataKey="revenue" fill="var(--color-revenue)" />
<Line yAxisId="right" dataKey="conversion" stroke="var(--color-conversion)" />
```

## Area, stacking & targets

- **Area + bars** — render an `<Area>` (with a gradient) before the `<Bar>` for a trend behind the columns.
- **Stacked + line** — give bars a shared `stackId`, then overlay a `<Line>` for a total or average.
- **Target line** — drop a `<ReferenceLine y={250} strokeDasharray="4 4" />` for a target or threshold marker.

## Production states

Loading (skeleton bars), empty (icon + message), and accessible (`role`/`aria-label` + a data table of both series) variants are included.

See **[Shadcn Charts](/components/chart)** for the theming system, dark mode, and the standalone chart types.

## Installation

### chart

**Install:**

```bash
npx shadcn@latest add @designrevision/chart
```

**Dependencies:** recharts, utils, card

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| config * | ChartConfig | — | Maps each data key to { label, icon?, color }. Colors become --color-<key> CSS vars. |
| children * | React.ReactElement (a Recharts chart) | — | A single Recharts chart (BarChart, LineChart, …) — ChartContainer wraps it in a ResponsiveContainer. |

`*` required.

**Usage & accessibility:** A Recharts wrapper themed with CSS variables. Pass a `config` (ChartConfig: each data key → { label, icon?, color }) to <ChartContainer>; it injects --color-<key> vars (scoped per light/dark theme) that your Recharts series reference as fill="var(--color-desktop)". Use <ChartTooltip content={<ChartTooltipContent />}> and <ChartLegend content={<ChartLegendContent />}> for themed tooltips/legends. Colors default to the --chart-1..5 tokens, which re-theme automatically in dark mode. The container needs a height — keep aspect-video / min-h-* or ResponsiveContainer measures 0. This is the base primitive; the Bar/Line/Area/Pie/Radar/Radial chart pages compose it.

```tsx
// components/ui/chart.tsx
"use client"

import * as React from "react"
import * as RechartsPrimitive from "recharts"

import { cn } from "@/lib/utils"

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

  if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

  return context
}

function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
}: React.ComponentProps<"div"> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >["children"]
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`

  return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme || config.color
  )

  if (!colorConfig.length) {
    return null
  }

  return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
}
`
          )
          .join("\n"),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = "dot",
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<"div"> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    indicator?: "line" | "dot" | "dashed"
    nameKey?: string
    labelKey?: string
  }) {
  const { config } = useChart()

  const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
      return null
    }

    const [item] = payload
    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
    const itemConfig = getPayloadConfigFromPayload(config, item, key)
    const value =
      !labelKey && typeof label === "string"
        ? config[label as keyof typeof config]?.label || label
        : itemConfig?.label

    if (labelFormatter) {
      return (
        <div className={cn("font-medium", labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      )
    }

    if (!value) {
      return null
    }

    return <div className={cn("font-medium", labelClassName)}>{value}</div>
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ])

  if (!active || !payload?.length) {
    return null
  }

  const nestLabel = payload.length === 1 && indicator !== "dot"

  return (
    <div
      className={cn(
        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
        className
      )}
    >
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-1.5">
        {payload
          .filter((item) => item.type !== "none")
          .map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

            return (
              <div
                key={item.dataKey}
                className={cn(
                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                            {
                              "h-2.5 w-2.5": indicator === "dot",
                              "w-1": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="text-foreground font-mono font-medium tabular-nums">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
      </div>
    </div>
  )
}

const ChartLegend = RechartsPrimitive.Legend

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = "bottom",
  nameKey,
}: React.ComponentProps<"div"> &
  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
    hideIcon?: boolean
    nameKey?: string
  }) {
  const { config } = useChart()

  if (!payload?.length) {
    return null
  }

  return (
    <div
      className={cn(
        "flex items-center justify-center gap-4",
        verticalAlign === "top" ? "pb-3" : "pt-3",
        className
      )}
    >
      {payload
        .filter((item) => item.type !== "none")
        .map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

          return (
            <div
              key={item.value}
              className={cn(
                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
              )}
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
    </div>
  )
}

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

  const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

  let configLabelKey: string = key

  if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

  return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
```

## Examples

### Combo Chart

The canonical combo — revenue bars and an orders line on a shared axis.

**Install:**

```bash
npx shadcn@latest add @designrevision/combo-chart-demo-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/combo-chart-demo-01.tsx
"use client"

import { Bar, CartesianGrid, ComposedChart, Line, XAxis, YAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", revenue: 186, orders: 80 },
  { month: "February", revenue: 305, orders: 200 },
  { month: "March", revenue: 237, orders: 120 },
  { month: "April", revenue: 273, orders: 190 },
  { month: "May", revenue: 209, orders: 130 },
  { month: "June", revenue: 264, orders: 140 },
]

const chartConfig = {
  revenue: { label: "Revenue", color: "var(--chart-1)" },
  orders: { label: "Orders", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function ComboChartDemo01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Combo Chart</CardTitle>
        <CardDescription>Revenue bars with an orders line</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <ComposedChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 12, right: 12 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <YAxis tickLine={false} axisLine={false} tickMargin={8} />
            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
            <ChartLegend content={<ChartLegendContent />} />
            <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
            <Line
              dataKey="orders"
              type="monotone"
              stroke="var(--color-orders)"
              strokeWidth={2}
              dot={false}
            />
          </ComposedChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Dual axis

Bars and a line on two independent Y scales — $ left, % right.

**Install:**

```bash
npx shadcn@latest add @designrevision/combo-chart-dual-axis-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/combo-chart-dual-axis-01.tsx
"use client"

import { Bar, CartesianGrid, ComposedChart, Line, XAxis, YAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", revenue: 18600, conversion: 3.2 },
  { month: "February", revenue: 30500, conversion: 4.1 },
  { month: "March", revenue: 23700, conversion: 3.6 },
  { month: "April", revenue: 27300, conversion: 4.4 },
  { month: "May", revenue: 20900, conversion: 3.9 },
  { month: "June", revenue: 26400, conversion: 4.8 },
]

const chartConfig = {
  revenue: { label: "Revenue ($)", color: "var(--chart-1)" },
  conversion: { label: "Conversion (%)", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function ComboChartDualAxis01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Combo Chart — Dual Axis</CardTitle>
        <CardDescription>Revenue and conversion on two scales</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <ComposedChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 4, right: 4 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <YAxis
              yAxisId="left"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => `$${value / 1000}k`}
            />
            <YAxis
              yAxisId="right"
              orientation="right"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => `${value}%`}
            />
            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
            <ChartLegend content={<ChartLegendContent />} />
            <Bar
              yAxisId="left"
              dataKey="revenue"
              fill="var(--color-revenue)"
              radius={4}
            />
            <Line
              yAxisId="right"
              dataKey="conversion"
              type="monotone"
              stroke="var(--color-conversion)"
              strokeWidth={2}
              dot={{ fill: "var(--color-conversion)" }}
            />
          </ComposedChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Area + bars

A gradient area trend layered over signup bars.

**Install:**

```bash
npx shadcn@latest add @designrevision/combo-chart-area-bar-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/combo-chart-area-bar-01.tsx
"use client"

import {
  Area,
  Bar,
  CartesianGrid,
  ComposedChart,
  XAxis,
  YAxis,
} from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", visitors: 320, signups: 80 },
  { month: "February", visitors: 410, signups: 200 },
  { month: "March", visitors: 360, signups: 120 },
  { month: "April", visitors: 470, signups: 190 },
  { month: "May", visitors: 420, signups: 130 },
  { month: "June", visitors: 520, signups: 160 },
]

const chartConfig = {
  visitors: { label: "Visitors", color: "var(--chart-1)" },
  signups: { label: "Signups", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function ComboChartAreaBar01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Combo Chart — Area + Bars</CardTitle>
        <CardDescription>A visitors trend over signup bars</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <ComposedChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 12, right: 12 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <YAxis tickLine={false} axisLine={false} tickMargin={8} />
            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
            <ChartLegend content={<ChartLegendContent />} />
            <defs>
              <linearGradient id="fillComboVisitors" x1="0" y1="0" x2="0" y2="1">
                <stop
                  offset="5%"
                  stopColor="var(--color-visitors)"
                  stopOpacity={0.6}
                />
                <stop
                  offset="95%"
                  stopColor="var(--color-visitors)"
                  stopOpacity={0.05}
                />
              </linearGradient>
            </defs>
            <Area
              dataKey="visitors"
              type="monotone"
              fill="url(#fillComboVisitors)"
              stroke="var(--color-visitors)"
              strokeWidth={2}
            />
            <Bar
              dataKey="signups"
              fill="var(--color-signups)"
              radius={4}
              barSize={20}
            />
          </ComposedChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Stacked bars + line

Stacked desktop/mobile bars with an average line overlaid.

**Install:**

```bash
npx shadcn@latest add @designrevision/combo-chart-stacked-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/combo-chart-stacked-01.tsx
"use client"

import { Bar, CartesianGrid, ComposedChart, Line, XAxis, YAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 120, mobile: 66, average: 93 },
  { month: "February", desktop: 200, mobile: 105, average: 152 },
  { month: "March", desktop: 150, mobile: 87, average: 118 },
  { month: "April", desktop: 175, mobile: 98, average: 136 },
  { month: "May", desktop: 140, mobile: 69, average: 104 },
  { month: "June", desktop: 190, mobile: 74, average: 132 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
  average: { label: "Average", color: "var(--chart-4)" },
} satisfies ChartConfig

export default function ComboChartStacked01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Combo Chart — Stacked + Line</CardTitle>
        <CardDescription>Stacked bars with an average line</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <ComposedChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 12, right: 12 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <YAxis tickLine={false} axisLine={false} tickMargin={8} />
            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
            <ChartLegend content={<ChartLegendContent />} />
            <Bar
              dataKey="desktop"
              stackId="a"
              fill="var(--color-desktop)"
              radius={[0, 0, 4, 4]}
            />
            <Bar
              dataKey="mobile"
              stackId="a"
              fill="var(--color-mobile)"
              radius={[4, 4, 0, 0]}
            />
            <Line
              dataKey="average"
              type="monotone"
              stroke="var(--color-average)"
              strokeWidth={2}
              dot={false}
            />
          </ComposedChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Target reference line

Sales bars against a dashed ReferenceLine target with a label.

**Install:**

```bash
npx shadcn@latest add @designrevision/combo-chart-target-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/combo-chart-target-01.tsx
"use client"

import {
  Bar,
  CartesianGrid,
  ComposedChart,
  ReferenceLine,
  XAxis,
  YAxis,
} from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", sales: 186 },
  { month: "February", sales: 305 },
  { month: "March", sales: 237 },
  { month: "April", sales: 273 },
  { month: "May", sales: 209 },
  { month: "June", sales: 264 },
]

const TARGET = 250

const chartConfig = {
  sales: { label: "Sales", color: "var(--chart-1)" },
  target: { label: "Target", color: "var(--chart-3)" },
} satisfies ChartConfig

export default function ComboChartTarget01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Combo Chart — Target Line</CardTitle>
        <CardDescription>Sales bars against a target reference</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <ComposedChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 12, right: 12, top: 16 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <YAxis tickLine={false} axisLine={false} tickMargin={8} />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel />}
            />
            <Bar dataKey="sales" fill="var(--color-sales)" radius={4} />
            <ReferenceLine
              y={TARGET}
              stroke="var(--color-target)"
              strokeDasharray="4 4"
              strokeWidth={2}
              label={{
                value: `Target ${TARGET}`,
                position: "insideTopRight",
                fill: "var(--color-target)",
                fontSize: 11,
              }}
            />
          </ComposedChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Loading state

A skeleton shaped like the combo chart.

**Install:**

```bash
npx shadcn@latest add @designrevision/combo-chart-loading-01
```

**Dependencies:** card, skeleton

```tsx
// components/ui/combo-chart-loading-01.tsx
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

// A loading state for a combo chart — skeleton bars at varying heights.
const bars = [55, 88, 70, 78, 62, 82]

export default function ComboChartLoading01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader className="gap-2">
        <Skeleton className="h-5 w-28" />
        <Skeleton className="h-4 w-44" />
      </CardHeader>
      <CardContent>
        <div className="flex aspect-video items-end justify-between gap-2 px-1 pb-6">
          {bars.map((height, i) => (
            <Skeleton
              key={i}
              className="w-full rounded-md rounded-b-none"
              style={{ height: `${height}%` }}
            />
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
```

---

### Empty state

A graceful no-data state with an icon and message.

**Install:**

```bash
npx shadcn@latest add @designrevision/combo-chart-empty-01
```

**Dependencies:** lucide-react, card

```tsx
// components/ui/combo-chart-empty-01.tsx
import { ChartColumnBig } from "lucide-react"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export default function ComboChartEmpty01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Combo Chart</CardTitle>
        <CardDescription>Revenue and orders</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex aspect-video flex-col items-center justify-center gap-2 rounded-lg border border-dashed text-center">
          <ChartColumnBig className="text-muted-foreground size-8" />
          <div className="text-sm font-medium">No data to display</div>
          <p className="text-muted-foreground max-w-[15rem] text-xs">
            Your metrics will appear here once data comes in.
          </p>
        </div>
      </CardContent>
    </Card>
  )
}
```

---

### Accessible

role/aria-label with a screen-reader data table of both series.

**Install:**

```bash
npx shadcn@latest add @designrevision/combo-chart-a11y-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/combo-chart-a11y-01.tsx
"use client"

import { Bar, CartesianGrid, ComposedChart, Line, XAxis, YAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", revenue: 186, orders: 80 },
  { month: "February", revenue: 305, orders: 200 },
  { month: "March", revenue: 237, orders: 120 },
  { month: "April", revenue: 273, orders: 190 },
  { month: "May", revenue: 209, orders: 130 },
  { month: "June", revenue: 264, orders: 140 },
]

const chartConfig = {
  revenue: { label: "Revenue", color: "var(--chart-1)" },
  orders: { label: "Orders", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function ComboChartA11y01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Accessible Combo Chart</CardTitle>
        <CardDescription>
          Revenue and orders, with a data table
        </CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer
          config={chartConfig}
          role="img"
          aria-label="Combo chart of revenue (bars) and orders (line) by month, January to June 2024."
        >
          <ComposedChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 12, right: 12 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <YAxis tickLine={false} axisLine={false} tickMargin={8} />
            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
            <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
            <Line
              dataKey="orders"
              type="monotone"
              stroke="var(--color-orders)"
              strokeWidth={2}
              dot={false}
            />
          </ComposedChart>
        </ChartContainer>

        {/* Visually-hidden data-table fallback for assistive technology. */}
        <table className="sr-only">
          <caption>Revenue and orders by month</caption>
          <thead>
            <tr>
              <th scope="col">Month</th>
              <th scope="col">Revenue</th>
              <th scope="col">Orders</th>
            </tr>
          </thead>
          <tbody>
            {chartData.map((row) => (
              <tr key={row.month}>
                <th scope="row">{row.month}</th>
                <td>{row.revenue}</td>
                <td>{row.orders}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </CardContent>
    </Card>
  )
}
```

---

# Shadcn Command

> Free shadcn/ui command component for React — the cmdk-powered command menu and ⌘K palette. Nested pages, custom filtering, async search, and a Popover combobox. The examples official shadcn never shipped.

Source: https://designrevision.com/components/command

The **Shadcn Command** is the command menu and ⌘K palette — the canonical <a href="https://ui.shadcn.com/docs/components/command" rel="nofollow">shadcn/ui</a> command built on <a href="https://cmdk.paco.me/" rel="nofollow">**cmdk**</a>, with fuzzy search, keyboard navigation, grouping, and a `CommandDialog` for the palette. Official ships a basic menu and a ⌘K demo; the examples below cover what real apps need — **nested pages**, custom filtering, async search, and a [Popover](/components/popover) combobox.

## Built on cmdk

The Command is a thin, styled wrapper over <a href="https://cmdk.paco.me/" rel="nofollow">**cmdk**</a>, Paco Coursey's command-menu library. cmdk owns the hard parts — **fuzzy filtering and ranking**, full **keyboard navigation**, grouping, and the accessibility wiring — so the shadcn layer only adds Tailwind styling and your design tokens. Install it once:

```bash
npm install cmdk
```

Every example below — the palette, nested pages, custom filters, async search, the combobox — is cmdk surfaced through the shadcn parts (`Command`, `CommandDialog`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem`, `CommandSeparator`, `CommandShortcut`). (Prefer a heavier, action-registry approach? Libraries like **kbar** exist — but for most apps cmdk + this Command is lighter and matches your design system.)

## The ⌘K command palette

The palette is the marquee use. Wrap your list in `CommandDialog`, hold its `open` state, and register a global keydown listener:

```tsx
React.useEffect(() => {
  const down = (e: KeyboardEvent) => {
    if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault()
      setOpen((open) => !open)
    }
  }
  document.addEventListener("keydown", down)
  return () => document.removeEventListener("keydown", down)
}, [])
```

`CommandDialog` renders the Command inside a [Dialog](/components/dialog) with an `sr-only` title and description so it's announced to screen readers. The ⌘K command palette example is the complete version, with a [Kbd](/components/kbd) badge in the trigger.

## Inline, Dialog & Combobox

The same Command renders three ways depending on its container:

- **Inline** — drop `Command` straight into the page for an always-visible menu (the Command menu example).
- **Dialog** — wrap it in `CommandDialog` for the ⌘K palette.
- **Combobox** — put it inside a [Popover](/components/popover) anchored to a button for a searchable select (the Combobox example).

## Custom filtering & keywords

cmdk filters on each item's value by default. To match **synonyms**, add a `keywords` array to a `CommandItem`; to control ranking yourself, pass a `filter` to `Command`:

```tsx
<Command filter={(value, search, keywords) => /* return a score, 0 = hide */}>
```

The Custom filter & keywords example makes searching "appearance" surface "Toggle theme".

## Nested pages (sub-commands)

Real palettes drill in — "Change theme…" opens a Light/Dark/System sub-list. Keep a **stack of page names** in state: render root items when it's empty, a sub-page's items when its name is on top, and push the next page from `onSelect`. Pop on Escape or on Backspace when the search is empty. The Nested pages example is the full pattern.

## Async / server-side search

For server search, set `shouldFilter={false}` so cmdk stops filtering locally, drive `CommandInput` as a controlled value, debounce a request, and render the results you receive — with a loading row in between. The Async / server search example simulates the full round-trip.

## Keyboard & accessibility

cmdk handles arrow-key navigation, Enter to select, and type-ahead out of the box; items expose `data-selected` / `data-disabled` for styling. Always give `CommandDialog` a title (it's `sr-only` by default) so the palette is announced. The Keyboard footer example adds visible [Kbd](/components/kbd) hints — ↵ to select, ↑↓ to navigate, esc to close.

## Theming

The Command reads your design tokens — `--popover`, `--accent` (the highlighted item), `--muted-foreground` (headings and shortcuts) — so it follows your theme, including dark mode, with no overrides.

## Installation

### command

**Install:**

```bash
npx shadcn@latest add @designrevision/command
```

**Dependencies:** cmdk, lucide-react, utils, dialog

**Usage & accessibility:** A cmdk-based searchable list. Composes from Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, and CommandShortcut. CommandDialog wraps the list in a Dialog for a ⌘K palette (accepts title/description for screen readers and showCloseButton); pair it with a keydown listener on metaKey+k. Set shouldFilter={false} on Command for server-side search.

```tsx
// components/ui/command.tsx
"use client"

import * as React from "react"
import { Command as CommandPrimitive } from "cmdk"
import { SearchIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"

function Command({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive>) {
  return (
    <CommandPrimitive
      data-slot="command"
      className={cn(
        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
        className
      )}
      {...props}
    />
  )
}

function CommandDialog({
  title = "Command Palette",
  description = "Search for a command to run...",
  children,
  className,
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof Dialog> & {
  title?: string
  description?: string
  className?: string
  showCloseButton?: boolean
}) {
  return (
    <Dialog {...props}>
      <DialogHeader className="sr-only">
        <DialogTitle>{title}</DialogTitle>
        <DialogDescription>{description}</DialogDescription>
      </DialogHeader>
      <DialogContent
        className={cn("overflow-hidden p-0", className)}
        showCloseButton={showCloseButton}
      >
        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  )
}

function CommandInput({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
  return (
    <div
      data-slot="command-input-wrapper"
      className="flex h-9 items-center gap-2 border-b px-3"
    >
      <SearchIcon className="size-4 shrink-0 opacity-50" />
      <CommandPrimitive.Input
        data-slot="command-input"
        className={cn(
          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
          className
        )}
        {...props}
      />
    </div>
  )
}

function CommandList({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.List>) {
  return (
    <CommandPrimitive.List
      data-slot="command-list"
      className={cn(
        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
        className
      )}
      {...props}
    />
  )
}

function CommandEmpty({
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
  return (
    <CommandPrimitive.Empty
      data-slot="command-empty"
      className="py-6 text-center text-sm"
      {...props}
    />
  )
}

function CommandGroup({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
  return (
    <CommandPrimitive.Group
      data-slot="command-group"
      className={cn(
        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
        className
      )}
      {...props}
    />
  )
}

function CommandSeparator({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
  return (
    <CommandPrimitive.Separator
      data-slot="command-separator"
      className={cn("bg-border -mx-1 h-px", className)}
      {...props}
    />
  )
}

function CommandItem({
  className,
  ...props
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
  return (
    <CommandPrimitive.Item
      data-slot="command-item"
      className={cn(
        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    />
  )
}

function CommandShortcut({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="command-shortcut"
      className={cn(
        "text-muted-foreground ml-auto text-xs tracking-widest",
        className
      )}
      {...props}
    />
  )
}

export {
  Command,
  CommandDialog,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandSeparator,
  CommandShortcut,
}
```

## Examples

### Command menu

An inline menu — grouped items with icons and shortcuts, a separator, a disabled item, and a no-results state.

**Install:**

```bash
npx shadcn@latest add @designrevision/command-demo-01
```

**Dependencies:** lucide-react, command

```tsx
// components/ui/command-demo-01.tsx
import {
  CalculatorIcon,
  CalendarIcon,
  CreditCardIcon,
  SettingsIcon,
  SmileIcon,
  UserIcon,
} from "lucide-react"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command"

export default function CommandDemo01() {
  return (
    <Command className="rounded-lg border shadow-md md:min-w-[450px]">
      <CommandInput placeholder="Type a command or search…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <CalendarIcon />
            <span>Calendar</span>
          </CommandItem>
          <CommandItem>
            <SmileIcon />
            <span>Search Emoji</span>
          </CommandItem>
          <CommandItem disabled>
            <CalculatorIcon />
            <span>Calculator</span>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>
            <UserIcon />
            <span>Profile</span>
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <CreditCardIcon />
            <span>Billing</span>
            <CommandShortcut>⌘B</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <SettingsIcon />
            <span>Settings</span>
            <CommandShortcut>⌘S</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}
```

---

### ⌘K command palette

The keyboard-driven palette — `CommandDialog` opened with a **⌘K / Ctrl+K** keydown listener, with a [Kbd](/components/kbd) hint in the trigger.

**Install:**

```bash
npx shadcn@latest add @designrevision/command-dialog-01
```

**Dependencies:** lucide-react, command, button, kbd

```tsx
// components/ui/command-dialog-01.tsx
"use client"

import * as React from "react"
import {
  CalendarIcon,
  CreditCardIcon,
  SettingsIcon,
  SmileIcon,
  UserIcon,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command"
import { Kbd } from "@/components/ui/kbd"

export default function CommandDialog01() {
  const [open, setOpen] = React.useState(false)

  React.useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        setOpen((open) => !open)
      }
    }
    document.addEventListener("keydown", down)
    return () => document.removeEventListener("keydown", down)
  }, [])

  const runCommand = React.useCallback(() => setOpen(false), [])

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        <span className="text-muted-foreground">Search…</span>
        <Kbd className="ml-2">⌘K</Kbd>
      </Button>
      <CommandDialog open={open} onOpenChange={setOpen}>
        <CommandInput placeholder="Type a command or search…" />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Suggestions">
            <CommandItem onSelect={runCommand}>
              <CalendarIcon />
              <span>Calendar</span>
            </CommandItem>
            <CommandItem onSelect={runCommand}>
              <SmileIcon />
              <span>Search Emoji</span>
            </CommandItem>
          </CommandGroup>
          <CommandSeparator />
          <CommandGroup heading="Settings">
            <CommandItem onSelect={runCommand}>
              <UserIcon />
              <span>Profile</span>
              <CommandShortcut>⌘P</CommandShortcut>
            </CommandItem>
            <CommandItem onSelect={runCommand}>
              <CreditCardIcon />
              <span>Billing</span>
              <CommandShortcut>⌘B</CommandShortcut>
            </CommandItem>
            <CommandItem onSelect={runCommand}>
              <SettingsIcon />
              <span>Settings</span>
              <CommandShortcut>⌘S</CommandShortcut>
            </CommandItem>
          </CommandGroup>
        </CommandList>
      </CommandDialog>
    </>
  )
}
```

---

### Nested pages

Items push **sub-pages** onto a stack; Backspace on an empty search pops back — the cmdk multi-level pattern.

**Install:**

```bash
npx shadcn@latest add @designrevision/command-nested-01
```

**Dependencies:** command

```tsx
// components/ui/command-nested-01.tsx
"use client"

import * as React from "react"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"

export default function CommandNested01() {
  const [pages, setPages] = React.useState<string[]>([])
  const [search, setSearch] = React.useState("")
  const page = pages[pages.length - 1]

  const push = (next: string) => {
    setPages((prev) => [...prev, next])
    setSearch("")
  }

  return (
    <Command
      className="rounded-lg border shadow-md md:min-w-[450px]"
      onKeyDown={(e) => {
        if (pages.length > 0 && (e.key === "Escape" || (e.key === "Backspace" && !search))) {
          e.preventDefault()
          setPages((prev) => prev.slice(0, -1))
        }
      }}
    >
      <CommandInput
        value={search}
        onValueChange={setSearch}
        placeholder={page ? `Search ${page}…` : "Type a command — Backspace to go back…"}
      />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        {!page && (
          <CommandGroup heading="Home">
            <CommandItem onSelect={() => push("projects")}>Search projects…</CommandItem>
            <CommandItem onSelect={() => push("teams")}>Join a team…</CommandItem>
            <CommandItem onSelect={() => push("theme")}>Change theme…</CommandItem>
          </CommandGroup>
        )}
        {page === "projects" && (
          <CommandGroup heading="Projects">
            <CommandItem>Acme Marketing Site</CommandItem>
            <CommandItem>Internal Dashboard</CommandItem>
            <CommandItem>Mobile App</CommandItem>
          </CommandGroup>
        )}
        {page === "teams" && (
          <CommandGroup heading="Teams">
            <CommandItem>Engineering</CommandItem>
            <CommandItem>Design</CommandItem>
            <CommandItem>Marketing</CommandItem>
          </CommandGroup>
        )}
        {page === "theme" && (
          <CommandGroup heading="Theme">
            <CommandItem>Light</CommandItem>
            <CommandItem>Dark</CommandItem>
            <CommandItem>System</CommandItem>
          </CommandGroup>
        )}
      </CommandList>
    </Command>
  )
}
```

---

### Custom filter & keywords

Match items by aliases with a custom `filter` prop and per-item `keywords` — searching "appearance" finds "Toggle theme".

**Install:**

```bash
npx shadcn@latest add @designrevision/command-filter-01
```

**Dependencies:** command

```tsx
// components/ui/command-filter-01.tsx
"use client"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"

export default function CommandFilter01() {
  return (
    <Command
      className="rounded-lg border shadow-md md:min-w-[450px]"
      filter={(value, search, keywords) => {
        const haystack = `${value} ${(keywords ?? []).join(" ")}`.toLowerCase()
        return haystack.includes(search.toLowerCase()) ? 1 : 0
      }}
    >
      <CommandInput placeholder='Try "appearance" or "logout"…' />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Commands">
          <CommandItem
            value="Toggle theme"
            keywords={["appearance", "dark", "light", "mode"]}
          >
            Toggle theme
          </CommandItem>
          <CommandItem value="Sign out" keywords={["logout", "exit", "leave"]}>
            Sign out
          </CommandItem>
          <CommandItem
            value="Open settings"
            keywords={["preferences", "config", "options"]}
          >
            Open settings
          </CommandItem>
          <CommandItem
            value="Invite member"
            keywords={["add", "teammate", "user"]}
          >
            Invite member
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}
```

---

### Async / server search

Server-side search with `shouldFilter={false}`, a debounced request, and a loading state — you own the results.

**Install:**

```bash
npx shadcn@latest add @designrevision/command-async-01
```

**Dependencies:** command

```tsx
// components/ui/command-async-01.tsx
"use client"

import * as React from "react"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"

const FRAMEWORKS = [
  "Next.js",
  "React",
  "Vue",
  "Svelte",
  "Angular",
  "Solid",
  "Astro",
  "Remix",
  "Nuxt",
  "Qwik",
]

export default function CommandAsync01() {
  const [query, setQuery] = React.useState("")
  const [results, setResults] = React.useState<string[]>([])
  const [loading, setLoading] = React.useState(false)

  React.useEffect(() => {
    if (!query) {
      setResults([])
      setLoading(false)
      return
    }
    // Simulate a debounced server request.
    setLoading(true)
    const id = setTimeout(() => {
      setResults(
        FRAMEWORKS.filter((f) => f.toLowerCase().includes(query.toLowerCase()))
      )
      setLoading(false)
    }, 500)
    return () => clearTimeout(id)
  }, [query])

  return (
    <Command
      shouldFilter={false}
      className="rounded-lg border shadow-md md:min-w-[450px]"
    >
      <CommandInput
        value={query}
        onValueChange={setQuery}
        placeholder="Search frameworks (simulated fetch)…"
      />
      <CommandList>
        {loading && (
          <div className="py-6 text-center text-sm text-muted-foreground">
            Searching…
          </div>
        )}
        {!loading && query && results.length === 0 && (
          <CommandEmpty>No results found.</CommandEmpty>
        )}
        {!loading && results.length > 0 && (
          <CommandGroup heading="Frameworks">
            {results.map((framework) => (
              <CommandItem key={framework} value={framework}>
                {framework}
              </CommandItem>
            ))}
          </CommandGroup>
        )}
      </CommandList>
    </Command>
  )
}
```

---

### Combobox (Popover + Command)

The other major cmdk usage — a searchable single-select combobox built from Command inside a [Popover](/components/popover).

**Install:**

```bash
npx shadcn@latest add @designrevision/command-combobox-01
```

**Dependencies:** lucide-react, command, popover, button

```tsx
// components/ui/command-combobox-01.tsx
"use client"

import * as React from "react"
import { CheckIcon, ChevronsUpDownIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

const frameworks = [
  { value: "next.js", label: "Next.js" },
  { value: "sveltekit", label: "SvelteKit" },
  { value: "nuxt.js", label: "Nuxt.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
]

export default function CommandCombobox01() {
  const [open, setOpen] = React.useState(false)
  const [value, setValue] = React.useState("")

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="w-[200px] justify-between"
        >
          {value
            ? frameworks.find((f) => f.value === value)?.label
            : "Select framework…"}
          <ChevronsUpDownIcon className="opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[200px] p-0">
        <Command>
          <CommandInput placeholder="Search framework…" />
          <CommandList>
            <CommandEmpty>No framework found.</CommandEmpty>
            <CommandGroup>
              {frameworks.map((framework) => (
                <CommandItem
                  key={framework.value}
                  value={framework.value}
                  onSelect={(currentValue) => {
                    setValue(currentValue === value ? "" : currentValue)
                    setOpen(false)
                  }}
                >
                  <CheckIcon
                    className={cn(
                      "mr-2",
                      value === framework.value ? "opacity-100" : "opacity-0"
                    )}
                  />
                  {framework.label}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}
```

---

### Disabled & empty

Dimmed, unselectable items via the `disabled` prop, plus the `CommandEmpty` no-results message.

**Install:**

```bash
npx shadcn@latest add @designrevision/command-disabled-01
```

**Dependencies:** command

```tsx
// components/ui/command-disabled-01.tsx
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@/components/ui/command"

export default function CommandDisabled01() {
  return (
    <Command className="rounded-lg border shadow-md md:min-w-[450px]">
      <CommandInput placeholder="Type a term with no match to see the empty state…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Actions">
          <CommandItem>
            New file
            <CommandShortcut>⌘N</CommandShortcut>
          </CommandItem>
          <CommandItem disabled>
            Save (no changes)
            <CommandShortcut>⌘S</CommandShortcut>
          </CommandItem>
          <CommandItem>
            Duplicate
            <CommandShortcut>⌘D</CommandShortcut>
          </CommandItem>
          <CommandItem disabled>Delete (locked)</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}
```

---

### Keyboard footer

An app-grade palette with a sticky footer of [Kbd](/components/kbd) hints — ↵ to select, arrows to navigate, esc to close.

**Install:**

```bash
npx shadcn@latest add @designrevision/command-footer-01
```

**Dependencies:** lucide-react, command, kbd

```tsx
// components/ui/command-footer-01.tsx
import { CornerDownLeftIcon } from "lucide-react"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import { Kbd } from "@/components/ui/kbd"

export default function CommandFooter01() {
  return (
    <Command className="rounded-lg border shadow-md md:min-w-[450px]">
      <CommandInput placeholder="Type a command or search…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Pages">
          <CommandItem>Dashboard</CommandItem>
          <CommandItem>Projects</CommandItem>
          <CommandItem>Team members</CommandItem>
          <CommandItem>Settings</CommandItem>
        </CommandGroup>
      </CommandList>
      <div className="flex items-center justify-between gap-2 border-t px-3 py-2 text-xs text-muted-foreground">
        <div className="flex items-center gap-1">
          <Kbd>
            <CornerDownLeftIcon className="size-3" />
          </Kbd>
          <span>to select</span>
        </div>
        <div className="flex items-center gap-1">
          <Kbd>↑</Kbd>
          <Kbd>↓</Kbd>
          <span>to navigate</span>
          <span className="mx-1">·</span>
          <Kbd>esc</Kbd>
          <span>to close</span>
        </div>
      </div>
    </Command>
  )
}
```

---

# Shadcn Context Menu

> Free shadcn/ui context menu for React — a right-click menu built on Radix: items and shortcuts, a nested submenu, checkbox items, a radio group, and destructive file actions.

Source: https://designrevision.com/components/context-menu

The **Shadcn Context Menu** is a **right-click menu** for React, built on <a href="https://www.radix-ui.com/primitives/docs/components/context-menu" rel="nofollow">Radix</a>. Wrap a region in a trigger, and right-clicking it — or long-pressing on touch — opens a menu of contextual actions at the pointer. Radix handles positioning, keyboard navigation, focus, and ARIA. The examples below cover a basic menu, a submenu, checkbox items, a radio group, and destructive file actions.

## The shape

```tsx
<ContextMenu>
  <ContextMenuTrigger>Right-click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>
      Back <ContextMenuShortcut>⌘[</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem>Reload</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>
```

The `ContextMenuTrigger` is the region you right-click; `ContextMenuContent` is the menu that appears. `ContextMenuItem`, `ContextMenuSeparator`, and `ContextMenuShortcut` build the list.

## Context Menu vs Dropdown Menu

They share the same item parts but open differently:

- **[Dropdown Menu](/components/dropdown-menu)** — opens from a button you **click**.
- **Context Menu** — opens on **right-click** (or long-press) of a region, with no visible button.

Use a context menu for contextual actions on an item — a file, a table row, a canvas; use a dropdown for a menu button.

## Submenus

Nest a `ContextMenuSub` for a second level:

```tsx
<ContextMenuSub>
  <ContextMenuSubTrigger>More tools</ContextMenuSubTrigger>
  <ContextMenuSubContent>{/* … */}</ContextMenuSubContent>
</ContextMenuSub>
```

The trigger shows a chevron and opens on hover or arrow-right.

## Checkbox and radio items

For stateful menus, use checkbox items (independent toggles) or a radio group (single choice):

```tsx
<ContextMenuCheckboxItem checked={showBookmarks} onCheckedChange={setShowBookmarks}>
  Show Bookmarks
</ContextMenuCheckboxItem>

<ContextMenuRadioGroup value={pos} onValueChange={setPos}>
  <ContextMenuRadioItem value="top">Top</ContextMenuRadioItem>
  <ContextMenuRadioItem value="bottom">Bottom</ContextMenuRadioItem>
</ContextMenuRadioGroup>
```

## Destructive actions

Mark a dangerous item with `variant="destructive"` so it reads as risky:

```tsx
<ContextMenuItem variant="destructive">
  <Trash2 /> Delete
</ContextMenuItem>
```

## Accessibility

Radix wires up full keyboard navigation (arrows, Enter, Escape), focus management, and ARIA roles, and opens on long-press on touch. Because right-click isn't discoverable for everyone, reserve context menus for power-user shortcuts and make the same actions reachable another way — a row menu button or a toolbar.

## Installation

### context-menu

**Install:**

```bash
npx shadcn@latest add @designrevision/context-menu
```

**Dependencies:** @radix-ui/react-context-menu, utils

**Usage & accessibility:** A right-click context menu built on Radix — 15 composable parts, the same shape as Dropdown Menu but triggered by right-click. Wrap the target in <ContextMenuTrigger> inside <ContextMenu>, and put <ContextMenuContent> with Items, CheckboxItems, RadioItems, Labels, Separators, Shortcuts, and nested Subs. Item variant="destructive" styles dangerous actions. Use it for in-place actions on a row, canvas, or file.

```tsx
// components/ui/context-menu.tsx
"use client"

import * as React from "react"
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function ContextMenu({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
}

function ContextMenuTrigger({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
  return (
    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
  )
}

function ContextMenuGroup({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
  return (
    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
  )
}

function ContextMenuPortal({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
  return (
    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
  )
}

function ContextMenuSub({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
}

function ContextMenuRadioGroup({
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
  return (
    <ContextMenuPrimitive.RadioGroup
      data-slot="context-menu-radio-group"
      {...props}
    />
  )
}

function ContextMenuSubTrigger({
  className,
  inset,
  children,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
  inset?: boolean
}) {
  return (
    <ContextMenuPrimitive.SubTrigger
      data-slot="context-menu-sub-trigger"
      data-inset={inset}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className="ml-auto" />
    </ContextMenuPrimitive.SubTrigger>
  )
}

function ContextMenuSubContent({
  className,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
  return (
    <ContextMenuPrimitive.SubContent
      data-slot="context-menu-sub-content"
      className={cn(
        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
        className
      )}
      {...props}
    />
  )
}

function ContextMenuContent({
  className,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
  return (
    <ContextMenuPrimitive.Portal>
      <ContextMenuPrimitive.Content
        data-slot="context-menu-content"
        className={cn(
          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
          className
        )}
        {...props}
      />
    </ContextMenuPrimitive.Portal>
  )
}

function ContextMenuItem({
  className,
  inset,
  variant = "default",
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
  inset?: boolean
  variant?: "default" | "destructive"
}) {
  return (
    <ContextMenuPrimitive.Item
      data-slot="context-menu-item"
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    />
  )
}

function ContextMenuCheckboxItem({
  className,
  children,
  checked,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
  return (
    <ContextMenuPrimitive.CheckboxItem
      data-slot="context-menu-checkbox-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      checked={checked}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <ContextMenuPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </ContextMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </ContextMenuPrimitive.CheckboxItem>
  )
}

function ContextMenuRadioItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
  return (
    <ContextMenuPrimitive.RadioItem
      data-slot="context-menu-radio-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <ContextMenuPrimitive.ItemIndicator>
          <CircleIcon className="size-2 fill-current" />
        </ContextMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </ContextMenuPrimitive.RadioItem>
  )
}

function ContextMenuLabel({
  className,
  inset,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
  inset?: boolean
}) {
  return (
    <ContextMenuPrimitive.Label
      data-slot="context-menu-label"
      data-inset={inset}
      className={cn(
        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
        className
      )}
      {...props}
    />
  )
}

function ContextMenuSeparator({
  className,
  ...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
  return (
    <ContextMenuPrimitive.Separator
      data-slot="context-menu-separator"
      className={cn("bg-border -mx-1 my-1 h-px", className)}
      {...props}
    />
  )
}

function ContextMenuShortcut({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="context-menu-shortcut"
      className={cn(
        "text-muted-foreground ml-auto text-xs tracking-widest",
        className
      )}
      {...props}
    />
  )
}

export {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuGroup,
  ContextMenuPortal,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuRadioGroup,
}
```

## Examples

### Basic

The canonical right-click menu — items, shortcuts, and a separator.

**Install:**

```bash
npx shadcn@latest add @designrevision/context-menu-demo-01
```

**Dependencies:** context-menu

```tsx
// components/ui/context-menu-demo-01.tsx
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

export default function ContextMenuDemo01() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="text-muted-foreground flex h-40 w-full max-w-sm items-center justify-center rounded-md border border-dashed text-sm">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-52">
        <ContextMenuItem>
          Back
          <ContextMenuShortcut>⌘[</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem disabled>
          Forward
          <ContextMenuShortcut>⌘]</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Reload
          <ContextMenuShortcut>⌘R</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          Save As…
          <ContextMenuShortcut>⌘S</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Print…
          <ContextMenuShortcut>⌘P</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}
```

---

### With submenu

A nested submenu opened from a parent item.

**Install:**

```bash
npx shadcn@latest add @designrevision/context-menu-submenu-01
```

**Dependencies:** context-menu

```tsx
// components/ui/context-menu-submenu-01.tsx
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

export default function ContextMenuSubmenu01() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="text-muted-foreground flex h-40 w-full max-w-sm items-center justify-center rounded-md border border-dashed text-sm">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-52">
        <ContextMenuItem>
          New Tab
          <ContextMenuShortcut>⌘T</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          New Window
          <ContextMenuShortcut>⌘N</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
          <ContextMenuSubContent className="w-44">
            <ContextMenuItem>Save Page As…</ContextMenuItem>
            <ContextMenuItem>Create Shortcut…</ContextMenuItem>
            <ContextMenuSeparator />
            <ContextMenuItem>Developer Tools</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuSeparator />
        <ContextMenuItem>
          Print…
          <ContextMenuShortcut>⌘P</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}
```

---

### Checkbox items

Toggleable checkbox items grouped under a label.

**Install:**

```bash
npx shadcn@latest add @designrevision/context-menu-checkbox-01
```

**Dependencies:** context-menu

```tsx
// components/ui/context-menu-checkbox-01.tsx
"use client"

import * as React from "react"

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

export default function ContextMenuCheckbox01() {
  const [showBookmarks, setShowBookmarks] = React.useState(true)
  const [showFullUrls, setShowFullUrls] = React.useState(false)

  return (
    <ContextMenu>
      <ContextMenuTrigger className="text-muted-foreground flex h-40 w-full max-w-sm items-center justify-center rounded-md border border-dashed text-sm">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-56">
        <ContextMenuLabel>Appearance</ContextMenuLabel>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem
          checked={showBookmarks}
          onCheckedChange={setShowBookmarks}
        >
          Show Bookmarks Bar
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem
          checked={showFullUrls}
          onCheckedChange={setShowFullUrls}
        >
          Show Full URLs
        </ContextMenuCheckboxItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}
```

---

### Radio items

A single-choice radio group inside the menu.

**Install:**

```bash
npx shadcn@latest add @designrevision/context-menu-radio-01
```

**Dependencies:** context-menu

```tsx
// components/ui/context-menu-radio-01.tsx
"use client"

import * as React from "react"

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

export default function ContextMenuRadio01() {
  const [person, setPerson] = React.useState("pedro")

  return (
    <ContextMenu>
      <ContextMenuTrigger className="text-muted-foreground flex h-40 w-full max-w-sm items-center justify-center rounded-md border border-dashed text-sm">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-56">
        <ContextMenuLabel>Assign to</ContextMenuLabel>
        <ContextMenuSeparator />
        <ContextMenuRadioGroup value={person} onValueChange={setPerson}>
          <ContextMenuRadioItem value="pedro">
            Pedro Duarte
          </ContextMenuRadioItem>
          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
          <ContextMenuRadioItem value="ada">Ada Lovelace</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenu>
  )
}
```

---

### File actions

A file-row menu with icons and a destructive delete item.

**Install:**

```bash
npx shadcn@latest add @designrevision/context-menu-destructive-01
```

**Dependencies:** lucide-react, context-menu

```tsx
// components/ui/context-menu-destructive-01.tsx
import { Copy, Download, Pencil, Trash2 } from "lucide-react"

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

export default function ContextMenuDestructive01() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-40 w-full max-w-sm flex-col items-center justify-center gap-2 rounded-md border border-dashed text-sm">
        <span className="font-medium">document.pdf</span>
        <span className="text-muted-foreground text-xs">Right-click the file</span>
      </ContextMenuTrigger>
      <ContextMenuContent className="w-52">
        <ContextMenuItem>
          <Pencil />
          Rename
          <ContextMenuShortcut>⌘E</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <Copy />
          Duplicate
        </ContextMenuItem>
        <ContextMenuItem>
          <Download />
          Download
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive">
          <Trash2 />
          Delete
          <ContextMenuShortcut>⌫</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}
```

---

# Shadcn Data Table

> Free shadcn/ui data table for React — a reusable <DataTable> built on TanStack Table over the Table primitive. Sorting, row selection, faceted filters, column visibility, row actions, and pagination. The examples official shadcn never shipped.

Source: https://designrevision.com/components/data-table

The **Shadcn Data Table** is the [Table](/components/table) with a brain — a reusable `<DataTable>` built on <a href="https://tanstack.com/table" rel="nofollow">**TanStack Table**</a> that adds sorting, filtering, faceted filters, column visibility, row selection, row actions, and pagination. shadcn ships this as a step-by-step *guide*; we package it as a drop-in component plus the standard helpers, with examples that build up from a basic table to the full "tasks" showcase.

## Built on TanStack Table

The Data Table is the static [Table](/components/table) primitive driven by <a href="https://tanstack.com/table" rel="nofollow">**`@tanstack/react-table`**</a> — a **headless** library that owns the data logic (the row models for sorting, filtering, pagination, faceting, selection, expansion) and leaves the markup to you. shadcn supplies the markup via the Table primitive; we wire the two together. Install it once:

```bash
npm install @tanstack/react-table
```

## Table vs Data Table

Reach for the right one:

- **[Table](/components/table)** — static, styled markup with no dependency. It already does sorting, selection, and pagination in **plain React state** for moderate data.
- **Data Table** — a **column-driven** table where one engine handles sorting, filtering, faceted filters, visibility, and pagination together. Worth it once the feature set grows.

## The `<DataTable>` wrapper

Rather than hand-wiring `useReactTable` every time, pass your `columns` and `data` to the wrapper. It owns the state (sorting, filters, visibility, selection), the render loop, the empty state, and the pagination bar:

```tsx
<DataTable columns={columns} data={data} />
```

Columns are TanStack `ColumnDef`s — `accessorKey`, a `header`, and an optional `cell` renderer. For anything above the table (search, filters, view options) pass a **`toolbar`** render-prop, which receives the live `table` instance:

```tsx
<DataTable columns={columns} data={data} toolbar={(table) => <MyToolbar table={table} />} />
```

## Sorting

Render a column's header with `DataTableColumnHeader` and it becomes a menu with **Asc / Desc / Hide**, backed by `getSortedRowModel()`:

```tsx
header: ({ column }) => <DataTableColumnHeader column={column} title="Email" />
```

The menu uses [Dropdown Menu](/components/dropdown-menu), so it's fully keyboard-navigable. The Data Table example has three sortable columns.

## Filtering & faceted filters

A simple filter is an [Input](/components/input) bound to a column (the Filter toolbar example). A **faceted filter** is the data-table classic — a multi-select dropdown ([Popover](/components/popover) + [Command](/components/command)) with live counts and selected-value badges:

```tsx
<DataTableFacetedFilter column={table.getColumn("status")} title="Status" options={statuses} />
```

Give the column a `filterFn` that checks array membership and the facet counts populate from `getFacetedUniqueValues()`. The Faceted filters example filters tasks by status.

## Selection, visibility & row actions

- **Row selection** — add a checkbox column whose header drives `toggleAllPageRowsSelected` (with an indeterminate state) and whose cell drives `row.toggleSelected`. The pagination bar reports "N of M selected".
- **Column visibility** — drop `<DataTableViewOptions table={table} />` in the toolbar for a [Dropdown Menu](/components/dropdown-menu) of show/hide checkboxes.
- **Row actions** — add an actions column rendering `<DataTableRowActions row={row} />` — a "⋯" menu with edit, copy, and a destructive delete.

The **Full tasks table** example assembles all of these — selection, sortable headers, two faceted filters, global search, view options, row actions, and pagination — the layout everyone means by "shadcn data table".

## Server-side data

The wrapper is **client-side**, which is ideal for hundreds to a few thousand rows. For large or server-paged datasets, TanStack supports **manual mode**: set `manualSorting` / `manualFiltering` / `manualPagination`, drive the state from your query, and fetch each page from your API instead of the client row models.

## Accessibility & theming

The Data Table inherits the [Table](/components/table)'s semantic HTML, and the menu-driven pieces use [Dropdown Menu](/components/dropdown-menu)'s roving-focus keyboard semantics, so headers, actions, and view options are all keyboard-operable. Everything reads your design tokens — `--border`, `--muted`, `--accent`, `--primary` — so it follows your theme, including dark mode, with no overrides.

## Installation

### data-table

**Install:**

```bash
npx shadcn@latest add @designrevision/data-table
```

**Dependencies:** @tanstack/react-table, utils, table, button, @designrevision/select, badge, dropdown-menu, popover, command

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| columns * | ColumnDef<TData, TValue>[] | — | TanStack column definitions (accessorKey, header, cell). |
| data * | TData[] | — | The row data. |
| toolbar | (table) => React.ReactNode | — | Optional toolbar rendered above the table; receives the table instance for search, faceted filters, and view options. |

`*` required.

**Usage & accessibility:** A reusable Data Table built on @tanstack/react-table over the Table primitive. <DataTable columns data /> wires up sorting, filtering, pagination, row selection, column visibility, and faceting; pass a toolbar render-prop for search/facets/view-options. Ships with DataTableColumnHeader, DataTablePagination, DataTableViewOptions, DataTableFacetedFilter, and DataTableRowActions helpers. The menu-driven pieces (column header, view options, row actions) use Dropdown Menu; faceted filters use Popover + Command.

```tsx
// components/ui/data-table.tsx
"use client"

export { DataTableColumnHeader } from "./data-table-column-header"
export { DataTablePagination } from "./data-table-pagination"
export { DataTableViewOptions } from "./data-table-view-options"
export { DataTableFacetedFilter } from "./data-table-faceted-filter"
export { DataTableRowActions } from "./data-table-row-actions"

import * as React from "react"
import {
  type ColumnDef,
  type ColumnFiltersState,
  type SortingState,
  type Table as TanStackTable,
  type VisibilityState,
  flexRender,
  getCoreRowModel,
  getFacetedRowModel,
  getFacetedUniqueValues,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table"

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { DataTablePagination } from "./data-table-pagination"

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[]
  data: TData[]
  /** Optional toolbar rendered above the table; receives the table instance. */
  toolbar?: (table: TanStackTable<TData>) => React.ReactNode
}

export function DataTable<TData, TValue>({
  columns,
  data,
  toolbar,
}: DataTableProps<TData, TValue>) {
  const [sorting, setSorting] = React.useState<SortingState>([])
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
    []
  )
  const [columnVisibility, setColumnVisibility] =
    React.useState<VisibilityState>({})
  const [rowSelection, setRowSelection] = React.useState({})

  const table = useReactTable({
    data,
    columns,
    state: { sorting, columnFilters, columnVisibility, rowSelection },
    enableRowSelection: true,
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    onColumnVisibilityChange: setColumnVisibility,
    onRowSelectionChange: setRowSelection,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFacetedRowModel: getFacetedRowModel(),
    getFacetedUniqueValues: getFacetedUniqueValues(),
  })

  return (
    <div className="space-y-4">
      {toolbar?.(table)}
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => (
                  <TableHead key={header.id} colSpan={header.colSpan}>
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                          header.column.columnDef.header,
                          header.getContext()
                        )}
                  </TableHead>
                ))}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
                >
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell
                  colSpan={columns.length}
                  className="h-24 text-center"
                >
                  No results.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
      <DataTablePagination table={table} />
    </div>
  )
}
```

```tsx
// components/ui/data-table-pagination.tsx
"use client"

import {
  ChevronLeftIcon,
  ChevronRightIcon,
  ChevronsLeftIcon,
  ChevronsRightIcon,
} from "lucide-react"
import { type Table } from "@tanstack/react-table"

import { Button } from "@/components/ui/button"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

interface DataTablePaginationProps<TData> {
  table: Table<TData>
  pageSizeOptions?: number[]
}

export function DataTablePagination<TData>({
  table,
  pageSizeOptions = [5, 10, 20, 30],
}: DataTablePaginationProps<TData>) {
  return (
    <div className="flex flex-wrap items-center justify-between gap-4 px-2">
      <div className="text-muted-foreground flex-1 text-sm whitespace-nowrap">
        {table.getFilteredSelectedRowModel().rows.length} of{" "}
        {table.getFilteredRowModel().rows.length} row(s) selected.
      </div>
      <div className="flex items-center gap-4 lg:gap-8">
        <div className="flex items-center gap-2">
          <p className="text-sm font-medium">Rows per page</p>
          <Select
            value={`${table.getState().pagination.pageSize}`}
            onValueChange={(value) => table.setPageSize(Number(value))}
          >
            <SelectTrigger className="h-8 w-[70px]">
              <SelectValue placeholder={table.getState().pagination.pageSize} />
            </SelectTrigger>
            <SelectContent side="top">
              {pageSizeOptions.map((size) => (
                <SelectItem key={size} value={`${size}`}>
                  {size}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
          Page {table.getState().pagination.pageIndex + 1} of{" "}
          {table.getPageCount()}
        </div>
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="icon"
            className="hidden size-8 lg:flex"
            onClick={() => table.setPageIndex(0)}
            disabled={!table.getCanPreviousPage()}
            aria-label="Go to first page"
          >
            <ChevronsLeftIcon />
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            onClick={() => table.previousPage()}
            disabled={!table.getCanPreviousPage()}
            aria-label="Go to previous page"
          >
            <ChevronLeftIcon />
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            onClick={() => table.nextPage()}
            disabled={!table.getCanNextPage()}
            aria-label="Go to next page"
          >
            <ChevronRightIcon />
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="hidden size-8 lg:flex"
            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
            disabled={!table.getCanNextPage()}
            aria-label="Go to last page"
          >
            <ChevronsRightIcon />
          </Button>
        </div>
      </div>
    </div>
  )
}
```

```tsx
// components/ui/data-table-column-header.tsx
"use client"

import {
  ArrowDownIcon,
  ArrowUpIcon,
  ChevronsUpDownIcon,
  EyeOffIcon,
} from "lucide-react"
import { type Column } from "@tanstack/react-table"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

interface DataTableColumnHeaderProps<TData, TValue>
  extends React.HTMLAttributes<HTMLDivElement> {
  column: Column<TData, TValue>
  title: string
}

export function DataTableColumnHeader<TData, TValue>({
  column,
  title,
  className,
}: DataTableColumnHeaderProps<TData, TValue>) {
  if (!column.getCanSort()) {
    return <div className={cn(className)}>{title}</div>
  }

  return (
    <div className={cn("flex items-center gap-2", className)}>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            variant="ghost"
            size="sm"
            className="data-[state=open]:bg-accent -ml-3 h-8"
          >
            <span>{title}</span>
            {column.getIsSorted() === "desc" ? (
              <ArrowDownIcon />
            ) : column.getIsSorted() === "asc" ? (
              <ArrowUpIcon />
            ) : (
              <ChevronsUpDownIcon />
            )}
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start">
          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
            <ArrowUpIcon className="text-muted-foreground/70" />
            Asc
          </DropdownMenuItem>
          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
            <ArrowDownIcon className="text-muted-foreground/70" />
            Desc
          </DropdownMenuItem>
          {column.getCanHide() && (
            <>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
                <EyeOffIcon className="text-muted-foreground/70" />
                Hide
              </DropdownMenuItem>
            </>
          )}
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}
```

```tsx
// components/ui/data-table-view-options.tsx
"use client"

import { Settings2Icon } from "lucide-react"
import { type Table } from "@tanstack/react-table"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

interface DataTableViewOptionsProps<TData> {
  table: Table<TData>
}

export function DataTableViewOptions<TData>({
  table,
}: DataTableViewOptionsProps<TData>) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="sm" className="ml-auto h-8">
          <Settings2Icon />
          View
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-[150px]">
        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
        <DropdownMenuSeparator />
        {table
          .getAllColumns()
          .filter(
            (column) =>
              typeof column.accessorFn !== "undefined" && column.getCanHide()
          )
          .map((column) => (
            <DropdownMenuCheckboxItem
              key={column.id}
              className="capitalize"
              checked={column.getIsVisible()}
              onCheckedChange={(value) => column.toggleVisibility(!!value)}
            >
              {column.id}
            </DropdownMenuCheckboxItem>
          ))}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

```tsx
// components/ui/data-table-faceted-filter.tsx
"use client"

import * as React from "react"
import { CheckIcon, PlusCircleIcon } from "lucide-react"
import { type Column } from "@tanstack/react-table"

import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

interface FacetedFilterOption {
  label: string
  value: string
  icon?: React.ComponentType<{ className?: string }>
}

interface DataTableFacetedFilterProps<TData, TValue> {
  column?: Column<TData, TValue>
  title?: string
  options: FacetedFilterOption[]
}

export function DataTableFacetedFilter<TData, TValue>({
  column,
  title,
  options,
}: DataTableFacetedFilterProps<TData, TValue>) {
  const facets = column?.getFacetedUniqueValues()
  const selectedValues = new Set(column?.getFilterValue() as string[])

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" size="sm" className="h-8 border-dashed">
          <PlusCircleIcon />
          {title}
          {selectedValues?.size > 0 && (
            <>
              <div className="bg-border mx-2 h-4 w-px" />
              <Badge
                variant="secondary"
                className="rounded-sm px-1 font-normal lg:hidden"
              >
                {selectedValues.size}
              </Badge>
              <div className="hidden gap-1 lg:flex">
                {selectedValues.size > 2 ? (
                  <Badge
                    variant="secondary"
                    className="rounded-sm px-1 font-normal"
                  >
                    {selectedValues.size} selected
                  </Badge>
                ) : (
                  options
                    .filter((option) => selectedValues.has(option.value))
                    .map((option) => (
                      <Badge
                        variant="secondary"
                        key={option.value}
                        className="rounded-sm px-1 font-normal"
                      >
                        {option.label}
                      </Badge>
                    ))
                )}
              </div>
            </>
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[200px] p-0" align="start">
        <Command>
          <CommandInput placeholder={title} />
          <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup>
              {options.map((option) => {
                const isSelected = selectedValues.has(option.value)
                return (
                  <CommandItem
                    key={option.value}
                    onSelect={() => {
                      if (isSelected) {
                        selectedValues.delete(option.value)
                      } else {
                        selectedValues.add(option.value)
                      }
                      const filterValues = Array.from(selectedValues)
                      column?.setFilterValue(
                        filterValues.length ? filterValues : undefined
                      )
                    }}
                  >
                    <div
                      className={cn(
                        "flex size-4 items-center justify-center rounded-[4px] border",
                        isSelected
                          ? "bg-primary border-primary text-primary-foreground"
                          : "border-input [&_svg]:invisible"
                      )}
                    >
                      <CheckIcon className="size-3.5" />
                    </div>
                    {option.icon && (
                      <option.icon className="text-muted-foreground size-4" />
                    )}
                    <span>{option.label}</span>
                    {facets?.get(option.value) && (
                      <span className="ml-auto flex size-4 items-center justify-center font-mono text-xs">
                        {facets.get(option.value)}
                      </span>
                    )}
                  </CommandItem>
                )
              })}
            </CommandGroup>
            {selectedValues.size > 0 && (
              <>
                <CommandSeparator />
                <CommandGroup>
                  <CommandItem
                    onSelect={() => column?.setFilterValue(undefined)}
                    className="justify-center text-center"
                  >
                    Clear filters
                  </CommandItem>
                </CommandGroup>
              </>
            )}
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}
```

```tsx
// components/ui/data-table-row-actions.tsx
"use client"

import { MoreHorizontalIcon } from "lucide-react"
import { type Row } from "@tanstack/react-table"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

interface DataTableRowActionsProps<TData> {
  row: Row<TData>
  onEdit?: (row: Row<TData>) => void
  onDelete?: (row: Row<TData>) => void
}

export function DataTableRowActions<TData>({
  row,
  onEdit,
  onDelete,
}: DataTableRowActionsProps<TData>) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          size="icon"
          className="data-[state=open]:bg-muted size-8"
        >
          <MoreHorizontalIcon />
          <span className="sr-only">Open menu</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-[160px]">
        <DropdownMenuItem onClick={() => onEdit?.(row)}>Edit</DropdownMenuItem>
        <DropdownMenuItem>Make a copy</DropdownMenuItem>
        <DropdownMenuItem>Favorite</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive" onClick={() => onDelete?.(row)}>
          Delete
          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

## Examples

### Data Table

The reusable `<DataTable columns data />` over TanStack Table — sortable column-header menus, pagination, and an empty state out of the box.

**Install:**

```bash
npx shadcn@latest add @designrevision/data-table-demo-01
```

**Dependencies:** @designrevision/data-table

```tsx
// components/ui/data-table-demo-01.tsx
"use client"

import { type ColumnDef } from "@tanstack/react-table"

import { DataTable, DataTableColumnHeader } from "@/components/ui/data-table"

type Payment = {
  id: string
  amount: number
  status: "pending" | "processing" | "success" | "failed"
  email: string
}

const data: Payment[] = [
  { id: "1", amount: 316, status: "success", email: "ken99@example.com" },
  { id: "2", amount: 242, status: "success", email: "abe45@example.com" },
  { id: "3", amount: 837, status: "processing", email: "monserrat44@example.com" },
  { id: "4", amount: 874, status: "success", email: "silas22@example.com" },
  { id: "5", amount: 721, status: "failed", email: "carmella@example.com" },
  { id: "6", amount: 459, status: "pending", email: "jordan78@example.com" },
  { id: "7", amount: 633, status: "processing", email: "nina@example.com" },
  { id: "8", amount: 192, status: "success", email: "leo@example.com" },
  { id: "9", amount: 548, status: "failed", email: "priya@example.com" },
  { id: "10", amount: 387, status: "pending", email: "marco@example.com" },
  { id: "11", amount: 905, status: "success", email: "dana@example.com" },
  { id: "12", amount: 264, status: "processing", email: "omar@example.com" },
]

const columns: ColumnDef<Payment>[] = [
  {
    accessorKey: "status",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
    cell: ({ row }) => <span className="capitalize">{row.getValue("status")}</span>,
  },
  {
    accessorKey: "email",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Email" />,
  },
  {
    accessorKey: "amount",
    header: () => <div className="text-right">Amount</div>,
    cell: ({ row }) => {
      const amount = parseFloat(row.getValue("amount"))
      const formatted = new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
      }).format(amount)
      return <div className="text-right font-medium tabular-nums">{formatted}</div>
    },
  },
]

export default function DataTableDemo01() {
  return <DataTable columns={columns} data={data} />
}
```

---

### Row selection

A [Checkbox](/components/checkbox) column with an indeterminate select-all, wired through TanStack's row-selection state and the pagination count.

**Install:**

```bash
npx shadcn@latest add @designrevision/data-table-selection-01
```

**Dependencies:** @designrevision/data-table, checkbox

```tsx
// components/ui/data-table-selection-01.tsx
"use client"

import { type ColumnDef } from "@tanstack/react-table"

import { Checkbox } from "@/components/ui/checkbox"
import { DataTable, DataTableColumnHeader } from "@/components/ui/data-table"

type User = {
  id: string
  name: string
  email: string
  role: "owner" | "member" | "viewer"
}

const data: User[] = [
  { id: "1", name: "Ada Lovelace", email: "ada@example.com", role: "owner" },
  { id: "2", name: "Alan Turing", email: "alan@example.com", role: "member" },
  { id: "3", name: "Grace Hopper", email: "grace@example.com", role: "member" },
  { id: "4", name: "Katherine Johnson", email: "kj@example.com", role: "viewer" },
  { id: "5", name: "Margaret Hamilton", email: "margaret@example.com", role: "member" },
  { id: "6", name: "Hedy Lamarr", email: "hedy@example.com", role: "viewer" },
  { id: "7", name: "Dorothy Vaughan", email: "dorothy@example.com", role: "member" },
  { id: "8", name: "Radia Perlman", email: "radia@example.com", role: "owner" },
  { id: "9", name: "Barbara Liskov", email: "barbara@example.com", role: "member" },
  { id: "10", name: "Frances Allen", email: "frances@example.com", role: "viewer" },
  { id: "11", name: "Shafi Goldwasser", email: "shafi@example.com", role: "member" },
  { id: "12", name: "Carol Shaw", email: "carol@example.com", role: "viewer" },
]

const columns: ColumnDef<User>[] = [
  {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && "indeterminate")
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label="Select row"
      />
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: "name",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
    cell: ({ row }) => <span className="font-medium">{row.getValue("name")}</span>,
  },
  {
    accessorKey: "email",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Email" />,
  },
  {
    accessorKey: "role",
    header: "Role",
    cell: ({ row }) => <span className="capitalize">{row.getValue("role")}</span>,
  },
]

export default function DataTableSelection01() {
  return <DataTable columns={columns} data={data} />
}
```

---

### Filter toolbar

A toolbar with a column-search input and a reset button — column filtering via `getFilteredRowModel`.

**Install:**

```bash
npx shadcn@latest add @designrevision/data-table-filter-01
```

**Dependencies:** lucide-react, @designrevision/data-table, button, input

```tsx
// components/ui/data-table-filter-01.tsx
"use client"

import { type ColumnDef } from "@tanstack/react-table"
import { XIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { DataTable, DataTableColumnHeader } from "@/components/ui/data-table"
import { Input } from "@/components/ui/input"

type Payment = {
  id: string
  amount: number
  status: "pending" | "processing" | "success" | "failed"
  email: string
}

const data: Payment[] = [
  { id: "1", amount: 316, status: "success", email: "ken99@example.com" },
  { id: "2", amount: 242, status: "success", email: "abe45@example.com" },
  { id: "3", amount: 837, status: "processing", email: "monserrat44@example.com" },
  { id: "4", amount: 874, status: "success", email: "silas22@example.com" },
  { id: "5", amount: 721, status: "failed", email: "carmella@example.com" },
  { id: "6", amount: 459, status: "pending", email: "jordan78@example.com" },
  { id: "7", amount: 633, status: "processing", email: "nina@example.com" },
  { id: "8", amount: 192, status: "success", email: "leo@example.com" },
  { id: "9", amount: 548, status: "failed", email: "priya@example.com" },
  { id: "10", amount: 387, status: "pending", email: "marco@example.com" },
  { id: "11", amount: 905, status: "success", email: "dana@example.com" },
  { id: "12", amount: 264, status: "processing", email: "omar@example.com" },
]

const columns: ColumnDef<Payment>[] = [
  {
    accessorKey: "status",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
    cell: ({ row }) => <span className="capitalize">{row.getValue("status")}</span>,
  },
  {
    accessorKey: "email",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Email" />,
  },
  {
    accessorKey: "amount",
    header: () => <div className="text-right">Amount</div>,
    cell: ({ row }) => {
      const amount = parseFloat(row.getValue("amount"))
      const formatted = new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
      }).format(amount)
      return <div className="text-right font-medium tabular-nums">{formatted}</div>
    },
  },
]

export default function DataTableFilter01() {
  return (
    <DataTable
      columns={columns}
      data={data}
      toolbar={(table) => {
        const isFiltered = table.getState().columnFilters.length > 0
        return (
          <div className="flex items-center gap-2">
            <Input
              placeholder="Filter emails…"
              value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
              onChange={(event) =>
                table.getColumn("email")?.setFilterValue(event.target.value)
              }
              className="h-8 w-[180px] lg:w-[250px]"
            />
            {isFiltered && (
              <Button
                variant="ghost"
                size="sm"
                className="h-8 px-2 lg:px-3"
                onClick={() => table.resetColumnFilters()}
              >
                Reset
                <XIcon />
              </Button>
            )}
          </div>
        )
      }}
    />
  )
}
```

---

### Column visibility

A View-options menu to show and hide columns — built on [Dropdown Menu](/components/dropdown-menu) checkbox items.

**Install:**

```bash
npx shadcn@latest add @designrevision/data-table-visibility-01
```

**Dependencies:** @designrevision/data-table

```tsx
// components/ui/data-table-visibility-01.tsx
"use client"

import { type ColumnDef } from "@tanstack/react-table"

import {
  DataTable,
  DataTableColumnHeader,
  DataTableViewOptions,
} from "@/components/ui/data-table"

type User = {
  id: string
  name: string
  email: string
  role: "owner" | "member" | "viewer"
  team: string
}

const data: User[] = [
  { id: "1", name: "Ada Lovelace", email: "ada@example.com", role: "owner", team: "Engineering" },
  { id: "2", name: "Alan Turing", email: "alan@example.com", role: "member", team: "Research" },
  { id: "3", name: "Grace Hopper", email: "grace@example.com", role: "member", team: "Engineering" },
  { id: "4", name: "Katherine Johnson", email: "kj@example.com", role: "viewer", team: "Research" },
  { id: "5", name: "Margaret Hamilton", email: "margaret@example.com", role: "member", team: "Apollo" },
  { id: "6", name: "Hedy Lamarr", email: "hedy@example.com", role: "viewer", team: "Comms" },
  { id: "7", name: "Dorothy Vaughan", email: "dorothy@example.com", role: "member", team: "Research" },
  { id: "8", name: "Radia Perlman", email: "radia@example.com", role: "owner", team: "Networking" },
  { id: "9", name: "Barbara Liskov", email: "barbara@example.com", role: "member", team: "Engineering" },
  { id: "10", name: "Frances Allen", email: "frances@example.com", role: "viewer", team: "Compilers" },
  { id: "11", name: "Shafi Goldwasser", email: "shafi@example.com", role: "member", team: "Security" },
  { id: "12", name: "Carol Shaw", email: "carol@example.com", role: "viewer", team: "Games" },
]

const columns: ColumnDef<User>[] = [
  {
    accessorKey: "name",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
    cell: ({ row }) => <span className="font-medium">{row.getValue("name")}</span>,
  },
  {
    accessorKey: "email",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Email" />,
  },
  {
    accessorKey: "role",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Role" />,
    cell: ({ row }) => <span className="capitalize">{row.getValue("role")}</span>,
  },
  {
    accessorKey: "team",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Team" />,
  },
]

export default function DataTableVisibility01() {
  return (
    <DataTable
      columns={columns}
      data={data}
      toolbar={(table) => (
        <div className="flex items-center justify-end">
          <DataTableViewOptions table={table} />
        </div>
      )}
    />
  )
}
```

---

### Faceted filters

A multi-select facet ([Popover](/components/popover) + [Command](/components/command)) with live option counts and selected-value badges — the classic data-table filter.

**Install:**

```bash
npx shadcn@latest add @designrevision/data-table-faceted-01
```

**Dependencies:** lucide-react, @designrevision/data-table

```tsx
// components/ui/data-table-faceted-01.tsx
"use client"

import { type ColumnDef } from "@tanstack/react-table"
import {
  CircleCheckIcon,
  CircleDashedIcon,
  CircleDotIcon,
  CircleIcon,
  CircleXIcon,
} from "lucide-react"

import {
  DataTable,
  DataTableColumnHeader,
  DataTableFacetedFilter,
} from "@/components/ui/data-table"

const statuses = [
  { value: "backlog", label: "Backlog", icon: CircleDashedIcon },
  { value: "todo", label: "Todo", icon: CircleIcon },
  { value: "in progress", label: "In Progress", icon: CircleDotIcon },
  { value: "done", label: "Done", icon: CircleCheckIcon },
  { value: "canceled", label: "Canceled", icon: CircleXIcon },
]

type Task = { id: string; title: string; status: string }

const data: Task[] = [
  { id: "TASK-8782", title: "Refactor the auth middleware", status: "in progress" },
  { id: "TASK-7878", title: "Add dark mode toggle", status: "backlog" },
  { id: "TASK-7839", title: "Fix the pagination off-by-one", status: "done" },
  { id: "TASK-5562", title: "Write the onboarding docs", status: "todo" },
  { id: "TASK-8686", title: "Migrate to the new API", status: "canceled" },
  { id: "TASK-1280", title: "Compress hero images", status: "done" },
  { id: "TASK-7262", title: "Audit the color tokens", status: "in progress" },
  { id: "TASK-1138", title: "Set up the staging env", status: "todo" },
  { id: "TASK-7184", title: "Remove the legacy flags", status: "backlog" },
  { id: "TASK-5160", title: "Add e2e tests for checkout", status: "todo" },
  { id: "TASK-5618", title: "Tune the cache headers", status: "done" },
  { id: "TASK-6699", title: "Draft the Q3 roadmap", status: "in progress" },
]

const columns: ColumnDef<Task>[] = [
  {
    accessorKey: "id",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Task" />,
    cell: ({ row }) => (
      <span className="text-muted-foreground font-mono text-xs">
        {row.getValue("id")}
      </span>
    ),
  },
  {
    accessorKey: "title",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Title" />,
    cell: ({ row }) => <span className="font-medium">{row.getValue("title")}</span>,
  },
  {
    accessorKey: "status",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
    cell: ({ row }) => {
      const status = statuses.find((s) => s.value === row.getValue("status"))
      if (!status) return null
      return (
        <div className="flex items-center gap-2">
          <status.icon className="text-muted-foreground size-4" />
          <span>{status.label}</span>
        </div>
      )
    },
    filterFn: (row, id, value) => (value as string[]).includes(row.getValue(id)),
  },
]

export default function DataTableFaceted01() {
  return (
    <DataTable
      columns={columns}
      data={data}
      toolbar={(table) => (
        <div className="flex items-center gap-2">
          <DataTableFacetedFilter
            column={table.getColumn("status")}
            title="Status"
            options={statuses}
          />
        </div>
      )}
    />
  )
}
```

---

### Row actions

A per-row "⋯" actions menu ([Dropdown Menu](/components/dropdown-menu)) with edit, copy, and a destructive delete.

**Install:**

```bash
npx shadcn@latest add @designrevision/data-table-row-actions-01
```

**Dependencies:** @designrevision/data-table, badge

```tsx
// components/ui/data-table-row-actions-01.tsx
"use client"

import { type ColumnDef } from "@tanstack/react-table"

import { Badge } from "@/components/ui/badge"
import {
  DataTable,
  DataTableColumnHeader,
  DataTableRowActions,
} from "@/components/ui/data-table"

type Task = {
  id: string
  title: string
  type: "Bug" | "Feature" | "Documentation"
  status: "todo" | "in progress" | "done"
}

const data: Task[] = [
  { id: "TASK-8782", title: "Refactor the auth middleware", type: "Bug", status: "in progress" },
  { id: "TASK-7878", title: "Add dark mode toggle", type: "Feature", status: "todo" },
  { id: "TASK-7839", title: "Fix the pagination off-by-one", type: "Bug", status: "done" },
  { id: "TASK-5562", title: "Write the onboarding docs", type: "Documentation", status: "todo" },
  { id: "TASK-1280", title: "Compress hero images", type: "Feature", status: "done" },
  { id: "TASK-7262", title: "Audit the color tokens", type: "Documentation", status: "in progress" },
  { id: "TASK-1138", title: "Set up the staging env", type: "Feature", status: "todo" },
  { id: "TASK-5160", title: "Add e2e tests for checkout", type: "Bug", status: "todo" },
  { id: "TASK-5618", title: "Tune the cache headers", type: "Feature", status: "done" },
  { id: "TASK-6699", title: "Draft the Q3 roadmap", type: "Documentation", status: "in progress" },
  { id: "TASK-2342", title: "Patch the XSS in comments", type: "Bug", status: "todo" },
  { id: "TASK-9081", title: "Localize the checkout flow", type: "Feature", status: "todo" },
]

const columns: ColumnDef<Task>[] = [
  {
    accessorKey: "id",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Task" />,
    cell: ({ row }) => (
      <span className="text-muted-foreground font-mono text-xs">
        {row.getValue("id")}
      </span>
    ),
  },
  {
    accessorKey: "title",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Title" />,
    cell: ({ row }) => (
      <div className="flex items-center gap-2">
        <Badge variant="outline">{row.original.type}</Badge>
        <span className="font-medium">{row.getValue("title")}</span>
      </div>
    ),
  },
  {
    accessorKey: "status",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
    cell: ({ row }) => <span className="capitalize">{row.getValue("status")}</span>,
  },
  {
    id: "actions",
    cell: ({ row }) => (
      <div className="text-right">
        <DataTableRowActions row={row} />
      </div>
    ),
    enableSorting: false,
    enableHiding: false,
  },
]

export default function DataTableRowActions01() {
  return <DataTable columns={columns} data={data} />
}
```

---

### Full tasks table

The complete showcase — selection, sortable headers, status & priority faceted filters, global search, column visibility, row actions, and pagination together.

**Install:**

```bash
npx shadcn@latest add @designrevision/data-table-full-01
```

**Dependencies:** lucide-react, @designrevision/data-table, badge, checkbox, input, button

```tsx
// components/ui/data-table-full-01.tsx
"use client"

import { type ColumnDef } from "@tanstack/react-table"
import {
  ArrowDownIcon,
  ArrowRightIcon,
  ArrowUpIcon,
  CircleCheckIcon,
  CircleDashedIcon,
  CircleDotIcon,
  CircleIcon,
  CircleXIcon,
  XIcon,
} from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  DataTable,
  DataTableColumnHeader,
  DataTableFacetedFilter,
  DataTableRowActions,
  DataTableViewOptions,
} from "@/components/ui/data-table"
import { Input } from "@/components/ui/input"

const statuses = [
  { value: "backlog", label: "Backlog", icon: CircleDashedIcon },
  { value: "todo", label: "Todo", icon: CircleIcon },
  { value: "in progress", label: "In Progress", icon: CircleDotIcon },
  { value: "done", label: "Done", icon: CircleCheckIcon },
  { value: "canceled", label: "Canceled", icon: CircleXIcon },
]

const priorities = [
  { value: "low", label: "Low", icon: ArrowDownIcon },
  { value: "medium", label: "Medium", icon: ArrowRightIcon },
  { value: "high", label: "High", icon: ArrowUpIcon },
]

type Task = {
  id: string
  title: string
  type: "Bug" | "Feature" | "Documentation"
  status: string
  priority: string
}

const data: Task[] = [
  { id: "TASK-8782", title: "Refactor the auth middleware", type: "Bug", status: "in progress", priority: "high" },
  { id: "TASK-7878", title: "Add dark mode toggle", type: "Feature", status: "backlog", priority: "medium" },
  { id: "TASK-7839", title: "Fix the pagination off-by-one", type: "Bug", status: "done", priority: "high" },
  { id: "TASK-5562", title: "Write the onboarding docs", type: "Documentation", status: "todo", priority: "low" },
  { id: "TASK-8686", title: "Migrate to the new API", type: "Feature", status: "canceled", priority: "medium" },
  { id: "TASK-1280", title: "Compress hero images", type: "Feature", status: "done", priority: "low" },
  { id: "TASK-7262", title: "Audit the color tokens", type: "Documentation", status: "in progress", priority: "medium" },
  { id: "TASK-1138", title: "Set up the staging env", type: "Feature", status: "todo", priority: "high" },
  { id: "TASK-7184", title: "Remove the legacy flags", type: "Bug", status: "backlog", priority: "low" },
  { id: "TASK-5160", title: "Add e2e tests for checkout", type: "Bug", status: "todo", priority: "high" },
  { id: "TASK-5618", title: "Tune the cache headers", type: "Feature", status: "done", priority: "medium" },
  { id: "TASK-6699", title: "Draft the Q3 roadmap", type: "Documentation", status: "in progress", priority: "medium" },
  { id: "TASK-2342", title: "Patch the XSS in comments", type: "Bug", status: "todo", priority: "high" },
  { id: "TASK-9081", title: "Localize the checkout flow", type: "Feature", status: "todo", priority: "low" },
  { id: "TASK-4123", title: "Add rate limiting to the API", type: "Feature", status: "backlog", priority: "medium" },
  { id: "TASK-3377", title: "Document the deploy runbook", type: "Documentation", status: "done", priority: "low" },
]

const columns: ColumnDef<Task>[] = [
  {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && "indeterminate")
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label="Select row"
      />
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: "id",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Task" />,
    cell: ({ row }) => (
      <span className="text-muted-foreground font-mono text-xs">
        {row.getValue("id")}
      </span>
    ),
    enableHiding: false,
  },
  {
    accessorKey: "title",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Title" />,
    cell: ({ row }) => (
      <div className="flex items-center gap-2">
        <Badge variant="outline">{row.original.type}</Badge>
        <span className="max-w-[320px] truncate font-medium">
          {row.getValue("title")}
        </span>
      </div>
    ),
  },
  {
    accessorKey: "status",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
    cell: ({ row }) => {
      const status = statuses.find((s) => s.value === row.getValue("status"))
      if (!status) return null
      return (
        <div className="flex items-center gap-2">
          <status.icon className="text-muted-foreground size-4" />
          <span>{status.label}</span>
        </div>
      )
    },
    filterFn: (row, id, value) => (value as string[]).includes(row.getValue(id)),
  },
  {
    accessorKey: "priority",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Priority" />,
    cell: ({ row }) => {
      const priority = priorities.find((p) => p.value === row.getValue("priority"))
      if (!priority) return null
      return (
        <div className="flex items-center gap-2">
          <priority.icon className="text-muted-foreground size-4" />
          <span>{priority.label}</span>
        </div>
      )
    },
    filterFn: (row, id, value) => (value as string[]).includes(row.getValue(id)),
  },
  {
    id: "actions",
    cell: ({ row }) => (
      <div className="text-right">
        <DataTableRowActions row={row} />
      </div>
    ),
    enableSorting: false,
    enableHiding: false,
  },
]

export default function DataTableFull01() {
  return (
    <DataTable
      columns={columns}
      data={data}
      toolbar={(table) => {
        const isFiltered = table.getState().columnFilters.length > 0
        return (
          <div className="flex flex-wrap items-center gap-2">
            <Input
              placeholder="Filter tasks…"
              value={(table.getColumn("title")?.getFilterValue() as string) ?? ""}
              onChange={(event) =>
                table.getColumn("title")?.setFilterValue(event.target.value)
              }
              className="h-8 w-[150px] lg:w-[250px]"
            />
            <DataTableFacetedFilter
              column={table.getColumn("status")}
              title="Status"
              options={statuses}
            />
            <DataTableFacetedFilter
              column={table.getColumn("priority")}
              title="Priority"
              options={priorities}
            />
            {isFiltered && (
              <Button
                variant="ghost"
                size="sm"
                className="h-8 px-2 lg:px-3"
                onClick={() => table.resetColumnFilters()}
              >
                Reset
                <XIcon />
              </Button>
            )}
            <DataTableViewOptions table={table} />
          </div>
        )
      }}
    />
  )
}
```

---

# Shadcn Date Picker

> Free shadcn/ui date picker for React — a reusable <DatePicker> built from Calendar + Popover. Single date, date range, date of birth, a typed input synced to the calendar, presets, and disabled dates. The examples official shadcn never shipped.

Source: https://designrevision.com/components/date-picker

The **Shadcn Date Picker** is a date field that opens a calendar — the [Calendar](/components/calendar) inside a [Popover](/components/popover) behind a formatted button. Officially shadcn ships it as a *composition pattern* rather than a component; we give you **both** — a drop-in `<DatePicker>` for the common case and the raw composition for everything else: ranges, date-of-birth dropdowns, typed input, presets, and disabled dates.

## Component or composition?

There's no canonical `DatePicker` primitive in shadcn — it's Calendar + Popover + Button wired together. That's flexible but repetitive, so we provide a small reusable `<DatePicker>` that covers the single-date 80% case:

```tsx
<DatePicker value={date} onValueChange={setDate} placeholder="Pick a date" />
```

It renders a `Button variant="outline"` showing `format(date, "PPP")` (or the placeholder), opens the calendar in a `w-auto p-0` popover, and **closes on select**. Reach for the **raw composition** (shown in every example below the first) when you need a range, a typed input, presets, or custom formatting.

## Calendar vs Date Picker

- **[Calendar](/components/calendar)** — the always-visible grid. Use it inline (a booking page, a dashboard widget).
- **Date Picker** — the Calendar in a Popover behind a field. Use it in forms where space is tight and the calendar should open on demand.

This is the same split as [Table](/components/table) vs [Data Table](/components/data-table): one is the primitive, the other composes it.

## Single date, range & date of birth

The basic picker is single-date. For a **range**, switch the Calendar to `mode="range"`, hold a `DateRange` in state, render `numberOfMonths={2}`, and format the trigger as `from – to` (the Date range example). For a **date of birth**, set `captionLayout="dropdown"` with `startMonth` / `endMonth` bounds so the year is a dropdown — paging from 1995 to 1925 one month at a time is misery (the Date of birth example).

## Typed input

Power users want to type. Pair an [Input](/components/input) with a small calendar-icon trigger: parse the text with date-fns `parse(...)`, and when it's `isValid`, set the date and jump the calendar's `month`. Arrow-Down opens the popover; selecting a day writes the formatted value back into the input. The Input + calendar example is the modern shadcn pattern.

## Presets, forms & disabled dates

Add **preset** buttons (Today, Tomorrow, In a week) beside the calendar inside the popover for one-click common dates (the With presets example). Drop the picker into a **form** with a label and read the value on submit (the In a form example). Constrain selectable days with the `disabled` matcher — `{ before: new Date() }` for future-only check-in dates, plus `{ dayOfWeek: [0, 6] }` to block weekends (the Disabled dates example).

## Formatting

All formatting is <a href="https://date-fns.org/" rel="nofollow">date-fns</a> `format`: `"PPP"` → *January 1, 2025*, `"LLL dd, y"` → *Jan 01, 2025*, `"MMMM d, yyyy"` → *January 1, 2025*. Show a muted placeholder when empty with `data-empty={!date}` + `data-[empty=true]:text-muted-foreground` on the trigger.

## Accessibility & theming

The trigger is a real `Button`, the popover manages focus (moving into the calendar on open and back to the trigger on close), and the [Calendar](/components/calendar) brings react-day-picker's full keyboard navigation. Everything reads your design tokens — `--popover`, `--accent`, `--primary` — so it follows your theme, including dark mode, with no overrides.

## Installation

### date-picker

**Install:**

```bash
npx shadcn@latest add @designrevision/date-picker
```

**Dependencies:** date-fns, lucide-react, utils, popover, button, calendar

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | Date \| undefined | — | The selected date (controlled). |
| onValueChange | (date: Date \| undefined) => void | — | Fires when a date is picked; the popover closes on select. |
| placeholder | string | "Pick a date" | Trigger text shown when no date is selected. |
| disabled | boolean | false | Disables the trigger. |

**Usage & accessibility:** A reusable single-date picker wrapping Calendar + Popover + Button — a formatted outline trigger (date-fns format(date, 'PPP')) that opens the calendar and closes on select. For date ranges, date-of-birth dropdowns, a typed input synced to the calendar, presets, or disabled dates, compose Calendar + Popover directly (see the examples).

```tsx
// components/ui/date-picker.tsx
"use client"

import * as React from "react"
import { format } from "date-fns"
import { CalendarIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

export interface DatePickerProps {
  value?: Date
  onValueChange?: (date: Date | undefined) => void
  placeholder?: string
  className?: string
  disabled?: boolean
  id?: string
}

function DatePicker({
  value,
  onValueChange,
  placeholder = "Pick a date",
  className,
  disabled,
  id,
}: DatePickerProps) {
  const [open, setOpen] = React.useState(false)

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          id={id}
          variant="outline"
          disabled={disabled}
          data-empty={!value}
          className={cn(
            "data-[empty=true]:text-muted-foreground w-[240px] justify-start text-left font-normal",
            className
          )}
        >
          <CalendarIcon />
          {value ? format(value, "PPP") : <span>{placeholder}</span>}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" align="start">
        <Calendar
          mode="single"
          selected={value}
          onSelect={(date) => {
            onValueChange?.(date)
            setOpen(false)
          }}
          autoFocus
        />
      </PopoverContent>
    </Popover>
  )
}

export { DatePicker }
```

## Examples

### Date Picker

The drop-in `<DatePicker>` — a formatted outline trigger that opens the [Calendar](/components/calendar) and closes on select.

**Install:**

```bash
npx shadcn@latest add @designrevision/date-picker-demo-01
```

**Dependencies:** @designrevision/date-picker

```tsx
// components/ui/date-picker-demo-01.tsx
"use client"

import * as React from "react"

import { DatePicker } from "@/components/ui/date-picker"

export default function DatePickerDemo01() {
  const [date, setDate] = React.useState<Date>()

  return (
    <DatePicker value={date} onValueChange={setDate} placeholder="Pick a date" />
  )
}
```

---

### Raw composition

The canonical shadcn pattern — [Popover](/components/popover) + Button + [Calendar](/components/calendar) composed by hand with date-fns formatting.

**Install:**

```bash
npx shadcn@latest add @designrevision/date-picker-composition-01
```

**Dependencies:** date-fns, lucide-react, popover, button, calendar

```tsx
// components/ui/date-picker-composition-01.tsx
"use client"

import * as React from "react"
import { format } from "date-fns"
import { CalendarIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

export default function DatePickerComposition01() {
  const [open, setOpen] = React.useState(false)
  const [date, setDate] = React.useState<Date>()

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          data-empty={!date}
          className="data-[empty=true]:text-muted-foreground w-[240px] justify-start text-left font-normal"
        >
          <CalendarIcon />
          {date ? format(date, "PPP") : <span>Pick a date</span>}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" align="start">
        <Calendar
          mode="single"
          selected={date}
          onSelect={(value) => {
            setDate(value)
            setOpen(false)
          }}
          autoFocus
        />
      </PopoverContent>
    </Popover>
  )
}
```

---

### Date range

A two-month range picker with a "Jan 01 – Jan 08" trigger — `mode="range"` in a popover.

**Install:**

```bash
npx shadcn@latest add @designrevision/date-picker-range-01
```

**Dependencies:** date-fns, lucide-react, popover, button, calendar

```tsx
// components/ui/date-picker-range-01.tsx
"use client"

import * as React from "react"
import { format } from "date-fns"
import { CalendarIcon } from "lucide-react"
import { type DateRange } from "react-day-picker"

import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

export default function DatePickerRange01() {
  const [range, setRange] = React.useState<DateRange | undefined>()

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          data-empty={!range?.from}
          className="data-[empty=true]:text-muted-foreground w-[300px] justify-start text-left font-normal"
        >
          <CalendarIcon />
          {range?.from ? (
            range.to ? (
              <>
                {format(range.from, "LLL dd, y")} – {format(range.to, "LLL dd, y")}
              </>
            ) : (
              format(range.from, "LLL dd, y")
            )
          ) : (
            <span>Pick a date range</span>
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" align="start">
        <Calendar
          mode="range"
          selected={range}
          onSelect={setRange}
          numberOfMonths={2}
          defaultMonth={range?.from}
          autoFocus
        />
      </PopoverContent>
    </Popover>
  )
}
```

---

### Date of birth

A DOB picker with month/year dropdowns (`captionLayout="dropdown"`) bounded from 1925 to today.

**Install:**

```bash
npx shadcn@latest add @designrevision/date-picker-dob-01
```

**Dependencies:** date-fns, lucide-react, popover, button, calendar, label

```tsx
// components/ui/date-picker-dob-01.tsx
"use client"

import * as React from "react"
import { format } from "date-fns"
import { CalendarIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Label } from "@/components/ui/label"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

export default function DatePickerDob01() {
  const [open, setOpen] = React.useState(false)
  const [date, setDate] = React.useState<Date>()

  return (
    <div className="grid gap-2">
      <Label htmlFor="dob">Date of birth</Label>
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button
            id="dob"
            variant="outline"
            data-empty={!date}
            className="data-[empty=true]:text-muted-foreground w-[240px] justify-start text-left font-normal"
          >
            <CalendarIcon />
            {date ? format(date, "PPP") : <span>Select your date of birth</span>}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0" align="start">
          <Calendar
            mode="single"
            selected={date}
            onSelect={(value) => {
              setDate(value)
              setOpen(false)
            }}
            captionLayout="dropdown"
            startMonth={new Date(1925, 0)}
            endMonth={new Date()}
            disabled={{ after: new Date() }}
            defaultMonth={date ?? new Date(1995, 0)}
            autoFocus
          />
        </PopoverContent>
      </Popover>
    </div>
  )
}
```

---

### Input + calendar

A **typed** date input synced to the calendar — parse the text to a `Date`, jump the month, and Arrow-Down opens the popover.

**Install:**

```bash
npx shadcn@latest add @designrevision/date-picker-input-01
```

**Dependencies:** date-fns, lucide-react, popover, button, calendar, input, label

```tsx
// components/ui/date-picker-input-01.tsx
"use client"

import * as React from "react"
import { format, isValid, parse } from "date-fns"
import { CalendarIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

export default function DatePickerInput01() {
  const [open, setOpen] = React.useState(false)
  const [date, setDate] = React.useState<Date | undefined>(new Date())
  const [month, setMonth] = React.useState<Date | undefined>(new Date())
  const [value, setValue] = React.useState(format(new Date(), "MMMM d, yyyy"))

  return (
    <div className="grid gap-2">
      <Label htmlFor="date-input">Schedule date</Label>
      <div className="relative flex gap-2">
        <Input
          id="date-input"
          value={value}
          placeholder="June 1, 2025"
          className="bg-background pr-10"
          onChange={(event) => {
            setValue(event.target.value)
            const parsed = parse(event.target.value, "MMMM d, yyyy", new Date())
            if (isValid(parsed)) {
              setDate(parsed)
              setMonth(parsed)
            }
          }}
          onKeyDown={(event) => {
            if (event.key === "ArrowDown") {
              event.preventDefault()
              setOpen(true)
            }
          }}
        />
        <Popover open={open} onOpenChange={setOpen}>
          <PopoverTrigger asChild>
            <Button
              variant="ghost"
              className="absolute top-1/2 right-1 size-7 -translate-y-1/2"
              aria-label="Open calendar"
            >
              <CalendarIcon className="size-3.5" />
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-auto p-0" align="end">
            <Calendar
              mode="single"
              selected={date}
              month={month}
              onMonthChange={setMonth}
              onSelect={(selected) => {
                setDate(selected)
                if (selected) setValue(format(selected, "MMMM d, yyyy"))
                setOpen(false)
              }}
              autoFocus
            />
          </PopoverContent>
        </Popover>
      </div>
    </div>
  )
}
```

---

### In a form

A labelled date picker inside a form that reports the formatted date on submit.

**Install:**

```bash
npx shadcn@latest add @designrevision/date-picker-form-01
```

**Dependencies:** date-fns, lucide-react, popover, button, calendar, label

```tsx
// components/ui/date-picker-form-01.tsx
"use client"

import * as React from "react"
import { format } from "date-fns"
import { CalendarIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Label } from "@/components/ui/label"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

export default function DatePickerForm01() {
  const [open, setOpen] = React.useState(false)
  const [date, setDate] = React.useState<Date>()
  const [submitted, setSubmitted] = React.useState<string | null>(null)

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault()
        setSubmitted(date ? format(date, "PPP") : "nothing")
      }}
      className="grid gap-3"
    >
      <div className="grid gap-2">
        <Label htmlFor="event-date">Event date</Label>
        <Popover open={open} onOpenChange={setOpen}>
          <PopoverTrigger asChild>
            <Button
              id="event-date"
              variant="outline"
              data-empty={!date}
              className="data-[empty=true]:text-muted-foreground w-[240px] justify-start text-left font-normal"
            >
              <CalendarIcon />
              {date ? format(date, "PPP") : <span>Pick a date</span>}
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-auto p-0" align="start">
            <Calendar
              mode="single"
              selected={date}
              onSelect={(value) => {
                setDate(value)
                setOpen(false)
              }}
              autoFocus
            />
          </PopoverContent>
        </Popover>
        <p className="text-muted-foreground text-sm">
          Your event will be scheduled for this date.
        </p>
      </div>
      <Button type="submit" className="w-fit">
        Save
      </Button>
      {submitted && (
        <p className="text-sm">
          Saved: <span className="font-medium">{submitted}</span>
        </p>
      )}
    </form>
  )
}
```

---

### With presets

Quick-select buttons (Today / Tomorrow / In a week) above the calendar inside the popover.

**Install:**

```bash
npx shadcn@latest add @designrevision/date-picker-presets-01
```

**Dependencies:** date-fns, lucide-react, popover, button, calendar

```tsx
// components/ui/date-picker-presets-01.tsx
"use client"

import * as React from "react"
import { addDays, format } from "date-fns"
import { CalendarIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

const presets = [
  { label: "Today", days: 0 },
  { label: "Tomorrow", days: 1 },
  { label: "In 3 days", days: 3 },
  { label: "In a week", days: 7 },
]

export default function DatePickerPresets01() {
  const [open, setOpen] = React.useState(false)
  const [date, setDate] = React.useState<Date>()
  const [month, setMonth] = React.useState<Date>(new Date())

  const pick = (days: number) => {
    const next = addDays(new Date(), days)
    setDate(next)
    setMonth(next)
    setOpen(false)
  }

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          data-empty={!date}
          className="data-[empty=true]:text-muted-foreground w-[240px] justify-start text-left font-normal"
        >
          <CalendarIcon />
          {date ? format(date, "PPP") : <span>Pick a date</span>}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="flex w-auto flex-col p-0" align="start">
        <div className="flex flex-col gap-1 border-b p-2">
          {presets.map((preset) => (
            <Button
              key={preset.label}
              variant="ghost"
              size="sm"
              className="justify-start font-normal"
              onClick={() => pick(preset.days)}
            >
              {preset.label}
            </Button>
          ))}
        </div>
        <Calendar
          mode="single"
          selected={date}
          month={month}
          onMonthChange={setMonth}
          onSelect={(value) => {
            setDate(value)
            setOpen(false)
          }}
          autoFocus
        />
      </PopoverContent>
    </Popover>
  )
}
```

---

### Disabled dates

A check-in picker that blocks past dates and weekends with the `disabled` matcher.

**Install:**

```bash
npx shadcn@latest add @designrevision/date-picker-disabled-01
```

**Dependencies:** date-fns, lucide-react, popover, button, calendar, label

```tsx
// components/ui/date-picker-disabled-01.tsx
"use client"

import * as React from "react"
import { format } from "date-fns"
import { CalendarIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Label } from "@/components/ui/label"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

export default function DatePickerDisabled01() {
  const [open, setOpen] = React.useState(false)
  const [date, setDate] = React.useState<Date>()

  return (
    <div className="grid gap-2">
      <Label htmlFor="checkin">Check-in date</Label>
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button
            id="checkin"
            variant="outline"
            data-empty={!date}
            className="data-[empty=true]:text-muted-foreground w-[240px] justify-start text-left font-normal"
          >
            <CalendarIcon />
            {date ? format(date, "PPP") : <span>Select a date</span>}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0" align="start">
          <Calendar
            mode="single"
            selected={date}
            onSelect={(value) => {
              setDate(value)
              setOpen(false)
            }}
            // No past dates and no weekends.
            disabled={[{ before: new Date() }, { dayOfWeek: [0, 6] }]}
            autoFocus
          />
        </PopoverContent>
      </Popover>
    </div>
  )
}
```

---

# Shadcn Dialog

> Free shadcn/ui dialog (modal) component for React — sizes, controlled open, form-in-dialog, scrollable content and prevent-close. Copy or install in one command.

Source: https://designrevision.com/components/dialog

The **Shadcn Dialog** is the modal at the center of your app — the canonical <a href="https://ui.shadcn.com/docs/components/dialog" rel="nofollow">shadcn/ui</a> dialog built on <a href="https://www.radix-ui.com/primitives/docs/components/dialog" rel="nofollow">Radix</a>, with a focus-trapped overlay, fade-and-zoom animation, and a built-in close button. It composes from `DialogTrigger`, `DialogContent`, `DialogHeader`/`DialogTitle`/`DialogDescription`, and `DialogFooter`. The examples below cover the patterns the official docs leave to you — sizing, controlled open, scrollable content, and preventing dismissal.

## When to use — Dialog vs Alert Dialog vs Sheet

Use a **Dialog** for general modal content: a form, a detail view, settings. Use an **Alert Dialog** for an interrupting **confirmation** that needs a deliberate yes/no (delete, discard) — it has no quick dismiss and is announced as an alert. Use a **Sheet** or **Drawer** when the panel should slide from an edge — better for navigation and on mobile. A [Button](/components/button) is the usual trigger.

## Sizing

There is no `size` prop — set the width with a `className` on `DialogContent`: `sm:max-w-sm` for narrow, the default `sm:max-w-lg`, or `sm:max-w-3xl` for wide. The dialog is already responsive (`max-w-[calc(100%-2rem)]` keeps a margin on small screens). For tall content, add `max-h-[80vh]` and make the scrolling region `overflow-y-auto` — see the Sizes and Scrollable examples.

## Controlled open and closing

For anything beyond a simple trigger, **control** the dialog: pass `open` and `onOpenChange` and drive them from state. That lets you open it programmatically from anywhere (no `DialogTrigger`) and close it from code — the classic case is closing after a form submits successfully. The Controlled and With form examples show both.

## Preventing dismissal

By default the dialog closes on the X, outside-click, and Escape. To force an explicit choice — an unsaved-changes guard — hide the X with `showCloseButton={false}` and call `event.preventDefault()` in `onInteractOutside` and `onEscapeKeyDown`. The Prevent dismiss example demonstrates it.

## Accessibility

Radix handles the hard parts: focus moves into the dialog on open and is **trapped** while it's open, returns to the trigger on close, the background is inert, and Escape closes it. Always include a `DialogTitle` (visually hidden if needed) so screen readers announce the dialog, and a `DialogDescription` for context.

## Theming

The dialog reads your design tokens (`--background`, `--border`, `--ring`, and the overlay's `black/50`), so it follows your theme — including dark mode — with zero overrides.

## Installation

### dialog

**Install:**

```bash
npx shadcn@latest add @designrevision/dialog
```

**Dependencies:** @radix-ui/react-dialog, lucide-react, utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| open | boolean | — | Controlled open state (on Dialog). Pair with onOpenChange. |
| onOpenChange | (open: boolean) => void | — | Fires when the dialog opens or closes (on Dialog). |
| showCloseButton | boolean | true | Show the built-in X close button (on DialogContent). Set false to hide it. |

**Usage & accessibility:** Ten composable parts (Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, DialogOverlay, DialogPortal). Size it with a className on DialogContent (e.g. sm:max-w-xl). Prevent dismissal via onInteractOutside / onEscapeKeyDown preventDefault.

```tsx
// components/ui/dialog.tsx
"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { XIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function Dialog({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
  return <DialogPrimitive.Root data-slot="dialog" {...props} />
}

function DialogTrigger({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
}

function DialogPortal({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
}

function DialogClose({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
}

function DialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
  return (
    <DialogPrimitive.Overlay
      data-slot="dialog-overlay"
      className={cn(
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
        className
      )}
      {...props}
    />
  )
}

function DialogContent({
  className,
  children,
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
  showCloseButton?: boolean
}) {
  return (
    <DialogPortal>
      <DialogOverlay />
      <DialogPrimitive.Content
        data-slot="dialog-content"
        className={cn(
          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
          className
        )}
        {...props}
      >
        {children}
        {showCloseButton && (
          <DialogPrimitive.Close
            data-slot="dialog-close"
            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
          >
            <XIcon />
            <span className="sr-only">Close</span>
          </DialogPrimitive.Close>
        )}
      </DialogPrimitive.Content>
    </DialogPortal>
  )
}

function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="dialog-header"
      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
      {...props}
    />
  )
}

function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="dialog-footer"
      className={cn(
        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
        className
      )}
      {...props}
    />
  )
}

function DialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
  return (
    <DialogPrimitive.Title
      data-slot="dialog-title"
      className={cn("text-lg leading-none font-semibold", className)}
      {...props}
    />
  )
}

function DialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
  return (
    <DialogPrimitive.Description
      data-slot="dialog-description"
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  )
}

export {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
}
```

## Examples

### Basic

A trigger that opens a centered modal with a `DialogHeader` (title + description) and a `DialogFooter` of actions.

**Install:**

```bash
npx shadcn@latest add @designrevision/dialog-demo-01
```

**Dependencies:** dialog, button

```tsx
// components/ui/dialog-demo-01.tsx
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

export default function DialogDemo01() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Share document</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Share this document</DialogTitle>
          <DialogDescription>
            Anyone with the link can view this document.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Cancel</Button>
          </DialogClose>
          <Button>Copy link</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
```

---

### With form

A controlled edit-profile form inside the dialog that closes itself on submit via `onOpenChange`.

**Install:**

```bash
npx shadcn@latest add @designrevision/dialog-form-01
```

**Dependencies:** dialog, button, input, label

```tsx
// components/ui/dialog-form-01.tsx
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function DialogForm01() {
  const [open, setOpen] = React.useState(false)

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="outline">Edit profile</Button>
      </DialogTrigger>
      <DialogContent>
        <form
          onSubmit={(event) => {
            event.preventDefault()
            setOpen(false)
          }}
          className="grid gap-4"
        >
          <DialogHeader>
            <DialogTitle>Edit profile</DialogTitle>
            <DialogDescription>
              Make changes to your profile here. Click save when you&apos;re
              done.
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-2">
            <Label htmlFor="name">Name</Label>
            <Input id="name" defaultValue="Ada Lovelace" />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="username">Username</Label>
            <Input id="username" defaultValue="@ada" />
          </div>
          <DialogFooter>
            <DialogClose asChild>
              <Button type="button" variant="outline">
                Cancel
              </Button>
            </DialogClose>
            <Button type="submit">Save changes</Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}
```

---

### Sizes

Small, default, large, and extra-large dialogs — width is set with a `className` on `DialogContent` (e.g. `sm:max-w-xl`), since there is no size prop.

**Install:**

```bash
npx shadcn@latest add @designrevision/dialog-sizes-01
```

**Dependencies:** dialog, button

```tsx
// components/ui/dialog-sizes-01.tsx
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

const sizes = [
  { label: "Small", className: "sm:max-w-sm" },
  { label: "Default", className: "sm:max-w-lg" },
  { label: "Large", className: "sm:max-w-xl" },
  { label: "Extra large", className: "sm:max-w-3xl" },
]

export default function DialogSizes01() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {sizes.map((size) => (
        <Dialog key={size.label}>
          <DialogTrigger asChild>
            <Button variant="outline">{size.label}</Button>
          </DialogTrigger>
          <DialogContent className={size.className}>
            <DialogHeader>
              <DialogTitle>{size.label} dialog</DialogTitle>
              <DialogDescription>
                This dialog uses <code>{size.className}</code> to set its width.
              </DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <DialogClose asChild>
                <Button>Got it</Button>
              </DialogClose>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      ))}
    </div>
  )
}
```

---

### Scrollable

Long content scrolls between a sticky header and footer — cap the height with `max-h` and make the body `overflow-y-auto`.

**Install:**

```bash
npx shadcn@latest add @designrevision/dialog-scroll-01
```

**Dependencies:** dialog, button

```tsx
// components/ui/dialog-scroll-01.tsx
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

const paragraphs = Array.from({ length: 10 }, (_, i) => i + 1)

export default function DialogScroll01() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Terms of Service</Button>
      </DialogTrigger>
      <DialogContent className="flex max-h-[80vh] flex-col gap-0 p-0 sm:max-w-lg">
        <DialogHeader className="shrink-0 border-b px-6 py-4 text-left">
          <DialogTitle>Terms of Service</DialogTitle>
        </DialogHeader>
        <div className="overflow-y-auto px-6 py-4 text-sm leading-relaxed text-muted-foreground">
          {paragraphs.map((n) => (
            <p key={n} className={n > 1 ? "mt-4" : undefined}>
              {n}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
              do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat.
            </p>
          ))}
        </div>
        <DialogFooter className="shrink-0 border-t px-6 py-4">
          <DialogClose asChild>
            <Button variant="outline">Decline</Button>
          </DialogClose>
          <DialogClose asChild>
            <Button>Accept</Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
```

---

### Controlled

Opened and closed entirely from React state with no `DialogTrigger` — the pattern for opening a dialog programmatically from anywhere.

**Install:**

```bash
npx shadcn@latest add @designrevision/dialog-controlled-01
```

**Dependencies:** dialog, button

```tsx
// components/ui/dialog-controlled-01.tsx
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"

export default function DialogControlled01() {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        Open from anywhere
      </Button>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Controlled dialog</DialogTitle>
            <DialogDescription>
              This dialog has no DialogTrigger — it&apos;s opened and closed
              entirely from React state.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setOpen(false)}>
              Cancel
            </Button>
            <Button onClick={() => setOpen(false)}>Confirm</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  )
}
```

---

### Prevent dismiss

Hide the X with `showCloseButton={false}` and block outside-click / Escape via `onInteractOutside` and `onEscapeKeyDown` `preventDefault` — forcing an explicit choice.

**Install:**

```bash
npx shadcn@latest add @designrevision/dialog-custom-close-01
```

**Dependencies:** dialog, button

```tsx
// components/ui/dialog-custom-close-01.tsx
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

export default function DialogCustomClose01() {
  const [open, setOpen] = React.useState(false)

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="outline">Open</Button>
      </DialogTrigger>
      <DialogContent
        showCloseButton={false}
        onInteractOutside={(event) => event.preventDefault()}
        onEscapeKeyDown={(event) => event.preventDefault()}
      >
        <DialogHeader>
          <DialogTitle>Unsaved changes</DialogTitle>
          <DialogDescription>
            No close button, and clicking outside or pressing Escape won&apos;t
            dismiss this — you have to choose an action.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)}>
            Discard
          </Button>
          <Button onClick={() => setOpen(false)}>Save changes</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
```

---

### Confirmation

A destructive confirmation. For confirmations specifically, an Alert Dialog is the more semantic choice.

**Install:**

```bash
npx shadcn@latest add @designrevision/dialog-confirmation-01
```

**Dependencies:** dialog, button

```tsx
// components/ui/dialog-confirmation-01.tsx
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

export default function DialogConfirmation01() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="destructive">Delete account</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you absolutely sure?</DialogTitle>
          <DialogDescription>
            This permanently deletes your account and removes your data from our
            servers. This action cannot be undone.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Cancel</Button>
          </DialogClose>
          <Button variant="destructive">Delete account</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
```

---

# Shadcn Drawer

> Free shadcn/ui drawer component for React — the drag-to-dismiss panel built on vaul. Snap points, nested drawers, four directions, and the responsive Dialog-on-desktop / Drawer-on-mobile pattern. The examples official shadcn never shipped.

Source: https://designrevision.com/components/drawer

The **Shadcn Drawer** is the drag-to-dismiss panel — the canonical <a href="https://ui.shadcn.com/docs/components/drawer" rel="nofollow">shadcn/ui</a> drawer built on <a href="https://vaul.emilkowal.ski/" rel="nofollow">**vaul**</a>, with a drag handle, snap points, four directions, and nested stacking. Official ships it with a couple of demos; the examples below cover what you actually build on mobile — snap-point sheets, nested flows, command menus, and the responsive **Dialog-on-desktop / Drawer-on-mobile** pattern.

## Built on vaul

The Drawer is a thin, styled wrapper over <a href="https://vaul.emilkowal.ski/" rel="nofollow">**vaul**</a>, Emil Kowalski's React drawer library. Vaul owns the hard parts — the **drag-to-dismiss** gesture, momentum and velocity, **snap points**, background scaling, and **nested** drawer stacking — so the shadcn layer only adds Tailwind styling and your design tokens. Install it once:

```bash
npm install vaul
```

Everything below — directions, snap points, nesting — is a vaul feature surfaced through the ten-part shadcn API (`Drawer`, `DrawerTrigger`, `DrawerContent`, `DrawerHeader`, `DrawerFooter`, `DrawerTitle`, `DrawerDescription`, `DrawerClose`, `DrawerOverlay`, `DrawerPortal`).

## Drawer vs Sheet vs Dialog

All three are overlays; the choice is about **input model and placement**:

- **Drawer** (vaul) is **touch-native** — drag-to-dismiss, momentum, snap points. Best on mobile and for bottom sheets.
- **[Sheet](/components/sheet)** (Radix) slides from any edge **without** drag physics — the better desktop side panel.
- **[Dialog](/components/dialog)** is a centered modal for a single focused task.

The canonical real-world setup is a **Dialog or Sheet on desktop and a Drawer on mobile** for the same content — covered next.

## Responsive: Dialog on desktop, Drawer on mobile

This is the pattern shadcn documents for the Drawer, and it's the single most useful one. Detect the viewport with a small `useMediaQuery` hook and render a [Dialog](/components/dialog) above your breakpoint or a Drawer below it, reusing the **same form** in both:

```tsx
const isDesktop = useMediaQuery("(min-width: 768px)")
if (isDesktop) return <Dialog>…<ProfileForm /></Dialog>
return <Drawer>…<ProfileForm /></Drawer>
```

The Responsive example is the complete, copy-pasteable version with the hook included.

## Directions

Pass `direction` to `Drawer` — `"top"`, `"right"`, `"bottom"`, or `"left"` (default `"bottom"`). `DrawerContent` is **direction-aware**: bottom and top drawers get the rounded edge and the drag handle, while left and right drawers take a width (`sm:max-w-sm`) and fill the height. The Directions example shows all four from one row.

## Snap points

Snap points turn the drawer into a multi-stage sheet — a **peek** state that expands to full. Pass `snapPoints` (fractions like `0.4` or CSS values like `"300px"`) and control the active stop with `activeSnapPoint` / `setActiveSnapPoint`:

```tsx
<Drawer snapPoints={[0.4, 1]} activeSnapPoint={snap} setActiveSnapPoint={setSnap}>
```

The drawer opens at the first stop and the user drags between them; content past the visible height scrolls once expanded. No competitor ships this — see the Snap points example.

## Nested drawers

Vaul can **stack** drawers: opening a second one scales the first back to reveal the stack. Use vaul's `NestedRoot` for the inner drawer (our primitive stays byte-faithful to shadcn and doesn't re-export it, so import it directly):

```tsx
import { Drawer as DrawerPrimitive } from "vaul"
// …
<DrawerPrimitive.NestedRoot>{/* inner DrawerContent */}</DrawerPrimitive.NestedRoot>
```

The Nested drawers example shows a two-level flow.

## Scrollable content & forms

For long content, give `DrawerContent` a `max-h-[80vh]` (already the default for bottom drawers) and a `flex-1 overflow-y-auto` middle region so the header and footer stay put while the body scrolls. For input, control the `open` state and call `setOpen(false)` on submit — the Scrollable and With-a-form examples cover both. You can even drop a [Command](/components/command) palette inside a drawer for a mobile **⌘K**, as the Command menu example does.

## Background scaling & controlling

Vaul can scale the page **behind** the drawer for the iOS-style stacked look — set `shouldScaleBackground` on `Drawer` (and wrap your app in a `[vaul-drawer-wrapper]` element). Open declaratively with `DrawerTrigger`, or **controlled** from state via `open` / `onOpenChange` to open it from anywhere or close it after an action.

## Accessibility

Vaul builds on an accessible dialog foundation — it traps focus, restores it to the trigger on close, and closes on Escape and outside-click. Always include a `DrawerTitle` (and ideally a `DrawerDescription`); if your design hides the title, keep it in the DOM with `sr-only` so screen readers still announce the drawer, as the Command menu example does.

## Theming

The drawer reads your design tokens — `--background`, `--border`, `--muted` (the drag handle) — so it follows your theme, including dark mode, with no overrides. Style any region with a className to tune padding, borders, or width per use.

## Installation

### drawer

**Install:**

```bash
npx shadcn@latest add @designrevision/drawer
```

**Dependencies:** vaul, utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| direction | "top" \| "right" \| "bottom" \| "left" | "bottom" | Which edge the drawer slides in from (on Drawer). |
| snapPoints | (number \| string)[] | — | Heights the drawer snaps to, e.g. [0.4, 1]. Pair with activeSnapPoint / setActiveSnapPoint. |
| shouldScaleBackground | boolean | false | Scales the page behind the drawer for the iOS-style stacked look (on Drawer). |
| open | boolean | — | Controlled open state (on Drawer). Pair with onOpenChange. |

**Usage & accessibility:** Ten parts (Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, DrawerOverlay, DrawerPortal) built on vaul — the drag-to-dismiss drawer by emilkowalski. DrawerContent renders a drag handle for bottom drawers and is direction-aware (top/right/bottom/left). For nested drawers use vaul's NestedRoot directly. Animations require tw-animate-css.

```tsx
// components/ui/drawer.tsx
"use client"

import * as React from "react"
import { Drawer as DrawerPrimitive } from "vaul"

import { cn } from "@/lib/utils"

function Drawer({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
}

function DrawerTrigger({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
}

function DrawerPortal({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
}

function DrawerClose({
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
}

function DrawerOverlay({
  className,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
  return (
    <DrawerPrimitive.Overlay
      data-slot="drawer-overlay"
      className={cn(
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
        className
      )}
      {...props}
    />
  )
}

function DrawerContent({
  className,
  children,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
  return (
    <DrawerPortal data-slot="drawer-portal">
      <DrawerOverlay />
      <DrawerPrimitive.Content
        data-slot="drawer-content"
        className={cn(
          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
          className
        )}
        {...props}
      >
        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
        {children}
      </DrawerPrimitive.Content>
    </DrawerPortal>
  )
}

function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="drawer-header"
      className={cn(
        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
        className
      )}
      {...props}
    />
  )
}

function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="drawer-footer"
      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
      {...props}
    />
  )
}

function DrawerTitle({
  className,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
  return (
    <DrawerPrimitive.Title
      data-slot="drawer-title"
      className={cn("text-foreground font-semibold", className)}
      {...props}
    />
  )
}

function DrawerDescription({
  className,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
  return (
    <DrawerPrimitive.Description
      data-slot="drawer-description"
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  )
}

export {
  Drawer,
  DrawerPortal,
  DrawerOverlay,
  DrawerTrigger,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
}
```

## Examples

### Basic

A bottom drawer with a drag handle, header, and footer — drag down or press Escape to dismiss.

**Install:**

```bash
npx shadcn@latest add @designrevision/drawer-demo-01
```

**Dependencies:** @designrevision/drawer, button

```tsx
// components/ui/drawer-demo-01.tsx
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

export default function DrawerDemo01() {
  return (
    <Drawer>
      <DrawerTrigger className="inline-flex items-center justify-center gap-2 rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-xs transition-colors hover:bg-accent hover:text-accent-foreground">
        Open drawer
      </DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto w-full max-w-sm">
          <DrawerHeader>
            <DrawerTitle>Are you absolutely sure?</DrawerTitle>
            <DrawerDescription>
              This action cannot be undone. Drag the handle down or press Escape
              to dismiss.
            </DrawerDescription>
          </DrawerHeader>
          <DrawerFooter>
            <button className="inline-flex items-center justify-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90">
              Submit
            </button>
            <DrawerClose className="inline-flex items-center justify-center gap-2 rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-xs transition-colors hover:bg-accent hover:text-accent-foreground">
              Cancel
            </DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  )
}
```

---

### Responsive (Dialog + Drawer)

A **Dialog on desktop** and a **Drawer on mobile** via `useMediaQuery`, sharing one form — the canonical shadcn responsive pattern.

**Install:**

```bash
npx shadcn@latest add @designrevision/drawer-responsive-01
```

**Dependencies:** @designrevision/drawer, dialog, button, input, label

```tsx
// components/ui/drawer-responsive-01.tsx
"use client"

import * as React from "react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

function useMediaQuery(query: string) {
  const [matches, setMatches] = React.useState(false)

  React.useEffect(() => {
    const result = window.matchMedia(query)
    const onChange = () => setMatches(result.matches)
    onChange()
    result.addEventListener("change", onChange)
    return () => result.removeEventListener("change", onChange)
  }, [query])

  return matches
}

function ProfileForm({ className }: React.ComponentProps<"form">) {
  return (
    <form className={cn("grid items-start gap-4", className)}>
      <div className="grid gap-2">
        <Label htmlFor="email">Email</Label>
        <Input type="email" id="email" defaultValue="ada@example.com" />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="username">Username</Label>
        <Input id="username" defaultValue="@ada" />
      </div>
      <Button type="submit">Save changes</Button>
    </form>
  )
}

export default function DrawerResponsive01() {
  const [open, setOpen] = React.useState(false)
  const isDesktop = useMediaQuery("(min-width: 768px)")

  if (isDesktop) {
    return (
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogTrigger asChild>
          <Button variant="outline">Edit profile</Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Edit profile</DialogTitle>
            <DialogDescription>
              Make changes to your profile here. Click save when you&apos;re
              done.
            </DialogDescription>
          </DialogHeader>
          <ProfileForm />
        </DialogContent>
      </Dialog>
    )
  }

  return (
    <Drawer open={open} onOpenChange={setOpen}>
      <DrawerTrigger asChild>
        <Button variant="outline">Edit profile</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader className="text-left">
          <DrawerTitle>Edit profile</DrawerTitle>
          <DrawerDescription>
            Make changes to your profile here. Click save when you&apos;re done.
          </DrawerDescription>
        </DrawerHeader>
        <ProfileForm className="px-4" />
        <DrawerFooter className="pt-2">
          <DrawerClose asChild>
            <Button variant="outline">Cancel</Button>
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}
```

---

### Directions

Open from any edge — `top`, `right`, `bottom`, or `left` — with the `direction` prop on `Drawer`.

**Install:**

```bash
npx shadcn@latest add @designrevision/drawer-directions-01
```

**Dependencies:** @designrevision/drawer, button

```tsx
// components/ui/drawer-directions-01.tsx
import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

const directions = ["top", "right", "bottom", "left"] as const

export default function DrawerDirections01() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {directions.map((direction) => (
        <Drawer key={direction} direction={direction}>
          <DrawerTrigger asChild>
            <Button variant="outline" className="capitalize">
              {direction}
            </Button>
          </DrawerTrigger>
          <DrawerContent>
            <DrawerHeader>
              <DrawerTitle className="capitalize">{direction} drawer</DrawerTitle>
              <DrawerDescription>
                This drawer slides in from the {direction}. Set it with the{" "}
                <code>direction</code> prop on <code>Drawer</code>.
              </DrawerDescription>
            </DrawerHeader>
            <DrawerFooter>
              <DrawerClose asChild>
                <Button variant="outline">Close</Button>
              </DrawerClose>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
      ))}
    </div>
  )
}
```

---

### Snap points

A drawer that opens at 40% height and snaps to full when dragged — vaul `snapPoints={[0.4, 1]}`.

**Install:**

```bash
npx shadcn@latest add @designrevision/drawer-snap-01
```

**Dependencies:** @designrevision/drawer, button

```tsx
// components/ui/drawer-snap-01.tsx
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

const snapPoints = [0.4, 1]

export default function DrawerSnap01() {
  const [snap, setSnap] = React.useState<number | string | null>(snapPoints[0])

  return (
    <Drawer
      snapPoints={snapPoints}
      activeSnapPoint={snap}
      setActiveSnapPoint={setSnap}
    >
      <DrawerTrigger asChild>
        <Button variant="outline">Open snap drawer</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Drag to expand</DrawerTitle>
          <DrawerDescription>
            This drawer opens at 40% height. Drag the handle up to snap it to
            full height.
          </DrawerDescription>
        </DrawerHeader>
        <div className="px-4">
          <p className="text-sm text-muted-foreground">
            Active snap point:{" "}
            <span className="font-medium text-foreground">
              {snap === 1 ? "full" : "40%"}
            </span>
          </p>
          <div className="mt-4 grid gap-3">
            {Array.from({ length: 6 }, (_, i) => i + 1).map((n) => (
              <div
                key={n}
                className="rounded-md border border-border p-3 text-sm"
              >
                Row {n} — scroll appears once the drawer is at full height.
              </div>
            ))}
          </div>
        </div>
        <DrawerFooter>
          <DrawerClose asChild>
            <Button variant="outline">Close</Button>
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}
```

---

### Nested drawers

Stack a second drawer on the first with vaul `NestedRoot` — the one behind scales back to show the stack.

**Install:**

```bash
npx shadcn@latest add @designrevision/drawer-nested-01
```

**Dependencies:** vaul, @designrevision/drawer, button

```tsx
// components/ui/drawer-nested-01.tsx
"use client"

// Nested drawers use vaul's NestedRoot, which our primitive intentionally does
// not re-export (to stay byte-faithful to shadcn/ui). Importing it directly is
// the documented vaul pattern for stacking one drawer on top of another.
import { Drawer as DrawerPrimitive } from "vaul"

import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

export default function DrawerNested01() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">Open drawer</Button>
      </DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto w-full max-w-sm">
          <DrawerHeader>
            <DrawerTitle>First drawer</DrawerTitle>
            <DrawerDescription>
              Open a nested drawer to stack a second panel on top — the one
              behind scales back to reveal the stack.
            </DrawerDescription>
          </DrawerHeader>
          <DrawerFooter>
            <DrawerPrimitive.NestedRoot>
              <DrawerTrigger asChild>
                <Button>Open nested drawer</Button>
              </DrawerTrigger>
              <DrawerContent>
                <div className="mx-auto w-full max-w-sm">
                  <DrawerHeader>
                    <DrawerTitle>Nested drawer</DrawerTitle>
                    <DrawerDescription>
                      Closing this returns you to the first drawer.
                    </DrawerDescription>
                  </DrawerHeader>
                  <DrawerFooter>
                    <DrawerClose asChild>
                      <Button variant="outline">Close</Button>
                    </DrawerClose>
                  </DrawerFooter>
                </div>
              </DrawerContent>
            </DrawerPrimitive.NestedRoot>
            <DrawerClose asChild>
              <Button variant="outline">Close</Button>
            </DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  )
}
```

---

### Scrollable

A sticky header and footer with a scrollable body — `flex-1 overflow-y-auto` for long content.

**Install:**

```bash
npx shadcn@latest add @designrevision/drawer-scroll-01
```

**Dependencies:** @designrevision/drawer, button

```tsx
// components/ui/drawer-scroll-01.tsx
import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

const events = Array.from({ length: 20 }, (_, i) => i + 1)

export default function DrawerScroll01() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">View activity</Button>
      </DrawerTrigger>
      <DrawerContent className="max-h-[80vh]">
        <DrawerHeader className="border-b">
          <DrawerTitle>Activity</DrawerTitle>
        </DrawerHeader>
        <div className="flex-1 overflow-y-auto p-4">
          <div className="mx-auto grid w-full max-w-md gap-3">
            {events.map((n) => (
              <div
                key={n}
                className="rounded-md border border-border p-3 text-sm"
              >
                <p className="font-medium">Event #{n}</p>
                <p className="text-muted-foreground">
                  Something happened a little while ago.
                </p>
              </div>
            ))}
          </div>
        </div>
        <DrawerFooter className="border-t">
          <DrawerClose asChild>
            <Button>Close</Button>
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}
```

---

### With a form

A **controlled** drawer holding a payment form that closes itself on submit via `setOpen(false)`.

**Install:**

```bash
npx shadcn@latest add @designrevision/drawer-form-01
```

**Dependencies:** @designrevision/drawer, button, input, label

```tsx
// components/ui/drawer-form-01.tsx
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function DrawerForm01() {
  const [open, setOpen] = React.useState(false)

  return (
    <Drawer open={open} onOpenChange={setOpen}>
      <DrawerTrigger asChild>
        <Button variant="outline">Add payment method</Button>
      </DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto w-full max-w-sm">
          <DrawerHeader>
            <DrawerTitle>Add payment method</DrawerTitle>
            <DrawerDescription>
              Enter your card details. They are saved when you submit.
            </DrawerDescription>
          </DrawerHeader>
          <form
            onSubmit={(event) => {
              event.preventDefault()
              setOpen(false)
            }}
            className="grid gap-4 px-4"
          >
            <div className="grid gap-2">
              <Label htmlFor="card-name">Name on card</Label>
              <Input id="card-name" defaultValue="Ada Lovelace" />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="card-number">Card number</Label>
              <Input id="card-number" defaultValue="4242 4242 4242 4242" />
            </div>
            <DrawerFooter className="px-0">
              <Button type="submit">Save card</Button>
              <DrawerClose asChild>
                <Button type="button" variant="outline">
                  Cancel
                </Button>
              </DrawerClose>
            </DrawerFooter>
          </form>
        </div>
      </DrawerContent>
    </Drawer>
  )
}
```

---

### Command menu

A mobile **⌘K** — a [Command](/components/command) palette inside a drawer that closes when an item is picked.

**Install:**

```bash
npx shadcn@latest add @designrevision/drawer-command-01
```

**Dependencies:** lucide-react, @designrevision/drawer, command

```tsx
// components/ui/drawer-command-01.tsx
"use client"

import * as React from "react"
import {
  CalendarIcon,
  SearchIcon,
  SettingsIcon,
  SmileIcon,
  UserIcon,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

export default function DrawerCommand01() {
  const [open, setOpen] = React.useState(false)
  const close = () => setOpen(false)

  return (
    <Drawer open={open} onOpenChange={setOpen}>
      <DrawerTrigger asChild>
        <Button variant="outline">
          <SearchIcon />
          Search…
        </Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader className="sr-only">
          <DrawerTitle>Command menu</DrawerTitle>
        </DrawerHeader>
        <Command className="rounded-none border-t">
          <CommandInput placeholder="Type a command or search…" />
          <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup heading="Suggestions">
              <CommandItem onSelect={close}>
                <CalendarIcon />
                Calendar
              </CommandItem>
              <CommandItem onSelect={close}>
                <SmileIcon />
                Search emoji
              </CommandItem>
            </CommandGroup>
            <CommandGroup heading="Settings">
              <CommandItem onSelect={close}>
                <UserIcon />
                Profile
              </CommandItem>
              <CommandItem onSelect={close}>
                <SettingsIcon />
                Settings
              </CommandItem>
            </CommandGroup>
          </CommandList>
        </Command>
      </DrawerContent>
    </Drawer>
  )
}
```

---

# Shadcn Dropdown Menu

> Free shadcn/ui dropdown menu for React — a Radix menu with checkbox items, radio groups, sub-menus, keyboard shortcuts, and destructive actions. The user menu, view options, and row-action patterns official shadcn never spelled out.

Source: https://designrevision.com/components/dropdown-menu

The **Shadcn Dropdown Menu** is the actions menu — the canonical <a href="https://ui.shadcn.com/docs/components/dropdown-menu" rel="nofollow">shadcn/ui</a> dropdown built on <a href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu" rel="nofollow">Radix</a>, with checkbox items, radio groups, sub-menus, shortcuts, and destructive actions. Official ships one account-menu demo; the examples below cover what you actually build — **view-option toggles, navbar user menus, and row-action menus**.

## Menu, not Select

A dropdown menu *looks* like a select, but it's for **commands and actions** — Edit, Duplicate, Log out — opened from a button. It is **not** a form field. If you're choosing a **value** to submit, use a [Select](/components/select) or a [Combobox](/components/combobox); if you're **running an action**, use a Dropdown Menu. (The two are also built differently — this is Radix Dropdown Menu, with true roving-focus menu keyboard semantics.)

## Anatomy

The menu composes from fifteen parts; the ones you'll reach for most:

- **`DropdownMenu` / `DropdownMenuTrigger` / `DropdownMenuContent`** — the root, the button, the panel.
- **`DropdownMenuItem`** — an action. Add `<DropdownMenuShortcut>` for the trailing ⌘-hint, an icon as the first child, or `variant="destructive"`.
- **`DropdownMenuLabel`** and **`DropdownMenuSeparator`** — a heading and a divider.
- **`DropdownMenuGroup`** — groups related items.

The Dropdown Menu example is the canonical account menu using all of these.

## Checkbox & radio items

For stateful menus, use `DropdownMenuCheckboxItem` (each with `checked` / `onCheckedChange`) for independent toggles like view options, or `DropdownMenuRadioGroup` + `DropdownMenuRadioItem` (with `value` / `onValueChange`) for a single choice. The indicator — a check or a dot — renders automatically. See the Checkbox items and Radio group examples.

## Sub-menus

Nest a section in `DropdownMenuSub` with a `DropdownMenuSubTrigger` and a portalled `DropdownMenuSubContent`. It opens on hover and on **arrow-right**, and stays keyboard-navigable throughout. The Sub-menus example shows an "Invite users → Email / Message / More" flow.

## The user menu

The single most common dropdown is the **navbar account menu** — an avatar/name trigger opening a profile header, an upgrade prompt, a settings group, and a destructive log out, aligned to the end. The User menu example is the drop-in pattern.

## Destructive & disabled

Mark irreversible actions with `variant="destructive"` (red text, icon, and focus tint) and unavailable ones with `disabled` (dimmed, non-interactive). The Destructive & disabled example combines both with keyboard shortcuts.

## The dialog gotcha

A frequent bug: an [Alert Dialog](/components/alert-dialog) or Dialog opened from a menu item **closes instantly**. That's because the menu closes and steals focus when the item is selected. The fix is to *not* nest the trigger — control the dialog's `open` state and set it from the item's `onSelect`, rendering the dialog as a sibling of the menu.

## Accessibility & theming

Radix gives the menu full keyboard semantics — arrow-key roving focus, type-ahead, sub-menu navigation, Escape to close, and focus return to the trigger. That behaviour is the reason to use a Dropdown Menu over a [Popover](/components/popover) of buttons. It reads your design tokens — `--popover`, `--accent`, `--destructive` — so it follows your theme, including dark mode, with no overrides.

## Installation

### dropdown-menu

**Install:**

```bash
npx shadcn@latest add @designrevision/dropdown-menu
```

**Dependencies:** @radix-ui/react-dropdown-menu, utils

**Usage & accessibility:** A Radix dropdown menu — fifteen parts (DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup/RadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuSub/SubTrigger/SubContent, DropdownMenuPortal). Items support inset and variant="destructive". Full roving-focus keyboard semantics. Used for row actions, view options, and user menus.

```tsx
// components/ui/dropdown-menu.tsx
"use client"

import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function DropdownMenu({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
}

function DropdownMenuPortal({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
  return (
    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
  )
}

function DropdownMenuTrigger({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
  return (
    <DropdownMenuPrimitive.Trigger
      data-slot="dropdown-menu-trigger"
      {...props}
    />
  )
}

function DropdownMenuContent({
  className,
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
  return (
    <DropdownMenuPrimitive.Portal>
      <DropdownMenuPrimitive.Content
        data-slot="dropdown-menu-content"
        sideOffset={sideOffset}
        className={cn(
          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
          className
        )}
        {...props}
      />
    </DropdownMenuPrimitive.Portal>
  )
}

function DropdownMenuGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
  return (
    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
  )
}

function DropdownMenuItem({
  className,
  inset,
  variant = "default",
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
  inset?: boolean
  variant?: "default" | "destructive"
}) {
  return (
    <DropdownMenuPrimitive.Item
      data-slot="dropdown-menu-item"
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    />
  )
}

function DropdownMenuCheckboxItem({
  className,
  children,
  checked,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
  return (
    <DropdownMenuPrimitive.CheckboxItem
      data-slot="dropdown-menu-checkbox-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      checked={checked}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.CheckboxItem>
  )
}

function DropdownMenuRadioGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
  return (
    <DropdownMenuPrimitive.RadioGroup
      data-slot="dropdown-menu-radio-group"
      {...props}
    />
  )
}

function DropdownMenuRadioItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
  return (
    <DropdownMenuPrimitive.RadioItem
      data-slot="dropdown-menu-radio-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <CircleIcon className="size-2 fill-current" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.RadioItem>
  )
}

function DropdownMenuLabel({
  className,
  inset,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
  inset?: boolean
}) {
  return (
    <DropdownMenuPrimitive.Label
      data-slot="dropdown-menu-label"
      data-inset={inset}
      className={cn(
        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
        className
      )}
      {...props}
    />
  )
}

function DropdownMenuSeparator({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
  return (
    <DropdownMenuPrimitive.Separator
      data-slot="dropdown-menu-separator"
      className={cn("bg-border -mx-1 my-1 h-px", className)}
      {...props}
    />
  )
}

function DropdownMenuShortcut({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="dropdown-menu-shortcut"
      className={cn(
        "text-muted-foreground ml-auto text-xs tracking-widest",
        className
      )}
      {...props}
    />
  )
}

function DropdownMenuSub({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
}

function DropdownMenuSubTrigger({
  className,
  inset,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
  inset?: boolean
}) {
  return (
    <DropdownMenuPrimitive.SubTrigger
      data-slot="dropdown-menu-sub-trigger"
      data-inset={inset}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
        className
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className="ml-auto size-4" />
    </DropdownMenuPrimitive.SubTrigger>
  )
}

function DropdownMenuSubContent({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
  return (
    <DropdownMenuPrimitive.SubContent
      data-slot="dropdown-menu-sub-content"
      className={cn(
        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
        className
      )}
      {...props}
    />
  )
}

export {
  DropdownMenu,
  DropdownMenuPortal,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
}
```

## Examples

### Dropdown Menu

The canonical account menu — a label, a grouped set of items with icons and keyboard shortcuts, and separators.

**Install:**

```bash
npx shadcn@latest add @designrevision/dropdown-demo-01
```

**Dependencies:** lucide-react, dropdown-menu, button

```tsx
// components/ui/dropdown-demo-01.tsx
import {
  CreditCardIcon,
  KeyboardIcon,
  SettingsIcon,
  UserIcon,
  UsersIcon,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function DropdownDemo01() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Open</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56" align="start">
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
            <UserIcon />
            Profile
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <CreditCardIcon />
            Billing
            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <SettingsIcon />
            Settings
            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <KeyboardIcon />
            Keyboard shortcuts
            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <UsersIcon />
          Team
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Log out</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

---

### Checkbox items

Toggleable `DropdownMenuCheckboxItem`s for view options — each bound to its own controlled boolean.

**Install:**

```bash
npx shadcn@latest add @designrevision/dropdown-checkboxes-01
```

**Dependencies:** dropdown-menu, button

```tsx
// components/ui/dropdown-checkboxes-01.tsx
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function DropdownCheckboxes01() {
  const [statusBar, setStatusBar] = React.useState(true)
  const [activityBar, setActivityBar] = React.useState(false)
  const [panel, setPanel] = React.useState(false)

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">View</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56" align="start">
        <DropdownMenuLabel>Appearance</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem
          checked={statusBar}
          onCheckedChange={setStatusBar}
        >
          Status Bar
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem
          checked={activityBar}
          onCheckedChange={setActivityBar}
        >
          Activity Bar
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked={panel} onCheckedChange={setPanel}>
          Panel
        </DropdownMenuCheckboxItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

---

### Radio group

A single-choice `DropdownMenuRadioGroup` inside the menu, driven by `value` / `onValueChange`.

**Install:**

```bash
npx shadcn@latest add @designrevision/dropdown-radio-01
```

**Dependencies:** dropdown-menu, button

```tsx
// components/ui/dropdown-radio-01.tsx
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function DropdownRadio01() {
  const [position, setPosition] = React.useState("bottom")

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Panel position</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56" align="start">
        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
          <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

---

### Sub-menus

A nested sub-menu that expands on hover or focus — `DropdownMenuSub` with portalled sub-content.

**Install:**

```bash
npx shadcn@latest add @designrevision/dropdown-submenu-01
```

**Dependencies:** lucide-react, dropdown-menu, button

```tsx
// components/ui/dropdown-submenu-01.tsx
import {
  MailIcon,
  MessageSquareIcon,
  PlusCircleIcon,
  UserPlusIcon,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuPortal,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function DropdownSubmenu01() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Invite</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56" align="start">
        <DropdownMenuItem>
          <PlusCircleIcon />
          New team
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>
            <UserPlusIcon />
            Invite users
          </DropdownMenuSubTrigger>
          <DropdownMenuPortal>
            <DropdownMenuSubContent>
              <DropdownMenuItem>
                <MailIcon />
                Email
              </DropdownMenuItem>
              <DropdownMenuItem>
                <MessageSquareIcon />
                Message
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem>
                <PlusCircleIcon />
                More…
              </DropdownMenuItem>
            </DropdownMenuSubContent>
          </DropdownMenuPortal>
        </DropdownMenuSub>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

---

### User menu

The navbar account menu — an avatar/name trigger with a profile header, upgrade prompt, settings group, and log out.

**Install:**

```bash
npx shadcn@latest add @designrevision/dropdown-user-01
```

**Dependencies:** lucide-react, dropdown-menu, button, avatar

```tsx
// components/ui/dropdown-user-01.tsx
import {
  CreditCardIcon,
  LogOutIcon,
  SettingsIcon,
  SparklesIcon,
  UserIcon,
} from "lucide-react"

import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function DropdownUser01() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" className="h-auto gap-2 px-2 py-1.5">
          <Avatar className="size-7">
            <AvatarFallback className="text-xs">AL</AvatarFallback>
          </Avatar>
          <span className="text-left leading-tight">
            <span className="block text-sm font-medium">Ada Lovelace</span>
            <span className="text-muted-foreground block text-xs">
              ada@example.com
            </span>
          </span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56" align="end">
        <DropdownMenuLabel className="flex flex-col gap-0.5">
          <span className="font-medium">Ada Lovelace</span>
          <span className="text-muted-foreground text-xs font-normal">
            ada@example.com
          </span>
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <SparklesIcon />
          Upgrade to Pro
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
            <UserIcon />
            Account
          </DropdownMenuItem>
          <DropdownMenuItem>
            <CreditCardIcon />
            Billing
          </DropdownMenuItem>
          <DropdownMenuItem>
            <SettingsIcon />
            Settings
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">
          <LogOutIcon />
          Log out
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

---

### Destructive & disabled

An actions menu with shortcuts, a disabled item, and a red destructive delete via `variant="destructive"`.

**Install:**

```bash
npx shadcn@latest add @designrevision/dropdown-destructive-01
```

**Dependencies:** lucide-react, dropdown-menu, button

```tsx
// components/ui/dropdown-destructive-01.tsx
import { CopyIcon, PencilIcon, ShareIcon, Trash2Icon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function DropdownDestructive01() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Actions</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-48" align="start">
        <DropdownMenuItem>
          <PencilIcon />
          Edit
          <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <CopyIcon />
          Duplicate
          <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem disabled>
          <ShareIcon />
          Share (soon)
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">
          <Trash2Icon />
          Delete
          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

---

# Shadcn Form

> Free shadcn/ui form component for React — built on react-hook-form + zod. Type-safe validation, accessible labels and error messages, and worked examples: login, sign-up, contact, checkboxes, switches, radio, date picker, and settings.

Source: https://designrevision.com/components/form

The **Shadcn Form** is the bridge between <a href="https://react-hook-form.com/" rel="nofollow">**react-hook-form**</a> and your shadcn inputs. It is a handful of composable parts that wire **labels, controls, descriptions, and validation errors** together — accessibly and type-safely — so a fully validated form is mostly schema and composition. The examples below are complete, copy-paste forms: login, sign-up, contact, checkboxes, switches, radio, a date picker, and settings.

## Built on react-hook-form + zod

The Form is **not an input** — it is structure. Three libraries do the work:

```bash
npm install react-hook-form zod @hookform/resolvers
```

- **react-hook-form** manages field state, submission, and validation with minimal re-renders.
- **zod** declares your schema — the rules *and* the TypeScript types.
- **@hookform/resolvers** connects the two via `zodResolver`.

## Anatomy

Seven parts compose every field:

- **`Form`** — react-hook-form's `FormProvider`; wrap your `<form>` in it.
- **`FormField`** — binds one field by `name` to `form.control` and exposes a `field` render prop.
- **`FormItem`** — groups one field's label, control, description, and message.
- **`FormLabel`** — a label wired to the control (turns red on error).
- **`FormControl`** — a `Slot` that puts `id`, `aria-invalid`, and `aria-describedby` onto your input.
- **`FormDescription`** — helper text.
- **`FormMessage`** — renders the field's validation error automatically.

## A complete example

Define the schema, wire the resolver, compose the fields:

```tsx
const formSchema = z.object({
  username: z.string().min(2, {
    message: "Username must be at least 2 characters.",
  }),
})

export function ProfileForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: { username: "" },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    // values is fully typed and validated
    console.log(values)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
        <FormField
          control={form.control}
          name="username"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Username</FormLabel>
              <FormControl>
                <Input placeholder="shadcn" {...field} />
              </FormControl>
              <FormDescription>This is your public display name.</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  )
}
```

There is **no manual error handling** — when `username` fails the schema, `FormMessage` shows the message and `FormLabel` turns red.

## Validation with zod

The schema is the single source of truth for both **rules** and **types**:

- **Per-field rules** carry their own message: `z.string().email({ message: "…" })`, `.min(8, { message: "…" })`, `.max(160)`.
- **Booleans that must be true** (accept-terms): `z.boolean().refine((v) => v === true, { message: "…" })`.
- **Enums** (radio / select): `z.enum(["all", "mentions", "none"])`.
- **Cross-field rules** use `.refine` on the object and target a field with `path`:

```tsx
const schema = z
  .object({ password: z.string().min(8), confirm: z.string() })
  .refine((data) => data.password === data.confirm, {
    message: "Passwords do not match.",
    path: ["confirm"],
  })
```

The Sign-up example uses exactly this for password confirmation.

## Binding each field type

Inputs and textareas spread `{...field}`. Controlled components map their own props:

| Control | Binding |
|---|---|
| Input / Textarea | `{...field}` |
| Checkbox / Switch | `checked={field.value} onCheckedChange={field.onChange}` |
| Select | `value={field.value} onValueChange={field.onChange}` |
| RadioGroup | `value={field.value} onValueChange={field.onChange}` |
| Calendar (in a Popover) | `selected={field.value} onSelect={field.onChange}` |

The Contact, Checkbox, Switch, Radio, and Date examples each show one in a real form.

## Submitting

`form.handleSubmit(onSubmit)` runs validation first and only calls your handler with **typed, valid** values. From there you can call a **Next.js server action** or a route handler — and re-validate with the same zod schema on the server, since client validation is for UX and server validation is for trust.

## Accessibility

The wiring is automatic: `FormControl` links the input to its `FormDescription` and `FormMessage` through `aria-describedby`, sets `aria-invalid` when the field errors, and `FormLabel` is associated via `htmlFor` and turns red on error. Errors are therefore both **visible and announced** with no extra markup.

## Installation

### form

**Install:**

```bash
npx shadcn@latest add @designrevision/form
```

**Dependencies:** react-hook-form, @hookform/resolvers, zod, @radix-ui/react-label, @radix-ui/react-slot, utils, label, button

**Usage & accessibility:** A validation-aware form built on react-hook-form + zod — 8 composable parts. Wrap your <form> in <Form {...form}> (react-hook-form's FormProvider), then for each field use <FormField name=… control={form.control} render={({ field }) => …}>. Inside, FormItem groups FormLabel, FormControl (a Slot that wires id / aria-invalid / aria-describedby onto your input), FormDescription, and FormMessage (auto-renders the field's validation error). Define the schema with zod and pass zodResolver(schema) to useForm. The label turns red on error and everything is wired for accessibility automatically.

```tsx
// components/ui/form.tsx
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import {
  Controller,
  FormProvider,
  useFormContext,
  useFormState,
  type ControllerProps,
  type FieldPath,
  type FieldValues,
} from "react-hook-form"

import { cn } from "@/lib/utils"
import { Label } from "@/components/ui/label"

const Form = FormProvider

type FormFieldContextValue<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = {
  name: TName
}

const FormFieldContext = React.createContext<FormFieldContextValue>(
  {} as FormFieldContextValue
)

const FormField = <
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
  ...props
}: ControllerProps<TFieldValues, TName>) => {
  return (
    <FormFieldContext.Provider value={{ name: props.name }}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  )
}

const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext)
  const itemContext = React.useContext(FormItemContext)
  const { getFieldState } = useFormContext()
  const formState = useFormState({ name: fieldContext.name })
  const fieldState = getFieldState(fieldContext.name, formState)

  if (!fieldContext) {
    throw new Error("useFormField should be used within <FormField>")
  }

  const { id } = itemContext

  return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState,
  }
}

type FormItemContextValue = {
  id: string
}

const FormItemContext = React.createContext<FormItemContextValue>(
  {} as FormItemContextValue
)

function FormItem({ className, ...props }: React.ComponentProps<"div">) {
  const id = React.useId()

  return (
    <FormItemContext.Provider value={{ id }}>
      <div
        data-slot="form-item"
        className={cn("grid gap-2", className)}
        {...props}
      />
    </FormItemContext.Provider>
  )
}

function FormLabel({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  const { error, formItemId } = useFormField()

  return (
    <Label
      data-slot="form-label"
      data-error={!!error}
      className={cn("data-[error=true]:text-destructive", className)}
      htmlFor={formItemId}
      {...props}
    />
  )
}

function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

  return (
    <Slot
      data-slot="form-control"
      id={formItemId}
      aria-describedby={
        !error
          ? `${formDescriptionId}`
          : `${formDescriptionId} ${formMessageId}`
      }
      aria-invalid={!!error}
      {...props}
    />
  )
}

function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
  const { formDescriptionId } = useFormField()

  return (
    <p
      data-slot="form-description"
      id={formDescriptionId}
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  )
}

function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
  const { error, formMessageId } = useFormField()
  const body = error ? String(error?.message ?? "") : props.children

  if (!body) {
    return null
  }

  return (
    <p
      data-slot="form-message"
      id={formMessageId}
      className={cn("text-destructive text-sm", className)}
      {...props}
    >
      {body}
    </p>
  )
}

export {
  useFormField,
  Form,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  FormField,
}
```

## Examples

### Username (canonical)

The canonical react-hook-form + zod form — a single validated Input with label, description, and error message.

**Install:**

```bash
npx shadcn@latest add @designrevision/form-demo-01
```

**Dependencies:** react-hook-form, @hookform/resolvers, zod, form, input, button, sonner

```tsx
// components/ui/form-demo-01.tsx
"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"

import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Toaster } from "@/components/ui/sonner"

const formSchema = z.object({
  username: z.string().min(2, {
    message: "Username must be at least 2 characters.",
  }),
})

export default function FormDemo01() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: "",
    },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    toast("You submitted the following values", {
      description: (
        <pre className="mt-2 w-full max-w-[320px] overflow-x-auto rounded-md bg-neutral-950 p-4">
          <code className="text-white">{JSON.stringify(values, null, 2)}</code>
        </pre>
      ),
    })
  }

  return (
    <div className="w-full max-w-sm">
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          <FormField
            control={form.control}
            name="username"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Username</FormLabel>
                <FormControl>
                  <Input placeholder="shadcn" {...field} />
                </FormControl>
                <FormDescription>
                  This is your public display name.
                </FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button type="submit">Submit</Button>
        </form>
      </Form>
      <Toaster />
    </div>
  )
}
```

---

### Login form

Email + password with zod validation (valid email, min-length password) and a full-width submit.

**Install:**

```bash
npx shadcn@latest add @designrevision/form-login-01
```

**Dependencies:** react-hook-form, @hookform/resolvers, zod, form, input, button, sonner

```tsx
// components/ui/form-login-01.tsx
"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"

import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Toaster } from "@/components/ui/sonner"

const formSchema = z.object({
  email: z.string().email({ message: "Enter a valid email address." }),
  password: z.string().min(8, {
    message: "Password must be at least 8 characters.",
  }),
})

export default function FormLogin01() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: { email: "", password: "" },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    toast("Signed in", { description: values.email })
  }

  return (
    <div className="w-full max-w-sm">
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Email</FormLabel>
                <FormControl>
                  <Input type="email" placeholder="me@example.com" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="password"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Password</FormLabel>
                <FormControl>
                  <Input type="password" placeholder="••••••••" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button type="submit" className="w-full">
            Sign in
          </Button>
        </form>
      </Form>
      <Toaster />
    </div>
  )
}
```

---

### Sign-up form

Cross-field validation — a zod `.refine` confirms password and confirmation match, plus a required terms checkbox.

**Install:**

```bash
npx shadcn@latest add @designrevision/form-signup-01
```

**Dependencies:** react-hook-form, @hookform/resolvers, zod, form, input, checkbox, button, sonner

```tsx
// components/ui/form-signup-01.tsx
"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Toaster } from "@/components/ui/sonner"

const formSchema = z
  .object({
    name: z.string().min(2, { message: "Name must be at least 2 characters." }),
    email: z.string().email({ message: "Enter a valid email address." }),
    password: z.string().min(8, {
      message: "Password must be at least 8 characters.",
    }),
    confirm: z.string(),
    terms: z.boolean().refine((v) => v === true, {
      message: "You must accept the terms.",
    }),
  })
  .refine((data) => data.password === data.confirm, {
    message: "Passwords do not match.",
    path: ["confirm"],
  })

export default function FormSignup01() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: "",
      email: "",
      password: "",
      confirm: "",
      terms: false,
    },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    toast("Account created", { description: values.email })
  }

  return (
    <div className="w-full max-w-sm">
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          <FormField
            control={form.control}
            name="name"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Name</FormLabel>
                <FormControl>
                  <Input placeholder="Ada Lovelace" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Email</FormLabel>
                <FormControl>
                  <Input type="email" placeholder="me@example.com" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="password"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Password</FormLabel>
                <FormControl>
                  <Input type="password" placeholder="••••••••" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="confirm"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Confirm password</FormLabel>
                <FormControl>
                  <Input type="password" placeholder="••••••••" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="terms"
            render={({ field }) => (
              <FormItem className="flex flex-row items-start gap-3 space-y-0">
                <FormControl>
                  <Checkbox
                    checked={field.value}
                    onCheckedChange={field.onChange}
                  />
                </FormControl>
                <div className="grid gap-1.5 leading-none">
                  <FormLabel className="font-normal">
                    Accept terms and conditions
                  </FormLabel>
                  <FormMessage />
                </div>
              </FormItem>
            )}
          />
          <Button type="submit" className="w-full">
            Create account
          </Button>
        </form>
      </Form>
      <Toaster />
    </div>
  )
}
```

---

### Contact form

Mixed field types — Input, a Select for the subject, and a Textarea message, each validated.

**Install:**

```bash
npx shadcn@latest add @designrevision/form-contact-01
```

**Dependencies:** react-hook-form, @hookform/resolvers, zod, form, input, @designrevision/select, textarea, button, sonner

```tsx
// components/ui/form-contact-01.tsx
"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"

import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Toaster } from "@/components/ui/sonner"
import { Textarea } from "@/components/ui/textarea"

const formSchema = z.object({
  name: z.string().min(2, { message: "Name must be at least 2 characters." }),
  email: z.string().email({ message: "Enter a valid email address." }),
  subject: z.string().min(1, { message: "Please choose a subject." }),
  message: z.string().min(10, {
    message: "Message must be at least 10 characters.",
  }),
})

export default function FormContact01() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: { name: "", email: "", subject: "", message: "" },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    toast("Message sent", { description: `Subject: ${values.subject}` })
  }

  return (
    <div className="w-full max-w-sm">
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          <FormField
            control={form.control}
            name="name"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Name</FormLabel>
                <FormControl>
                  <Input placeholder="Ada Lovelace" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Email</FormLabel>
                <FormControl>
                  <Input type="email" placeholder="me@example.com" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="subject"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Subject</FormLabel>
                <Select onValueChange={field.onChange} value={field.value}>
                  <FormControl>
                    <SelectTrigger className="w-full">
                      <SelectValue placeholder="Choose a topic" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    <SelectItem value="sales">Sales</SelectItem>
                    <SelectItem value="support">Support</SelectItem>
                    <SelectItem value="billing">Billing</SelectItem>
                  </SelectContent>
                </Select>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="message"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Message</FormLabel>
                <FormControl>
                  <Textarea
                    placeholder="How can we help?"
                    className="resize-none"
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button type="submit" className="w-full">
            Send message
          </Button>
        </form>
      </Form>
      <Toaster />
    </div>
  )
}
```

---

### Checkbox preferences

Boolean checkbox fields, with a required terms checkbox validated by a zod `.refine`.

**Install:**

```bash
npx shadcn@latest add @designrevision/form-checkbox-01
```

**Dependencies:** react-hook-form, @hookform/resolvers, zod, form, checkbox, button, sonner

```tsx
// components/ui/form-checkbox-01.tsx
"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Toaster } from "@/components/ui/sonner"

const formSchema = z.object({
  marketing: z.boolean(),
  security: z.boolean(),
  terms: z.boolean().refine((v) => v === true, {
    message: "You must accept the terms to continue.",
  }),
})

export default function FormCheckbox01() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: { marketing: true, security: true, terms: false },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    toast("Preferences saved", {
      description: `Marketing: ${values.marketing ? "on" : "off"}`,
    })
  }

  return (
    <div className="w-full max-w-sm">
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          <FormField
            control={form.control}
            name="marketing"
            render={({ field }) => (
              <FormItem className="flex flex-row items-start gap-3 space-y-0">
                <FormControl>
                  <Checkbox
                    checked={field.value}
                    onCheckedChange={field.onChange}
                  />
                </FormControl>
                <div className="grid gap-1.5 leading-none">
                  <FormLabel className="font-normal">Marketing emails</FormLabel>
                  <FormDescription>
                    News about products and features.
                  </FormDescription>
                </div>
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="security"
            render={({ field }) => (
              <FormItem className="flex flex-row items-start gap-3 space-y-0">
                <FormControl>
                  <Checkbox
                    checked={field.value}
                    onCheckedChange={field.onChange}
                  />
                </FormControl>
                <div className="grid gap-1.5 leading-none">
                  <FormLabel className="font-normal">Security alerts</FormLabel>
                  <FormDescription>
                    Important notices about your account.
                  </FormDescription>
                </div>
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="terms"
            render={({ field }) => (
              <FormItem className="flex flex-row items-start gap-3 space-y-0">
                <FormControl>
                  <Checkbox
                    checked={field.value}
                    onCheckedChange={field.onChange}
                  />
                </FormControl>
                <div className="grid gap-1.5 leading-none">
                  <FormLabel className="font-normal">
                    Accept terms and conditions
                  </FormLabel>
                  <FormMessage />
                </div>
              </FormItem>
            )}
          />
          <Button type="submit">Save preferences</Button>
        </form>
      </Form>
      <Toaster />
    </div>
  )
}
```

---

### Notification switches

Bordered rows pairing a label and description with a Switch, bound to boolean fields.

**Install:**

```bash
npx shadcn@latest add @designrevision/form-switch-01
```

**Dependencies:** react-hook-form, @hookform/resolvers, zod, form, switch, button, sonner

```tsx
// components/ui/form-switch-01.tsx
"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"

import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
} from "@/components/ui/form"
import { Switch } from "@/components/ui/switch"
import { Toaster } from "@/components/ui/sonner"

const formSchema = z.object({
  marketing: z.boolean(),
  social: z.boolean(),
  security: z.boolean(),
})

const fields = [
  {
    name: "marketing" as const,
    label: "Marketing emails",
    description: "Receive emails about new products and features.",
  },
  {
    name: "social" as const,
    label: "Social notifications",
    description: "Receive emails for follows, likes, and comments.",
  },
  {
    name: "security" as const,
    label: "Security emails",
    description: "Receive emails about your account activity.",
  },
]

export default function FormSwitch01() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: { marketing: true, social: false, security: true },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    toast("Notifications updated", {
      description: `Security: ${values.security ? "on" : "off"}`,
    })
  }

  return (
    <div className="w-full max-w-md">
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
          {fields.map((f) => (
            <FormField
              key={f.name}
              control={form.control}
              name={f.name}
              render={({ field }) => (
                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                  <div className="space-y-0.5">
                    <FormLabel>{f.label}</FormLabel>
                    <FormDescription>{f.description}</FormDescription>
                  </div>
                  <FormControl>
                    <Switch
                      checked={field.value}
                      onCheckedChange={field.onChange}
                    />
                  </FormControl>
                </FormItem>
              )}
            />
          ))}
          <Button type="submit">Save</Button>
        </form>
      </Form>
      <Toaster />
    </div>
  )
}
```

---

### Radio group

A single-choice RadioGroup bound to a zod enum, with nested FormItems per option.

**Install:**

```bash
npx shadcn@latest add @designrevision/form-radio-01
```

**Dependencies:** react-hook-form, @hookform/resolvers, zod, form, radio-group, button, sonner

```tsx
// components/ui/form-radio-01.tsx
"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"

import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Toaster } from "@/components/ui/sonner"

const formSchema = z.object({
  type: z.enum(["all", "mentions", "none"]),
})

const options = [
  { value: "all", label: "All new messages" },
  { value: "mentions", label: "Direct messages and mentions" },
  { value: "none", label: "Nothing" },
]

export default function FormRadio01() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: { type: "all" },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    toast("Notification preference saved", { description: values.type })
  }

  return (
    <div className="w-full max-w-sm">
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          <FormField
            control={form.control}
            name="type"
            render={({ field }) => (
              <FormItem className="space-y-3">
                <FormLabel>Notify me about…</FormLabel>
                <FormControl>
                  <RadioGroup
                    onValueChange={field.onChange}
                    value={field.value}
                    className="flex flex-col space-y-1"
                  >
                    {options.map((option) => (
                      <FormItem
                        key={option.value}
                        className="flex items-center gap-3 space-y-0"
                      >
                        <FormControl>
                          <RadioGroupItem value={option.value} />
                        </FormControl>
                        <FormLabel className="font-normal">
                          {option.label}
                        </FormLabel>
                      </FormItem>
                    ))}
                  </RadioGroup>
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button type="submit">Save</Button>
        </form>
      </Form>
      <Toaster />
    </div>
  )
}
```

---

### Date of birth

A Popover + Calendar bound to a zod date, with future and pre-1900 dates disabled.

**Install:**

```bash
npx shadcn@latest add @designrevision/form-date-01
```

**Dependencies:** react-hook-form, @hookform/resolvers, zod, date-fns, form, calendar, popover, button, sonner

```tsx
// components/ui/form-date-01.tsx
"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { format } from "date-fns"
import { CalendarIcon } from "lucide-react"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import { Toaster } from "@/components/ui/sonner"

const formSchema = z.object({
  dob: z.date({ error: "A date of birth is required." }),
})

export default function FormDate01() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    toast("Date of birth saved", {
      description: format(values.dob, "PPP"),
    })
  }

  return (
    <div className="w-full max-w-sm">
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          <FormField
            control={form.control}
            name="dob"
            render={({ field }) => (
              <FormItem className="flex flex-col">
                <FormLabel>Date of birth</FormLabel>
                <Popover>
                  <PopoverTrigger asChild>
                    <FormControl>
                      <Button
                        variant="outline"
                        className={cn(
                          "w-full pl-3 text-left font-normal",
                          !field.value && "text-muted-foreground"
                        )}
                      >
                        {field.value ? (
                          format(field.value, "PPP")
                        ) : (
                          <span>Pick a date</span>
                        )}
                        <CalendarIcon className="ml-auto size-4 opacity-50" />
                      </Button>
                    </FormControl>
                  </PopoverTrigger>
                  <PopoverContent className="w-auto p-0" align="start">
                    <Calendar
                      mode="single"
                      selected={field.value}
                      onSelect={field.onChange}
                      disabled={(date) =>
                        date > new Date() || date < new Date("1900-01-01")
                      }
                      captionLayout="dropdown"
                    />
                  </PopoverContent>
                </Popover>
                <FormDescription>
                  Your date of birth is used to calculate your age.
                </FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button type="submit">Submit</Button>
        </form>
      </Form>
      <Toaster />
    </div>
  )
}
```

---

### Textarea with counter

A bio Textarea with a live character counter and zod min/max length validation.

**Install:**

```bash
npx shadcn@latest add @designrevision/form-textarea-01
```

**Dependencies:** react-hook-form, @hookform/resolvers, zod, form, textarea, button, sonner

```tsx
// components/ui/form-textarea-01.tsx
"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"

import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Textarea } from "@/components/ui/textarea"
import { Toaster } from "@/components/ui/sonner"

const formSchema = z.object({
  bio: z
    .string()
    .min(10, { message: "Bio must be at least 10 characters." })
    .max(160, { message: "Bio must be 160 characters or less." }),
})

export default function FormTextarea01() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: { bio: "" },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    toast("Bio saved", { description: `${values.bio.length} characters` })
  }

  return (
    <div className="w-full max-w-sm">
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          <FormField
            control={form.control}
            name="bio"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Bio</FormLabel>
                <FormControl>
                  <Textarea
                    placeholder="Tell us a little bit about yourself"
                    className="resize-none"
                    {...field}
                  />
                </FormControl>
                <FormDescription>
                  {field.value.length}/160 characters
                </FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button type="submit">Save</Button>
        </form>
      </Form>
      <Toaster />
    </div>
  )
}
```

---

### Account settings

A multi-field settings form — username (Input), verified email (Select), and bio (Textarea).

**Install:**

```bash
npx shadcn@latest add @designrevision/form-settings-01
```

**Dependencies:** react-hook-form, @hookform/resolvers, zod, form, input, @designrevision/select, textarea, button, sonner

```tsx
// components/ui/form-settings-01.tsx
"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"

import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Toaster } from "@/components/ui/sonner"

const formSchema = z.object({
  username: z
    .string()
    .min(2, { message: "Username must be at least 2 characters." })
    .max(30, { message: "Username must be 30 characters or less." }),
  email: z.string().min(1, { message: "Please select a verified email." }),
  bio: z.string().max(160, { message: "Bio must be 160 characters or less." }),
})

export default function FormSettings01() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: { username: "", email: "", bio: "" },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    toast("Profile updated", { description: `@${values.username}` })
  }

  return (
    <div className="w-full max-w-sm">
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          <FormField
            control={form.control}
            name="username"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Username</FormLabel>
                <FormControl>
                  <Input placeholder="shadcn" {...field} />
                </FormControl>
                <FormDescription>
                  This is your public display name.
                </FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Email</FormLabel>
                <Select onValueChange={field.onChange} value={field.value}>
                  <FormControl>
                    <SelectTrigger className="w-full">
                      <SelectValue placeholder="Select a verified email" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    <SelectItem value="ada@example.com">
                      ada@example.com
                    </SelectItem>
                    <SelectItem value="lovelace@work.com">
                      lovelace@work.com
                    </SelectItem>
                  </SelectContent>
                </Select>
                <FormDescription>
                  Manage verified emails in your settings.
                </FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="bio"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Bio</FormLabel>
                <FormControl>
                  <Textarea
                    placeholder="Tell us about yourself"
                    className="resize-none"
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button type="submit">Update profile</Button>
        </form>
      </Form>
      <Toaster />
    </div>
  )
}
```

---

# Shadcn Hover Card

> Free shadcn/ui hover card for React — a rich preview that opens on hover, built on Radix: a profile card, a user mention, and an inline glossary term.

Source: https://designrevision.com/components/hover-card

The **Shadcn Hover Card** is a **rich preview** that opens on hover, built on <a href="https://www.radix-ui.com/primitives/docs/components/hover-card" rel="nofollow">Radix</a>. Unlike a tooltip, it holds real content — avatars, stats, links, a button — and stays open while you move the pointer into it. It's the pattern behind a profile preview on an @mention or a definition on a linked term. The examples below cover a profile card, a user mention, and an inline glossary term.

## The shape

```tsx
<HoverCard>
  <HoverCardTrigger asChild>
    <a href="https://github.com/vercel">@nextjs</a>
  </HoverCardTrigger>
  <HoverCardContent className="w-80">
    {/* avatar, bio, stats */}
  </HoverCardContent>
</HoverCard>
```

`HoverCardTrigger` is the element you hover; `HoverCardContent` is the preview that appears. Pass `asChild` so the trigger keeps your own tag — an inline link or span stays inline.

## Hover Card vs Tooltip

- **[Tooltip](/components/tooltip)** — a short text label that names a control.
- **Hover Card** — rich, interactive content you can move the pointer into.

Use a tooltip for a one-line hint; use a hover card for a preview the user might read or click inside.

## Timing

Tune the delays so the card doesn't flash as the pointer crosses the trigger:

```tsx
<HoverCard openDelay={200} closeDelay={100}>
```

A short `openDelay` waits for intent; a small `closeDelay` lets the user move into the card without it snapping shut.

## Common patterns

- **Profile preview** — an avatar, bio, and join date on a username (the Basic example).
- **User mention** — follower stats and a Follow button on an @mention (the User mention example).
- **Glossary term** — a definition revealed on an inline term (the Glossary term example).

## Touch and accessibility

Hover doesn't exist on touch, so a hover card never opens by tap — treat it as progressive enhancement and never hide essential information inside it. It does open on **keyboard focus**, so keyboard users reach it by tabbing to the trigger. When the content must be reachable everywhere, use a [Popover](/components/popover), which opens on click.

## Installation

### hover-card

**Install:**

```bash
npx shadcn@latest add @designrevision/hover-card
```

**Dependencies:** @radix-ui/react-hover-card, utils

**Usage & accessibility:** A Radix hover card — a popover that opens on hover (and focus) for sighted users to preview content behind a link. Compose <HoverCard> with <HoverCardTrigger> and <HoverCardContent>. Tune openDelay / closeDelay on the root. Unlike Tooltip it can hold rich content; unlike Popover it's hover-driven, so don't put essential actions in it (touch devices can't hover).

```tsx
// components/ui/hover-card.tsx
"use client"

import * as React from "react"
import * as HoverCardPrimitive from "@radix-ui/react-hover-card"

import { cn } from "@/lib/utils"

function HoverCard({
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
}

function HoverCardTrigger({
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
  return (
    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
  )
}

function HoverCardContent({
  className,
  align = "center",
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
  return (
    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
      <HoverCardPrimitive.Content
        data-slot="hover-card-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
          className
        )}
        {...props}
      />
    </HoverCardPrimitive.Portal>
  )
}

export { HoverCard, HoverCardTrigger, HoverCardContent }
```

## Examples

### Basic

The canonical profile-preview hover card.

**Install:**

```bash
npx shadcn@latest add @designrevision/hover-card-demo-01
```

**Dependencies:** lucide-react, hover-card, avatar, button

```tsx
// components/ui/hover-card-demo-01.tsx
import { CalendarDays } from "lucide-react"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"

export default function HoverCardDemo01() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="link">@nextjs</Button>
      </HoverCardTrigger>
      <HoverCardContent className="w-80">
        <div className="flex justify-between gap-4">
          <Avatar>
            <AvatarImage src="https://github.com/vercel.png" />
            <AvatarFallback>VC</AvatarFallback>
          </Avatar>
          <div className="space-y-1">
            <h4 className="text-sm font-semibold">@nextjs</h4>
            <p className="text-sm">
              The React Framework – created and maintained by @vercel.
            </p>
            <div className="text-muted-foreground flex items-center pt-2 text-xs">
              <CalendarDays className="mr-2 size-4" />
              Joined December 2021
            </div>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}
```

---

### User mention

An @mention preview with follower stats and a follow button.

**Install:**

```bash
npx shadcn@latest add @designrevision/hover-card-user-01
```

**Dependencies:** hover-card, avatar, button

```tsx
// components/ui/hover-card-user-01.tsx
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"

export default function HoverCardUser01() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <a href="#" className="font-medium underline-offset-4 hover:underline">
          @ada
        </a>
      </HoverCardTrigger>
      <HoverCardContent className="w-72">
        <div className="flex gap-3">
          <Avatar>
            <AvatarFallback>AL</AvatarFallback>
          </Avatar>
          <div className="space-y-1.5">
            <div>
              <p className="text-sm font-semibold">Ada Lovelace</p>
              <p className="text-muted-foreground text-xs">
                @ada · Mathematician
              </p>
            </div>
            <div className="flex gap-3 text-xs">
              <span>
                <span className="text-foreground font-medium">1,204</span>{" "}
                <span className="text-muted-foreground">Followers</span>
              </span>
              <span>
                <span className="text-foreground font-medium">180</span>{" "}
                <span className="text-muted-foreground">Following</span>
              </span>
            </div>
            <Button size="sm" className="mt-1 h-7 w-full">
              Follow
            </Button>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}
```

---

### Glossary term

An inline term that reveals a definition on hover, with a small open delay.

**Install:**

```bash
npx shadcn@latest add @designrevision/hover-card-link-01
```

**Dependencies:** hover-card

```tsx
// components/ui/hover-card-link-01.tsx
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"

export default function HoverCardLink01() {
  return (
    <p className="max-w-sm text-sm leading-relaxed">
      Install components from the{" "}
      <HoverCard openDelay={120}>
        <HoverCardTrigger asChild>
          <span className="cursor-help font-medium underline decoration-dotted underline-offset-4">
            CLI
          </span>
        </HoverCardTrigger>
        <HoverCardContent className="w-72">
          <p className="text-sm font-medium">Command-line interface</p>
          <p className="text-muted-foreground mt-1 text-sm">
            A text-based way to run programs by typing commands — here, to add
            components to your project.
          </p>
        </HoverCardContent>
      </HoverCard>{" "}
      and they're copied straight into your codebase.
    </p>
  )
}
```

---

# Shadcn Input

> Free shadcn/ui input component for React with label, search, password, file and validation examples. Theme-aware, accessible, copy or install in one command.

Source: https://designrevision.com/components/input

The **Shadcn Input** is the foundation of every form in your interface — the canonical <a href="https://ui.shadcn.com/docs/components/input" rel="nofollow">shadcn/ui</a> input, a native `<input>` element themed entirely with CSS variables. It stays deliberately minimal so it composes with everything: pair it with a [Label](/components/label), wrap it with an icon or a [Button](/components/button), or drop in a [Kbd](/components/kbd) shortcut hint. The examples below cover the patterns you reach for most.

## When to use

Use an input for **short, free-form text** — an email, a name, a search query, a URL. For a single multi-line value use a textarea; for choosing from a fixed set use a select or radio group; for on/off use a switch or checkbox. Match the `type` to the data (`email`, `password`, `search`, `file`, `url`, `tel`) so browsers offer the right keyboard, autofill, and validation.

## Anatomy

A complete field is three parts: a **label**, the **input**, and optional **helper or error text**. Bind the label to the input with `htmlFor`/`id` so clicking the label focuses the field and screen readers announce them together. Helper text sits below in muted foreground; an error message replaces it and is wired up with `aria-describedby`. Icons, add-ons, counters, and buttons layer on top of this base without changing it.

## Validation and errors

Error state is driven by the standard **`aria-invalid`** attribute, not a custom prop — set it and the input switches on the destructive border and focus ring automatically. This keeps the component compatible with native HTML validation and form libraries like React Hook Form, which toggle `aria-invalid` for you. Always pair the invalid field with a visible message linked by `aria-describedby` so the error is announced, not just colored.

## Accessibility

Every field is keyboard-navigable with a visible 3px focus ring and respects your theme's contrast. Label every input — a bound `Label`, or an `aria-label` when the design has no visible label (as in the inline button and search examples). Disabled inputs set the `disabled` attribute (not just a class) so they leave the tab order, and icon toggles like show/hide password carry an `aria-label` describing the action.

## Theming

The input reads your design tokens (`--input`, `--ring`, `--destructive`, `--muted-foreground`), so it follows your theme — including dark mode — with zero overrides. Any palette produced by a shadcn-compatible theme generator applies automatically.

## Installation

### input

**Install:**

```bash
npx shadcn@latest add @designrevision/input
```

**Dependencies:** utils

**Usage & accessibility:** Extends React.ComponentProps<"input"> — all native <input> attributes are supported. Drive state with type, disabled, readOnly, and aria-invalid (which switches on the destructive ring and border).

```tsx
// components/ui/input.tsx
import * as React from "react"

import { cn } from "@/lib/utils"

function Input({ className, type, ...props }: React.ComponentProps<"input">) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
        className
      )}
      {...props}
    />
  )
}

export { Input }
```

## Examples

### With label

The canonical form field — a `Label` bound to the input by `htmlFor`, with muted helper text below.

**Install:**

```bash
npx shadcn@latest add @designrevision/input-label-01
```

**Dependencies:** input, label

```tsx
// components/ui/input-label-01.tsx
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function InputLabel01() {
  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="you@example.com" />
      <p className="text-sm text-muted-foreground">
        We&apos;ll only use this to send you a receipt.
      </p>
    </div>
  )
}
```

---

### Search

A leading search icon and a trailing `⌘K` hint built with the `Kbd` component. The icon is `pointer-events-none` so clicks fall through to the field.

**Install:**

```bash
npx shadcn@latest add @designrevision/input-search-01
```

**Dependencies:** lucide-react, input, kbd

```tsx
// components/ui/input-search-01.tsx
import { Search } from "lucide-react"

import { Input } from "@/components/ui/input"
import { Kbd } from "@/components/ui/kbd"

export default function InputSearch01() {
  return (
    <div className="relative w-full max-w-sm">
      <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
      <Input type="search" placeholder="Search…" className="pl-9 pr-12" />
      <Kbd className="absolute right-2 top-1/2 -translate-y-1/2">⌘K</Kbd>
    </div>
  )
}
```

---

### Password

A show/hide toggle that swaps the input `type` between `password` and `text` — built with a ghost icon `Button` and an `aria-label`.

**Install:**

```bash
npx shadcn@latest add @designrevision/input-password-01
```

**Dependencies:** lucide-react, input, label, button

```tsx
// components/ui/input-password-01.tsx
"use client"

import * as React from "react"
import { Eye, EyeOff } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function InputPassword01() {
  const [visible, setVisible] = React.useState(false)

  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="password">Password</Label>
      <div className="relative">
        <Input
          id="password"
          type={visible ? "text" : "password"}
          placeholder="Enter your password"
          className="pr-10"
        />
        <Button
          type="button"
          variant="ghost"
          size="icon-sm"
          onClick={() => setVisible((v) => !v)}
          aria-label={visible ? "Hide password" : "Show password"}
          className="absolute right-1 top-1/2 -translate-y-1/2 text-muted-foreground"
        >
          {visible ? <EyeOff /> : <Eye />}
        </Button>
      </div>
    </div>
  )
}
```

---

### With button

An inline field and a submit `Button` in one row — the pattern behind newsletter and waitlist sign-ups.

**Install:**

```bash
npx shadcn@latest add @designrevision/input-button-01
```

**Dependencies:** input, button

```tsx
// components/ui/input-button-01.tsx
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export default function InputButton01() {
  return (
    <form className="flex w-full max-w-sm items-center gap-2">
      <Input type="email" placeholder="you@example.com" aria-label="Email" />
      <Button type="submit">Subscribe</Button>
    </form>
  )
}
```

---

### States

Invalid (`aria-invalid` switches on the destructive ring and border, paired with `aria-describedby`), disabled, and read-only fields.

**Install:**

```bash
npx shadcn@latest add @designrevision/input-validation-01
```

**Dependencies:** input, label

```tsx
// components/ui/input-validation-01.tsx
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function InputValidation01() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <div className="grid gap-2">
        <Label htmlFor="email-invalid">Email</Label>
        <Input
          id="email-invalid"
          type="email"
          defaultValue="not-an-email"
          aria-invalid="true"
          aria-describedby="email-invalid-error"
        />
        <p id="email-invalid-error" className="text-sm text-destructive">
          Enter a valid email address.
        </p>
      </div>
      <div className="grid gap-2">
        <Label htmlFor="email-disabled">Disabled</Label>
        <Input
          id="email-disabled"
          type="email"
          placeholder="you@example.com"
          disabled
        />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="email-readonly">Read only</Label>
        <Input
          id="email-readonly"
          type="email"
          defaultValue="you@example.com"
          readOnly
        />
      </div>
    </div>
  )
}
```

---

### File

A native `type="file"` input styled to match — the upload button comes from `file:` pseudo-element classes, no JavaScript replacement needed.

**Install:**

```bash
npx shadcn@latest add @designrevision/input-file-01
```

**Dependencies:** input, label

```tsx
// components/ui/input-file-01.tsx
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function InputFile01() {
  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="attachment">Attachment</Label>
      <Input id="attachment" type="file" />
      <p className="text-sm text-muted-foreground">PDF or DOCX, up to 5 MB.</p>
    </div>
  )
}
```

---

### With add-ons

Leading and trailing text add-ons (`https://` … `.com`) wrap the field; the border and focus ring move to the group so it reads as one control.

**Install:**

```bash
npx shadcn@latest add @designrevision/input-addon-01
```

**Dependencies:** input, label

```tsx
// components/ui/input-addon-01.tsx
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function InputAddon01() {
  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="site">Website</Label>
      <div className="flex h-9 w-full items-center rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 dark:bg-input/30">
        <span className="select-none pl-3 text-sm text-muted-foreground">
          https://
        </span>
        <Input
          id="site"
          type="text"
          placeholder="acme"
          className="h-auto border-0 bg-transparent px-1 shadow-none focus-visible:border-0 focus-visible:ring-0 dark:bg-transparent"
        />
        <span className="select-none pr-3 text-sm text-muted-foreground">
          .com
        </span>
      </div>
    </div>
  )
}
```

---

### Character counter

A live `current/max` count rendered in `tabular-nums`, backed by the input’s `maxLength`.

**Install:**

```bash
npx shadcn@latest add @designrevision/input-counter-01
```

**Dependencies:** input, label

```tsx
// components/ui/input-counter-01.tsx
"use client"

import * as React from "react"

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function InputCounter01() {
  const maxLength = 40
  const [value, setValue] = React.useState("")

  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="title">Title</Label>
      <div className="relative">
        <Input
          id="title"
          value={value}
          maxLength={maxLength}
          onChange={(e) => setValue(e.target.value)}
          placeholder="A short, descriptive title"
          className="pr-16"
        />
        <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs tabular-nums text-muted-foreground">
          {value.length}/{maxLength}
        </span>
      </div>
    </div>
  )
}
```

---

# Shadcn Input OTP

> Free shadcn/ui input OTP for React — a one-time-password field with accessible, copy-paste-friendly slots: a six-slot default, grouped slots with a separator, digit-only input, a controlled value, and a verify card.

Source: https://designrevision.com/components/input-otp

The **Shadcn Input OTP** is a one-time-password field for React — a row of single-character **slots** that behave like one input. Typing advances, backspace retreats, and pasting a full code fills every slot at once. It is built on the <a href="https://github.com/guilhermerodz/input-otp" rel="nofollow">input-otp</a> library, which backs the slots with a single hidden input so paste, autofill, and screen readers all work correctly. The examples below cover a basic six-slot code, grouped slots, digit-only input, a controlled value, and a verify card.

## The parts

```tsx
<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    {/* … */}
  </InputOTPGroup>
</InputOTP>
```

`InputOTP` owns the value and `maxLength`; `InputOTPGroup` wraps a run of slots; each `InputOTPSlot` renders one character box keyed by `index`. `InputOTPSeparator` drops a divider between groups.

## Paste just works

Because every slot reads from one hidden input, pasting a full code — including an autofilled SMS code — fills all the boxes at once. You don't wire anything up for it.

## Digits only

Pass one of the built-in patterns:

```tsx
import { REGEXP_ONLY_DIGITS } from "input-otp"

<InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
```

The library also ships `REGEXP_ONLY_CHARS` and `REGEXP_ONLY_DIGITS_AND_CHARS`, or pass your own regex string.

## Reading the code

Control it and act when it completes:

```tsx
const [value, setValue] = React.useState("")

<InputOTP
  maxLength={6}
  value={value}
  onChange={setValue}
  onComplete={(code) => verify(code)}
>
```

`onComplete` fires once every slot is filled — the natural place to auto-submit or enable a verify button (the **Verify card** example does exactly that).

## Grouping

Split a long code into readable chunks with a separator:

```tsx
<InputOTPGroup>{/* slots 0–2 */}</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>{/* slots 3–5 */}</InputOTPGroup>
```

## Accessibility

The single hidden input means the field is announced as one control, the mobile keyboard shows the right type, and the active slot gets a fake blinking caret (`animate-caret-blink`) since a real caret can't span separate boxes. Pair it with a `<Label>` or surrounding copy that says what the code is for.

## Installation

### input-otp

**Install:**

```bash
npx shadcn@latest add @designrevision/input-otp
```

**Dependencies:** input-otp, utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| maxLength * | number | — | Number of slots (e.g. 6 for a 6-digit code). |
| pattern | string | — | A regex of allowed chars (e.g. digits only). |
| value / onChange | string / (v: string) => void | — | Controlled value of the entered code. |

`*` required.

**Usage & accessibility:** A one-time-password / verification-code input built on the input-otp library (by @guilhermerodz). Set maxLength to the number of digits and compose <InputOTP> with <InputOTPGroup> of <InputOTPSlot index={n} />, optionally split by an <InputOTPSeparator>. Behaves like one input: paste fills it, arrows move between slots. Pass pattern (REGEXP_ONLY_DIGITS) to restrict input. The active slot shows a blinking caret (animate-caret-blink).

```tsx
// components/ui/input-otp.tsx
"use client"

import * as React from "react"
import { OTPInput, OTPInputContext } from "input-otp"
import { MinusIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function InputOTP({
  className,
  containerClassName,
  ...props
}: React.ComponentProps<typeof OTPInput> & {
  containerClassName?: string
}) {
  return (
    <OTPInput
      data-slot="input-otp"
      containerClassName={cn(
        "flex items-center gap-2 has-disabled:opacity-50",
        containerClassName
      )}
      className={cn("disabled:cursor-not-allowed", className)}
      {...props}
    />
  )
}

function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="input-otp-group"
      className={cn("flex items-center", className)}
      {...props}
    />
  )
}

function InputOTPSlot({
  index,
  className,
  ...props
}: React.ComponentProps<"div"> & {
  index: number
}) {
  const inputOTPContext = React.useContext(OTPInputContext)
  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}

  return (
    <div
      data-slot="input-otp-slot"
      data-active={isActive}
      className={cn(
        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
        className
      )}
      {...props}
    >
      {char}
      {hasFakeCaret && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
        </div>
      )}
    </div>
  )
}

function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
  return (
    <div data-slot="input-otp-separator" role="separator" {...props}>
      <MinusIcon />
    </div>
  )
}

export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
```

## Examples

### Basic

The canonical six-slot one-time-password input.

**Install:**

```bash
npx shadcn@latest add @designrevision/input-otp-demo-01
```

**Dependencies:** input-otp, input-otp

```tsx
// components/ui/input-otp-demo-01.tsx
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@/components/ui/input-otp"

export default function InputOTPDemo01() {
  return (
    <InputOTP maxLength={6}>
      <InputOTPGroup>
        <InputOTPSlot index={0} />
        <InputOTPSlot index={1} />
        <InputOTPSlot index={2} />
        <InputOTPSlot index={3} />
        <InputOTPSlot index={4} />
        <InputOTPSlot index={5} />
      </InputOTPGroup>
    </InputOTP>
  )
}
```

---

### With separator

Two groups of three slots split by a separator.

**Install:**

```bash
npx shadcn@latest add @designrevision/input-otp-separator-01
```

**Dependencies:** input-otp, input-otp

```tsx
// components/ui/input-otp-separator-01.tsx
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/ui/input-otp"

export default function InputOTPSeparator01() {
  return (
    <InputOTP maxLength={6}>
      <InputOTPGroup>
        <InputOTPSlot index={0} />
        <InputOTPSlot index={1} />
        <InputOTPSlot index={2} />
      </InputOTPGroup>
      <InputOTPSeparator />
      <InputOTPGroup>
        <InputOTPSlot index={3} />
        <InputOTPSlot index={4} />
        <InputOTPSlot index={5} />
      </InputOTPGroup>
    </InputOTP>
  )
}
```

---

### Digits only

Restricts input to numbers with the REGEXP_ONLY_DIGITS pattern.

**Install:**

```bash
npx shadcn@latest add @designrevision/input-otp-pattern-01
```

**Dependencies:** input-otp, input-otp

```tsx
// components/ui/input-otp-pattern-01.tsx
"use client"

import { REGEXP_ONLY_DIGITS } from "input-otp"

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@/components/ui/input-otp"

export default function InputOTPPattern01() {
  return (
    <div className="space-y-2 text-center">
      <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS}>
        <InputOTPGroup>
          {Array.from({ length: 6 }).map((_, i) => (
            <InputOTPSlot key={i} index={i} />
          ))}
        </InputOTPGroup>
      </InputOTP>
      <p className="text-muted-foreground text-xs">Digits only</p>
    </div>
  )
}
```

---

### Controlled

A controlled OTP that echoes the entered value as you type.

**Install:**

```bash
npx shadcn@latest add @designrevision/input-otp-controlled-01
```

**Dependencies:** input-otp, input-otp

```tsx
// components/ui/input-otp-controlled-01.tsx
"use client"

import * as React from "react"

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@/components/ui/input-otp"

export default function InputOTPControlled01() {
  const [value, setValue] = React.useState("")

  return (
    <div className="space-y-3 text-center">
      <InputOTP maxLength={6} value={value} onChange={setValue}>
        <InputOTPGroup>
          {Array.from({ length: 6 }).map((_, i) => (
            <InputOTPSlot key={i} index={i} />
          ))}
        </InputOTPGroup>
      </InputOTP>
      <div className="text-muted-foreground text-sm">
        {value === "" ? "Enter your code" : `You entered: ${value}`}
      </div>
    </div>
  )
}
```

---

### Verify card

An OTP in a verification card with a submit that stays disabled until all slots are filled.

**Install:**

```bash
npx shadcn@latest add @designrevision/input-otp-form-01
```

**Dependencies:** input-otp, input-otp, button, card

```tsx
// components/ui/input-otp-form-01.tsx
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/ui/input-otp"

export default function InputOTPForm01() {
  const [value, setValue] = React.useState("")

  return (
    <Card className="w-full max-w-sm">
      <CardHeader className="items-center text-center">
        <CardTitle>Verify your email</CardTitle>
        <CardDescription>
          Enter the 6-digit code we sent to your inbox.
        </CardDescription>
      </CardHeader>
      <CardContent className="flex justify-center">
        <InputOTP maxLength={6} value={value} onChange={setValue}>
          <InputOTPGroup>
            <InputOTPSlot index={0} />
            <InputOTPSlot index={1} />
            <InputOTPSlot index={2} />
          </InputOTPGroup>
          <InputOTPSeparator />
          <InputOTPGroup>
            <InputOTPSlot index={3} />
            <InputOTPSlot index={4} />
            <InputOTPSlot index={5} />
          </InputOTPGroup>
        </InputOTP>
      </CardContent>
      <CardFooter>
        <Button className="w-full" disabled={value.length < 6}>
          Verify
        </Button>
      </CardFooter>
    </Card>
  )
}
```

---

# Shadcn Kbd

> Free shadcn/ui kbd component for React to display keyboard shortcuts and key hints in menus, tooltips, and command triggers. Copy or install in one command.

Source: https://designrevision.com/components/kbd

The **Shadcn Kbd** renders a keyboard key or shortcut hint — a small, theme-aware `<kbd>` element for surfacing the shortcut behind an action. Drop it into menus, tooltips, and command triggers.

## When to use

Use `Kbd` anywhere you want to teach a shortcut: next to a menu item, inside a [button](/components/button) like a search or command trigger, or in a tooltip. It is a presentational hint — it does not bind the shortcut itself.

## Showing combinations

The component renders a single key. For a combination, render one `Kbd` per key and group them side by side — for example `⌘` followed by `K`. A flex container with a small gap keeps the spacing tidy.

## Theming

`Kbd` is styled with your `--muted` and `--border` tokens, so it follows your theme — including dark mode — with zero overrides.

## Installation

### kbd

**Install:**

```bash
npx shadcn@latest add @designrevision/kbd
```

**Dependencies:** utils

**Usage & accessibility:** Extends React.ComponentProps<"kbd"> — all native kbd attributes are supported.

```tsx
// components/ui/kbd.tsx
import * as React from "react"

import { cn } from "@/lib/utils"

function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
  return (
    <kbd
      className={cn(
        "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}

export { Kbd }
```

## Examples

### Keys and shortcuts

Single keys and a key combination — render one Kbd per key and group them for a shortcut.

**Install:**

```bash
npx shadcn@latest add @designrevision/kbd-keys-01
```

**Dependencies:** kbd

```tsx
// components/ui/kbd-keys-01.tsx
import { Kbd } from "@/components/ui/kbd"

export default function KbdKeys01() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Kbd>⌘</Kbd>
      <Kbd>⇧</Kbd>
      <Kbd>⌥</Kbd>
      <Kbd>↵</Kbd>
      <Kbd>Esc</Kbd>
      <span className="flex items-center gap-1">
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </span>
    </div>
  )
}
```

---

# Shadcn Label

> Free shadcn/ui label component for React, built on Radix Label — accessible form labels bound to inputs by htmlFor, with required and disabled states. Copy or install in one command.

Source: https://designrevision.com/components/label

The **Shadcn Label** names the controls in your forms — the canonical <a href="https://ui.shadcn.com/docs/components/label" rel="nofollow">shadcn/ui</a> label, a thin wrapper over <a href="https://www.radix-ui.com/primitives/docs/components/label" rel="nofollow">Radix Label</a> that adds accessible association and tidy disabled handling. Pair it with an [Input](/components/input) — or any form control — to give every field a clear, clickable name.

## When to use

Use a label for **every form control** — inputs, selects, checkboxes, switches, radios. It is not decorative: the association is what lets assistive technology announce the field, and it enlarges the click target so tapping the label focuses or toggles the control. A [placeholder](/components/input) is not a substitute, since it vanishes on input and is unreliably announced.

## Association

Bind the label to its control by setting `htmlFor` on the label to the control's `id` — `htmlFor="email"` with `id="email"`. Built on Radix Label, the component forwards a click to the bound control and prevents accidental text selection when users double-click the label. Keep the label text short and specific; describe the value, not the action.

## States

Mark a required field by adding a small `*` (or an "Optional" hint on the others) so expectations are clear before submission. When a field is disabled, the label dims automatically: it reads `group-data-[disabled]` from the surrounding form group and `peer-disabled` from a sibling control, lowering its opacity so the whole field reads as inactive — no extra classes needed.

## Accessibility

A bound label is the most robust way to give a field an accessible name. When a design has no visible label, fall back to an `aria-label` on the control itself, but prefer a visible `Label` wherever possible. Group related controls (like a set of radios) with a `fieldset` and `legend` in addition to per-control labels.

## Theming

The label inherits your typography and `--foreground` token, so it follows your theme — including dark mode — with zero overrides. It carries no color of its own beyond the text, which keeps it consistent across every form in your app.

## Installation

### label

**Install:**

```bash
npx shadcn@latest add @designrevision/label
```

**Dependencies:** @radix-ui/react-label, utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| htmlFor | string | — | Id of the input this label is bound to. Clicking the label then focuses that input. |

**Usage & accessibility:** Extends the Radix Label Root (@radix-ui/react-label) — all native <label> attributes are supported.

```tsx
// components/ui/label.tsx
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"

import { cn } from "@/lib/utils"

function Label({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        "flex select-none items-center gap-2 text-sm font-medium leading-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
        className
      )}
      {...props}
    />
  )
}

export { Label }
```

## Examples

### Labelled fields

A label bound to an input by `htmlFor`, a required field with an asterisk, and a disabled field whose label dims automatically via `group-data-[disabled]`.

**Install:**

```bash
npx shadcn@latest add @designrevision/label-fields-01
```

**Dependencies:** label, input

```tsx
// components/ui/label-fields-01.tsx
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function LabelFields01() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <div className="grid gap-2">
        <Label htmlFor="name">Full name</Label>
        <Input id="name" placeholder="Ada Lovelace" />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="email">
          Email
          <span className="text-destructive">*</span>
        </Label>
        <Input id="email" type="email" placeholder="you@example.com" required />
      </div>
      <div className="group grid gap-2" data-disabled="true">
        <Label htmlFor="account">Account ID</Label>
        <Input id="account" defaultValue="acct_4Xa92" disabled />
      </div>
    </div>
  )
}
```

---

# Shadcn Line Chart

> Free shadcn/ui line chart for React — built on Recharts and themed with CSS variables. Natural and linear curves, multiple series, custom dots, an interactive variant, plus loading, empty, and accessible states.

Source: https://designrevision.com/components/line-chart

The **Shadcn Line Chart** is a <a href="https://recharts.org/" rel="nofollow">Recharts</a> `LineChart` wrapped in the shadcn `ChartContainer` — themed with your `--chart` CSS variables and dark-mode-ready. It's the default chart for **time-series trends**. Below: natural and linear curves, multiple series, custom dots, an interactive variant, and the production states.

## The basic line chart

```tsx
const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig

<ChartContainer config={chartConfig}>
  <LineChart accessibilityLayer data={chartData} margin={{ left: 12, right: 12 }}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" tickLine={false} axisLine={false} />
    <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
    <Line dataKey="desktop" type="natural" stroke="var(--color-desktop)" strokeWidth={2} dot={false} />
  </LineChart>
</ChartContainer>
```

## Curves

The `type` prop sets the interpolation: **`natural`** / **`monotone`** for smooth curves, **`linear`** for straight segments, **`step`** for a stepped line.

## Dots

- Hide them with `dot={false}`.
- Simple dots: `dot={{ fill: "var(--color-desktop)" }}` plus `activeDot={{ r: 6 }}`.
- **Custom points:** pass a render function to `dot` returning a Recharts `<Dot>` — the Custom dots example colors each point from the data.

## Multiple series

Render one `<Line>` per series and add a legend:

```tsx
<Line dataKey="desktop" type="monotone" stroke="var(--color-desktop)" dot={false} />
<Line dataKey="mobile"  type="monotone" stroke="var(--color-mobile)"  dot={false} />
<ChartLegend content={<ChartLegendContent />} />
```

## Interactive

The Interactive example shows per-series totals in clickable header tiles and points the `Line` at the active key — the pattern for letting users switch between metrics.

## Production states

Loading (skeleton), empty (icon + message), and accessible (`accessibilityLayer`, `role`/`aria-label`, data-table fallback) variants are included.

See **[Shadcn Charts](/components/chart)** for theming and dark mode, and the **[Area Chart](/components/area-chart)** for the filled version.

## Installation

### chart

**Install:**

```bash
npx shadcn@latest add @designrevision/chart
```

**Dependencies:** recharts, utils, card

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| config * | ChartConfig | — | Maps each data key to { label, icon?, color }. Colors become --color-<key> CSS vars. |
| children * | React.ReactElement (a Recharts chart) | — | A single Recharts chart (BarChart, LineChart, …) — ChartContainer wraps it in a ResponsiveContainer. |

`*` required.

**Usage & accessibility:** A Recharts wrapper themed with CSS variables. Pass a `config` (ChartConfig: each data key → { label, icon?, color }) to <ChartContainer>; it injects --color-<key> vars (scoped per light/dark theme) that your Recharts series reference as fill="var(--color-desktop)". Use <ChartTooltip content={<ChartTooltipContent />}> and <ChartLegend content={<ChartLegendContent />}> for themed tooltips/legends. Colors default to the --chart-1..5 tokens, which re-theme automatically in dark mode. The container needs a height — keep aspect-video / min-h-* or ResponsiveContainer measures 0. This is the base primitive; the Bar/Line/Area/Pie/Radar/Radial chart pages compose it.

```tsx
// components/ui/chart.tsx
"use client"

import * as React from "react"
import * as RechartsPrimitive from "recharts"

import { cn } from "@/lib/utils"

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

  if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

  return context
}

function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
}: React.ComponentProps<"div"> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >["children"]
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`

  return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme || config.color
  )

  if (!colorConfig.length) {
    return null
  }

  return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
}
`
          )
          .join("\n"),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = "dot",
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<"div"> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    indicator?: "line" | "dot" | "dashed"
    nameKey?: string
    labelKey?: string
  }) {
  const { config } = useChart()

  const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
      return null
    }

    const [item] = payload
    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
    const itemConfig = getPayloadConfigFromPayload(config, item, key)
    const value =
      !labelKey && typeof label === "string"
        ? config[label as keyof typeof config]?.label || label
        : itemConfig?.label

    if (labelFormatter) {
      return (
        <div className={cn("font-medium", labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      )
    }

    if (!value) {
      return null
    }

    return <div className={cn("font-medium", labelClassName)}>{value}</div>
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ])

  if (!active || !payload?.length) {
    return null
  }

  const nestLabel = payload.length === 1 && indicator !== "dot"

  return (
    <div
      className={cn(
        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
        className
      )}
    >
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-1.5">
        {payload
          .filter((item) => item.type !== "none")
          .map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

            return (
              <div
                key={item.dataKey}
                className={cn(
                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                            {
                              "h-2.5 w-2.5": indicator === "dot",
                              "w-1": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="text-foreground font-mono font-medium tabular-nums">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
      </div>
    </div>
  )
}

const ChartLegend = RechartsPrimitive.Legend

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = "bottom",
  nameKey,
}: React.ComponentProps<"div"> &
  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
    hideIcon?: boolean
    nameKey?: string
  }) {
  const { config } = useChart()

  if (!payload?.length) {
    return null
  }

  return (
    <div
      className={cn(
        "flex items-center justify-center gap-4",
        verticalAlign === "top" ? "pb-3" : "pt-3",
        className
      )}
    >
      {payload
        .filter((item) => item.type !== "none")
        .map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

          return (
            <div
              key={item.value}
              className={cn(
                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
              )}
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
    </div>
  )
}

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

  const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

  let configLabelKey: string = key

  if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

  return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
```

## Examples

### Line Chart

The canonical single natural-curve line with a grid, axis, and tooltip.

**Install:**

```bash
npx shadcn@latest add @designrevision/line-chart-demo-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/line-chart-demo-01.tsx
"use client"

import { CartesianGrid, Line, LineChart, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig

export default function LineChartDemo01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Line Chart</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <LineChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 12, right: 12 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel />}
            />
            <Line
              dataKey="desktop"
              type="natural"
              stroke="var(--color-desktop)"
              strokeWidth={2}
              dot={false}
            />
          </LineChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Linear with dots

A straight-segment line with visible dots and an active dot on hover.

**Install:**

```bash
npx shadcn@latest add @designrevision/line-chart-linear-01
```

**Dependencies:** recharts, lucide-react, chart, card

```tsx
// components/ui/line-chart-linear-01.tsx
"use client"

import { TrendingUp } from "lucide-react"
import { CartesianGrid, Line, LineChart, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig

export default function LineChartLinear01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Line Chart — Linear</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <LineChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 12, right: 12 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel />}
            />
            <Line
              dataKey="desktop"
              type="linear"
              stroke="var(--color-desktop)"
              strokeWidth={2}
              dot={{ fill: "var(--color-desktop)" }}
              activeDot={{ r: 6 }}
            />
          </LineChart>
        </ChartContainer>
      </CardContent>
      <CardFooter className="flex-col items-start gap-2 text-sm">
        <div className="flex gap-2 leading-none font-medium">
          Trending up by 5.2% this month <TrendingUp className="size-4" />
        </div>
      </CardFooter>
    </Card>
  )
}
```

---

### Multiple series

Two monotone lines with a legend and a multi-row tooltip.

**Install:**

```bash
npx shadcn@latest add @designrevision/line-chart-multiple-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/line-chart-multiple-01.tsx
"use client"

import { CartesianGrid, Line, LineChart, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function LineChartMultiple01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Line Chart — Multiple</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <LineChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 12, right: 12 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
            <ChartLegend content={<ChartLegendContent />} />
            <Line
              dataKey="desktop"
              type="monotone"
              stroke="var(--color-desktop)"
              strokeWidth={2}
              dot={false}
            />
            <Line
              dataKey="mobile"
              type="monotone"
              stroke="var(--color-mobile)"
              strokeWidth={2}
              dot={false}
            />
          </LineChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Custom dots

Per-point custom Dot rendering colored from the data.

**Install:**

```bash
npx shadcn@latest add @designrevision/line-chart-dots-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/line-chart-dots-01.tsx
"use client"

import { CartesianGrid, Dot, Line, LineChart, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
  { browser: "other", visitors: 90, fill: "var(--color-other)" },
]

const chartConfig = {
  visitors: { label: "Visitors", color: "var(--chart-2)" },
  chrome: { label: "Chrome", color: "var(--chart-1)" },
  safari: { label: "Safari", color: "var(--chart-2)" },
  firefox: { label: "Firefox", color: "var(--chart-3)" },
  edge: { label: "Edge", color: "var(--chart-4)" },
  other: { label: "Other", color: "var(--chart-5)" },
} satisfies ChartConfig

export default function LineChartDots01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Line Chart — Custom Dots</CardTitle>
        <CardDescription>Visitors by browser</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <LineChart
            accessibilityLayer
            data={chartData}
            margin={{ top: 24, left: 12, right: 12 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="browser"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) =>
                chartConfig[value as keyof typeof chartConfig]?.label as string
              }
            />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="line" nameKey="visitors" hideLabel />}
            />
            <Line
              dataKey="visitors"
              type="natural"
              stroke="var(--color-visitors)"
              strokeWidth={2}
              dot={({ cx, cy, payload }) => (
                <Dot
                  key={payload.browser}
                  cx={cx}
                  cy={cy}
                  r={5}
                  fill={payload.fill}
                  stroke={payload.fill}
                />
              )}
            />
          </LineChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Interactive

Clickable header tiles with per-series totals switch the active line.

**Install:**

```bash
npx shadcn@latest add @designrevision/line-chart-interactive-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/line-chart-interactive-01.tsx
"use client"

import * as React from "react"
import { CartesianGrid, Line, LineChart, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { date: "2024-04-01", desktop: 222, mobile: 150 },
  { date: "2024-04-02", desktop: 97, mobile: 180 },
  { date: "2024-04-03", desktop: 167, mobile: 120 },
  { date: "2024-04-04", desktop: 242, mobile: 260 },
  { date: "2024-04-05", desktop: 373, mobile: 290 },
  { date: "2024-04-06", desktop: 301, mobile: 340 },
  { date: "2024-04-07", desktop: 245, mobile: 180 },
  { date: "2024-04-08", desktop: 409, mobile: 320 },
  { date: "2024-04-09", desktop: 59, mobile: 110 },
  { date: "2024-04-10", desktop: 261, mobile: 190 },
  { date: "2024-04-11", desktop: 327, mobile: 350 },
  { date: "2024-04-12", desktop: 292, mobile: 210 },
  { date: "2024-04-13", desktop: 342, mobile: 380 },
  { date: "2024-04-14", desktop: 137, mobile: 220 },
  { date: "2024-04-15", desktop: 120, mobile: 170 },
  { date: "2024-04-16", desktop: 138, mobile: 190 },
  { date: "2024-04-17", desktop: 446, mobile: 360 },
  { date: "2024-04-18", desktop: 364, mobile: 410 },
  { date: "2024-04-19", desktop: 243, mobile: 180 },
  { date: "2024-04-20", desktop: 89, mobile: 150 },
  { date: "2024-04-21", desktop: 137, mobile: 200 },
  { date: "2024-04-22", desktop: 224, mobile: 170 },
  { date: "2024-04-23", desktop: 138, mobile: 230 },
  { date: "2024-04-24", desktop: 387, mobile: 290 },
  { date: "2024-04-25", desktop: 215, mobile: 250 },
  { date: "2024-04-26", desktop: 75, mobile: 130 },
  { date: "2024-04-27", desktop: 383, mobile: 420 },
  { date: "2024-04-28", desktop: 122, mobile: 180 },
  { date: "2024-04-29", desktop: 315, mobile: 240 },
  { date: "2024-04-30", desktop: 454, mobile: 380 },
]

const chartConfig = {
  views: { label: "Page Views" },
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function LineChartInteractive01() {
  const [activeChart, setActiveChart] =
    React.useState<"desktop" | "mobile">("desktop")

  const total = React.useMemo(
    () => ({
      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
    }),
    []
  )

  return (
    <Card className="w-full max-w-2xl py-0">
      <CardHeader className="flex flex-col items-stretch border-b !p-0 sm:flex-row">
        <div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:pb-0">
          <CardTitle>Line Chart — Interactive</CardTitle>
          <CardDescription>Daily page views for April 2024</CardDescription>
        </div>
        <div className="flex">
          {(["desktop", "mobile"] as const).map((key) => (
            <button
              key={key}
              data-active={activeChart === key}
              className="data-[active=true]:bg-muted/50 relative flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
              onClick={() => setActiveChart(key)}
            >
              <span className="text-muted-foreground text-xs">
                {chartConfig[key].label}
              </span>
              <span className="text-lg leading-none font-bold sm:text-3xl">
                {total[key].toLocaleString()}
              </span>
            </button>
          ))}
        </div>
      </CardHeader>
      <CardContent className="px-2 sm:p-6">
        <ChartContainer
          config={chartConfig}
          className="aspect-auto h-[250px] w-full"
        >
          <LineChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 12, right: 12 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="date"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              minTickGap={32}
              tickFormatter={(value) =>
                new Date(value).toLocaleDateString("en-US", {
                  month: "short",
                  day: "numeric",
                })
              }
            />
            <ChartTooltip
              content={
                <ChartTooltipContent
                  className="w-[150px]"
                  nameKey="views"
                  labelFormatter={(value) =>
                    new Date(value).toLocaleDateString("en-US", {
                      month: "short",
                      day: "numeric",
                      year: "numeric",
                    })
                  }
                />
              }
            />
            <Line
              dataKey={activeChart}
              type="monotone"
              stroke={`var(--color-${activeChart})`}
              strokeWidth={2}
              dot={false}
            />
          </LineChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Loading state

A skeleton shaped like the line chart while data loads.

**Install:**

```bash
npx shadcn@latest add @designrevision/line-chart-loading-01
```

**Dependencies:** card, skeleton

```tsx
// components/ui/line-chart-loading-01.tsx
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

// A loading state for a line chart — header placeholders + a chart-area skeleton with axis ticks.
export default function LineChartLoading01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader className="gap-2">
        <Skeleton className="h-5 w-28" />
        <Skeleton className="h-4 w-40" />
      </CardHeader>
      <CardContent>
        <div className="flex aspect-video flex-col justify-between gap-3">
          <Skeleton className="h-full w-full rounded-lg" />
          <div className="flex justify-between gap-2 px-1">
            {Array.from({ length: 6 }).map((_, i) => (
              <Skeleton key={i} className="h-3 w-8" />
            ))}
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
```

---

### Empty state

A graceful no-data state with an icon and message.

**Install:**

```bash
npx shadcn@latest add @designrevision/line-chart-empty-01
```

**Dependencies:** lucide-react, card

```tsx
// components/ui/line-chart-empty-01.tsx
import { ChartLine } from "lucide-react"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export default function LineChartEmpty01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Line Chart</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex aspect-video flex-col items-center justify-center gap-2 rounded-lg border border-dashed text-center">
          <ChartLine className="text-muted-foreground size-8" />
          <div className="text-sm font-medium">No data to display</div>
          <p className="text-muted-foreground max-w-[15rem] text-xs">
            There's nothing to chart for this period yet.
          </p>
        </div>
      </CardContent>
    </Card>
  )
}
```

---

### Accessible

Keyboard-navigable with a screen-reader data-table fallback.

**Install:**

```bash
npx shadcn@latest add @designrevision/line-chart-a11y-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/line-chart-a11y-01.tsx
"use client"

import { CartesianGrid, Line, LineChart, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig

export default function LineChartA11y01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Accessible Line Chart</CardTitle>
        <CardDescription>
          Keyboard-navigable, with a screen-reader data table
        </CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer
          config={chartConfig}
          role="img"
          aria-label="Line chart of desktop visitors from January to June 2024, ranging from 73 in April to 305 in February."
        >
          <LineChart
            accessibilityLayer
            data={chartData}
            margin={{ left: 12, right: 12 }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="month"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel />}
            />
            <Line
              dataKey="desktop"
              type="natural"
              stroke="var(--color-desktop)"
              strokeWidth={2}
              dot={false}
            />
          </LineChart>
        </ChartContainer>

        {/* Visually-hidden data-table fallback for assistive technology. */}
        <table className="sr-only">
          <caption>Desktop visitors by month, January to June 2024</caption>
          <thead>
            <tr>
              <th scope="col">Month</th>
              <th scope="col">Visitors</th>
            </tr>
          </thead>
          <tbody>
            {chartData.map((row) => (
              <tr key={row.month}>
                <th scope="row">{row.month}</th>
                <td>{row.desktop}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </CardContent>
    </Card>
  )
}
```

---

# Shadcn Multi-Select

> Free shadcn/ui multi-select component for React — searchable, creatable tags, async loading, max items, grouped options and React Hook Form. The component shadcn/ui never shipped. Copy or install in one command.

Source: https://designrevision.com/components/multi-select

The **Shadcn Multi-Select** is the component shadcn/ui never shipped — a searchable dropdown for selecting **several** values, shown as removable tokens. Official shadcn/ui has a single-value [Select](/components/select) and a combobox *pattern*, but **no multi-select component**; this one fills that gap, built the shadcn way on the [Popover](/components/select) and Command primitives so it matches your existing UI. The examples below cover tags, async search, max items, grouping, and forms.

## When to use — multi-select vs combobox vs checkbox group

Reach for a multi-select when users choose **several** values from a list long enough to need search — skills, tags, assignees, categories. The selected values appear as removable badges, and typing filters the options. For picking a **single** value from the same searchable pattern, use a combobox. For a **short, always-visible** set of independent options, a [checkbox](/components/checkbox) group reads better than a dropdown.

## Creatable tags

Set `creatable` and the multi-select becomes a **tags input**: when the query matches no existing option, a "Create …" row appears, and selecting it adds the typed value. This is the pattern behind labels, topics, and free-form tagging — no separate component required.

## Async search

For directories or API-backed lists, pass an `onSearch` function that returns a `Promise` of options. The component **debounces** the query, shows a loading state, and remembers the labels of already-selected items so the tokens stay readable even as the option list changes underneath them.

## Max items and states

Cap the selection with `maxSelected` — once the limit is reached, the unselected options disable so users can't exceed it. Individual options can be `disabled` (never selectable) or `fixed` (selected and non-removable, e.g. a baseline permission), and the whole field accepts `disabled`.

## React Hook Form

The value is a plain `string[]`, so it drops into <a href="https://react-hook-form.com" rel="nofollow">React Hook Form</a> cleanly: read the field into `value` and write it back from `onChange`. Validate with a `zod` array schema like `z.array(z.string()).min(1)` and set `aria-invalid` on the field for the error styling. The React Hook Form example is a complete, working field.

## Accessibility

The trigger is a `role="combobox"` button with `aria-expanded`, and the list is the keyboard-navigable Command (arrow keys, type to filter, Enter to toggle, Escape to close). Each token's remove control carries an `aria-label`. Bind the field to a [Label](/components/label) with `htmlFor`/`id`, and link any error message with `aria-describedby`.

## Theming

The multi-select is assembled from the themed Popover, Command, and [Badge](/components/badge) primitives, so it reads your design tokens (`--primary`, `--popover`, `--input`, `--ring`) and follows your theme — including dark mode — with zero overrides.

## Installation

### multi-select

**Install:**

```bash
npx shadcn@latest add @designrevision/multi-select
```

**Dependencies:** lucide-react, popover, command, badge, utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| options * | MultiSelectOption[] | — | The available options. Each has value, label, and optional disabled, fixed, group, and icon. |
| value * | string[] | — | The selected values (controlled). |
| onChange * | (value: string[]) => void | — | Fires with the new array of selected values. |
| maxSelected | number | — | Caps how many items can be selected. |
| creatable | boolean | false | Allow creating new entries from the search query. |
| onSearch | (query: string) => Promise<MultiSelectOption[]> | — | Async option source — when set, options are fetched per (debounced) query. |

`*` required.

**Usage & accessibility:** A token-input multi-select built on Popover + Command + Badge. Set aria-invalid for the destructive error styling. Also accepts placeholder, disabled, emptyText, and loadingText.

```tsx
// components/ui/multi-select.tsx
"use client"

import * as React from "react"
import { CheckIcon, ChevronsUpDownIcon, XIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

export type MultiSelectOption = {
  value: string
  label: string
  disabled?: boolean
  /** Cannot be removed once selected. */
  fixed?: boolean
  /** Optional group heading the option is listed under. */
  group?: string
  /** Optional leading content (icon, avatar) shown in the list. */
  icon?: React.ReactNode
}

export interface MultiSelectProps {
  options: MultiSelectOption[]
  value: string[]
  onChange: (value: string[]) => void
  placeholder?: string
  /** Cap the number of selected items. */
  maxSelected?: number
  /** Allow creating new entries from the search query. */
  creatable?: boolean
  disabled?: boolean
  className?: string
  emptyText?: string
  loadingText?: string
  /** Async option source. When provided, options are fetched per query. */
  onSearch?: (query: string) => Promise<MultiSelectOption[]>
  id?: string
  "aria-invalid"?: boolean
  "aria-describedby"?: string
}

export function MultiSelect({
  options: optionsProp,
  value,
  onChange,
  placeholder = "Select…",
  maxSelected,
  creatable = false,
  disabled = false,
  className,
  emptyText = "No results.",
  loadingText = "Loading…",
  onSearch,
  id,
  "aria-invalid": ariaInvalid,
  "aria-describedby": ariaDescribedby,
}: MultiSelectProps) {
  const [open, setOpen] = React.useState(false)
  const [query, setQuery] = React.useState("")
  const [asyncOptions, setAsyncOptions] = React.useState<MultiSelectOption[]>([])
  const [loading, setLoading] = React.useState(false)
  const labels = React.useRef(new Map<string, string>())

  const options = onSearch ? asyncOptions : optionsProp

  // Remember labels so selected tokens stay readable even after the
  // (async) option list changes.
  React.useEffect(() => {
    for (const option of [...optionsProp, ...asyncOptions]) {
      labels.current.set(option.value, option.label)
    }
  }, [optionsProp, asyncOptions])

  // Resolve a value's label synchronously (so tokens render correctly on the
  // first paint), falling back to the remembered cache and then the raw value.
  const labelFor = (val: string) =>
    optionsProp.find((option) => option.value === val)?.label ??
    asyncOptions.find((option) => option.value === val)?.label ??
    labels.current.get(val) ??
    val

  // Debounced async search.
  React.useEffect(() => {
    if (!onSearch || !open) return
    let active = true
    setLoading(true)
    const timer = setTimeout(() => {
      onSearch(query).then((result) => {
        if (!active) return
        setAsyncOptions(result)
        setLoading(false)
      })
    }, 300)
    return () => {
      active = false
      clearTimeout(timer)
    }
  }, [query, onSearch, open])

  const atMax = maxSelected != null && value.length >= maxSelected

  const isFixed = (val: string) =>
    optionsProp.find((option) => option.value === val)?.fixed ?? false

  const toggle = (val: string) => {
    if (value.includes(val)) {
      if (isFixed(val)) return
      onChange(value.filter((item) => item !== val))
    } else if (!atMax) {
      onChange([...value, val])
    }
  }

  const create = () => {
    const next = query.trim()
    if (!next || atMax || value.includes(next)) return
    labels.current.set(next, next)
    onChange([...value, next])
    setQuery("")
  }

  const groups = React.useMemo(() => {
    const map = new Map<string, MultiSelectOption[]>()
    for (const option of options) {
      const key = option.group ?? ""
      if (!map.has(key)) map.set(key, [])
      map.get(key)!.push(option)
    }
    return Array.from(map.entries())
  }, [options])

  const canCreate =
    creatable &&
    query.trim() !== "" &&
    !atMax &&
    !options.some(
      (option) => option.label.toLowerCase() === query.trim().toLowerCase()
    ) &&
    !value.includes(query.trim())

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <button
          type="button"
          id={id}
          role="combobox"
          aria-expanded={open}
          aria-invalid={ariaInvalid}
          aria-describedby={ariaDescribedby}
          disabled={disabled}
          className={cn(
            "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive flex min-h-9 w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-1.5 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
            className
          )}
        >
          <span className="flex flex-1 flex-wrap items-center gap-1 text-left">
            {value.length === 0 ? (
              <span className="text-muted-foreground">{placeholder}</span>
            ) : (
              value.map((val) => (
                <Badge key={val} variant="secondary" className="gap-1 pr-1">
                  {labelFor(val)}
                  {!isFixed(val) && (
                    <span
                      role="button"
                      tabIndex={-1}
                      aria-label={`Remove ${labelFor(val)}`}
                      onClick={(event) => {
                        event.stopPropagation()
                        toggle(val)
                      }}
                      onKeyDown={(event) => {
                        if (event.key === "Enter" || event.key === " ") {
                          event.stopPropagation()
                          toggle(val)
                        }
                      }}
                      className="text-muted-foreground hover:text-foreground rounded-full outline-none"
                    >
                      <XIcon className="size-3" />
                    </span>
                  )}
                </Badge>
              ))
            )}
          </span>
          <ChevronsUpDownIcon className="size-4 shrink-0 opacity-50" />
        </button>
      </PopoverTrigger>
      <PopoverContent
        className="w-(--radix-popover-trigger-width) p-0"
        align="start"
      >
        <Command shouldFilter={!onSearch}>
          <CommandInput
            placeholder="Search…"
            value={query}
            onValueChange={setQuery}
          />
          <CommandList>
            {loading ? (
              <div className="text-muted-foreground py-6 text-center text-sm">
                {loadingText}
              </div>
            ) : (
              <>
                {!canCreate && <CommandEmpty>{emptyText}</CommandEmpty>}
                {groups.map(([group, items]) => (
                  <CommandGroup key={group} heading={group || undefined}>
                    {items.map((option) => {
                      const selected = value.includes(option.value)
                      return (
                        <CommandItem
                          key={option.value}
                          value={option.label}
                          disabled={option.disabled || (!selected && atMax)}
                          onSelect={() => toggle(option.value)}
                        >
                          <CheckIcon
                            className={cn(
                              "size-4",
                              selected ? "opacity-100" : "opacity-0"
                            )}
                          />
                          {option.icon}
                          {option.label}
                        </CommandItem>
                      )
                    })}
                  </CommandGroup>
                ))}
                {canCreate && (
                  <CommandGroup>
                    <CommandItem value={query} onSelect={create}>
                      <CheckIcon className="size-4 opacity-0" />
                      Create &ldquo;{query.trim()}&rdquo;
                    </CommandItem>
                  </CommandGroup>
                )}
              </>
            )}
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}
```

## Examples

### Basic

Searchable multi-select with removable badge tokens — built on Popover + Command, controlled with a `string[]` value.

**Install:**

```bash
npx shadcn@latest add @designrevision/multi-select-demo-01
```

**Dependencies:** @designrevision/multi-select, label

```tsx
// components/ui/multi-select-demo-01.tsx
"use client"

import * as React from "react"

import { Label } from "@/components/ui/label"
import { MultiSelect } from "@/components/ui/multi-select"

const frameworks = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "nuxt", label: "Nuxt" },
  { value: "svelte", label: "SvelteKit" },
  { value: "solid", label: "SolidStart" },
]

export default function MultiSelectDemo01() {
  const [value, setValue] = React.useState<string[]>(["next", "astro"])

  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="frameworks">Frameworks</Label>
      <MultiSelect
        id="frameworks"
        options={frameworks}
        value={value}
        onChange={setValue}
        placeholder="Select frameworks…"
      />
    </div>
  )
}
```

---

### Grouped

Options organized under group headings via the `group` field on each option.

**Install:**

```bash
npx shadcn@latest add @designrevision/multi-select-grouped-01
```

**Dependencies:** @designrevision/multi-select, label

```tsx
// components/ui/multi-select-grouped-01.tsx
"use client"

import * as React from "react"

import { Label } from "@/components/ui/label"
import { MultiSelect } from "@/components/ui/multi-select"

const options = [
  { value: "react", label: "React", group: "Libraries" },
  { value: "vue", label: "Vue", group: "Libraries" },
  { value: "svelte", label: "Svelte", group: "Libraries" },
  { value: "next", label: "Next.js", group: "Frameworks" },
  { value: "nuxt", label: "Nuxt", group: "Frameworks" },
  { value: "remix", label: "Remix", group: "Frameworks" },
  { value: "vite", label: "Vite", group: "Tooling" },
  { value: "turbopack", label: "Turbopack", group: "Tooling" },
]

export default function MultiSelectGrouped01() {
  const [value, setValue] = React.useState<string[]>(["react", "next"])

  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="stack">Tech stack</Label>
      <MultiSelect
        id="stack"
        options={options}
        value={value}
        onChange={setValue}
        placeholder="Select your stack…"
      />
    </div>
  )
}
```

---

### Creatable tags

Set `creatable` and users can type a new value and press Enter to add it — the classic tags input.

**Install:**

```bash
npx shadcn@latest add @designrevision/multi-select-creatable-01
```

**Dependencies:** @designrevision/multi-select, label

```tsx
// components/ui/multi-select-creatable-01.tsx
"use client"

import * as React from "react"

import { Label } from "@/components/ui/label"
import { MultiSelect } from "@/components/ui/multi-select"

const suggested = [
  { value: "design", label: "Design" },
  { value: "engineering", label: "Engineering" },
  { value: "marketing", label: "Marketing" },
  { value: "sales", label: "Sales" },
]

export default function MultiSelectCreatable01() {
  const [value, setValue] = React.useState<string[]>(["design"])

  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="tags">Tags</Label>
      <MultiSelect
        id="tags"
        options={suggested}
        value={value}
        onChange={setValue}
        creatable
        placeholder="Add tags…"
      />
      <p className="text-sm text-muted-foreground">
        Type a new tag and press Enter to create it.
      </p>
    </div>
  )
}
```

---

### Max items

Cap the selection with `maxSelected`; once the limit is hit, the remaining options disable.

**Install:**

```bash
npx shadcn@latest add @designrevision/multi-select-max-01
```

**Dependencies:** @designrevision/multi-select, label

```tsx
// components/ui/multi-select-max-01.tsx
"use client"

import * as React from "react"

import { Label } from "@/components/ui/label"
import { MultiSelect } from "@/components/ui/multi-select"

const interests = [
  { value: "ai", label: "AI & ML" },
  { value: "web", label: "Web Development" },
  { value: "mobile", label: "Mobile" },
  { value: "devops", label: "DevOps" },
  { value: "design", label: "Design" },
  { value: "data", label: "Data" },
]

export default function MultiSelectMax01() {
  const maxSelected = 3
  const [value, setValue] = React.useState<string[]>(["ai", "web"])

  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="interests">Interests</Label>
      <MultiSelect
        id="interests"
        options={interests}
        value={value}
        onChange={setValue}
        maxSelected={maxSelected}
        placeholder="Pick up to 3…"
      />
      <p className="text-sm text-muted-foreground tabular-nums">
        {value.length}/{maxSelected} selected
      </p>
    </div>
  )
}
```

---

### Async search

Pass `onSearch` to fetch options per debounced query, with a loading state — for directories and API-backed lists.

**Install:**

```bash
npx shadcn@latest add @designrevision/multi-select-async-01
```

**Dependencies:** @designrevision/multi-select, label

```tsx
// components/ui/multi-select-async-01.tsx
"use client"

import * as React from "react"

import { Label } from "@/components/ui/label"
import { MultiSelect, type MultiSelectOption } from "@/components/ui/multi-select"

const directory: MultiSelectOption[] = [
  { value: "ada", label: "Ada Lovelace" },
  { value: "alan", label: "Alan Turing" },
  { value: "grace", label: "Grace Hopper" },
  { value: "katherine", label: "Katherine Johnson" },
  { value: "linus", label: "Linus Torvalds" },
  { value: "margaret", label: "Margaret Hamilton" },
  { value: "tim", label: "Tim Berners-Lee" },
  { value: "barbara", label: "Barbara Liskov" },
]

// Simulates an API call.
function searchPeople(query: string): Promise<MultiSelectOption[]> {
  return new Promise((resolve) => {
    setTimeout(() => {
      const q = query.toLowerCase()
      resolve(directory.filter((person) => person.label.toLowerCase().includes(q)))
    }, 600)
  })
}

export default function MultiSelectAsync01() {
  const [value, setValue] = React.useState<string[]>([])

  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="people">Assignees</Label>
      <MultiSelect
        id="people"
        options={[]}
        value={value}
        onChange={setValue}
        onSearch={searchPeople}
        placeholder="Search people…"
        loadingText="Searching…"
      />
    </div>
  )
}
```

---

### React Hook Form

A required skills field validated with `react-hook-form` and a `zod` array schema (`min(1)`), with an `aria-invalid` error.

**Install:**

```bash
npx shadcn@latest add @designrevision/multi-select-form-01
```

**Dependencies:** react-hook-form, zod, @hookform/resolvers, @designrevision/multi-select, label, button

```tsx
// components/ui/multi-select-form-01.tsx
"use client"

import * as React from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"

import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { MultiSelect } from "@/components/ui/multi-select"

const schema = z.object({
  skills: z.array(z.string()).min(1, "Select at least one skill."),
})

type FormValues = z.infer<typeof schema>

const skills = [
  { value: "react", label: "React" },
  { value: "typescript", label: "TypeScript" },
  { value: "node", label: "Node.js" },
  { value: "css", label: "CSS" },
  { value: "graphql", label: "GraphQL" },
]

export default function MultiSelectForm01() {
  const [submitted, setSubmitted] = React.useState(false)
  const {
    handleSubmit,
    setValue,
    watch,
    formState: { errors },
  } = useForm<FormValues>({
    resolver: zodResolver(schema),
    defaultValues: { skills: [] },
  })

  const selected = watch("skills")

  return (
    <form
      onSubmit={handleSubmit(() => setSubmitted(true))}
      className="grid w-full max-w-sm gap-4"
    >
      <div className="grid gap-2">
        <Label htmlFor="skills">Skills</Label>
        <MultiSelect
          id="skills"
          options={skills}
          value={selected}
          onChange={(value) =>
            setValue("skills", value, { shouldValidate: true })
          }
          placeholder="Select your skills…"
          aria-invalid={!!errors.skills}
          aria-describedby={errors.skills ? "skills-error" : undefined}
        />
        {errors.skills ? (
          <p id="skills-error" className="text-sm text-destructive">
            {errors.skills.message}
          </p>
        ) : null}
      </div>
      <Button type="submit" className="w-fit">
        {submitted ? "Submitted!" : "Continue"}
      </Button>
    </form>
  )
}
```

---

### With avatars

Rich options — each carries an `icon` (an avatar) rendered before the label in the list.

**Install:**

```bash
npx shadcn@latest add @designrevision/multi-select-rich-01
```

**Dependencies:** @designrevision/multi-select, label

```tsx
// components/ui/multi-select-rich-01.tsx
"use client"

import * as React from "react"

import { Label } from "@/components/ui/label"
import { MultiSelect } from "@/components/ui/multi-select"

function Avatar({ initials, className }: { initials: string; className: string }) {
  return (
    <span
      className={`flex size-5 shrink-0 items-center justify-center rounded-full text-[10px] font-medium text-white ${className}`}
    >
      {initials}
    </span>
  )
}

const members = [
  { value: "alice", label: "Alice Johnson", icon: <Avatar initials="AJ" className="bg-rose-500" /> },
  { value: "ben", label: "Ben Carter", icon: <Avatar initials="BC" className="bg-blue-500" /> },
  { value: "chloe", label: "Chloe Diaz", icon: <Avatar initials="CD" className="bg-emerald-500" /> },
  { value: "dan", label: "Dan Evans", icon: <Avatar initials="DE" className="bg-amber-500" /> },
  { value: "erin", label: "Erin Frost", icon: <Avatar initials="EF" className="bg-violet-500" /> },
]

export default function MultiSelectRich01() {
  const [value, setValue] = React.useState<string[]>(["alice", "chloe"])

  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="reviewers">Reviewers</Label>
      <MultiSelect
        id="reviewers"
        options={members}
        value={value}
        onChange={setValue}
        placeholder="Add reviewers…"
      />
    </div>
  )
}
```

---

### States

A `fixed` option that cannot be removed, a `disabled` option that cannot be selected, and a fully disabled field.

**Install:**

```bash
npx shadcn@latest add @designrevision/multi-select-disabled-01
```

**Dependencies:** @designrevision/multi-select, label

```tsx
// components/ui/multi-select-disabled-01.tsx
"use client"

import * as React from "react"

import { Label } from "@/components/ui/label"
import { MultiSelect } from "@/components/ui/multi-select"

const permissions = [
  { value: "read", label: "Read", fixed: true },
  { value: "write", label: "Write" },
  { value: "comment", label: "Comment" },
  { value: "delete", label: "Delete", disabled: true },
]

export default function MultiSelectDisabled01() {
  const [value, setValue] = React.useState<string[]>(["read", "write"])

  return (
    <div className="grid w-full max-w-sm gap-6">
      <div className="grid gap-2">
        <Label htmlFor="permissions">Permissions</Label>
        <MultiSelect
          id="permissions"
          options={permissions}
          value={value}
          onChange={setValue}
        />
        <p className="text-sm text-muted-foreground">
          “Read” is fixed; “Delete” is disabled.
        </p>
      </div>
      <div className="grid gap-2">
        <Label htmlFor="permissions-disabled" className="text-muted-foreground">
          Disabled
        </Label>
        <MultiSelect
          id="permissions-disabled"
          options={permissions}
          value={["read", "write"]}
          onChange={() => {}}
          disabled
        />
      </div>
    </div>
  )
}
```

---

# Shadcn Navbar (Navigation Menu)

> Free shadcn/ui navbar built on the Navigation Menu (Radix). Dropdown menus, a simple link bar, a feature dropdown, a mega menu, active links, and a complete responsive navbar with a mobile hamburger Sheet.

Source: https://designrevision.com/components/navigation-menu

The **Shadcn Navbar** is built on the **Navigation Menu** — a Radix-based component for site navigation with links and animated dropdowns. Compose it into a flat link bar, a feature dropdown, a mega menu, or a **complete responsive navbar** with a mobile hamburger. The examples below cover all of those.

## Anatomy

```tsx
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>{/* dropdown grid */}</NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
        Docs
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>
```

A `NavigationMenuItem` is either a **trigger + content** (a dropdown) or a plain **link**. Hover or focus opens the dropdowns, which animate inside a shared viewport.

## Building a navbar

A real navbar is a header row with three parts — **logo**, **nav**, **actions**:

```tsx
<header className="flex h-14 items-center justify-between border-b px-4">
  <Logo />
  <NavigationMenu className="hidden md:flex">{/* links */}</NavigationMenu>
  <Button size="sm">Sign up</Button>
</header>
```

The Responsive navbar example is the complete version.

## Responsive: the mobile menu

The Navigation Menu is hover-driven, so it's a desktop pattern. On small screens, **hide it** and show a **hamburger** that opens a **[Sheet](/components/sheet)** with the links stacked:

```tsx
<NavigationMenu className="hidden md:flex">…</NavigationMenu>

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline" size="icon" className="md:hidden"><Menu /></Button>
  </SheetTrigger>
  <SheetContent side="right">{/* stacked links */}</SheetContent>
</Sheet>
```

## Dropdowns & mega menus

- **Feature dropdown** — a grid of links with icons, titles, and descriptions (the Feature dropdown example).
- **Mega menu** — a wide `NavigationMenuContent` with a multi-column grid of grouped sections (the Mega menu example).

## Active link

Pass `active` to the link for the current route — it sets `data-active="true"` and the styles highlight it. Derive it from your router:

```tsx
<NavigationMenuLink active={pathname === href} href={href}>…</NavigationMenuLink>
```

## Navigation Menu vs Dropdown Menu vs Menubar

- **Navigation Menu** (this) — site navigation, a navbar with hover dropdowns of links.
- **[Dropdown Menu](/components/dropdown-menu)** — a click-triggered menu of *actions* (a row's "…" menu).
- **Menubar** — an application menu bar (File, Edit, View).

## Accessibility

Radix manages roles, keyboard navigation (arrow keys move between items, Escape closes), and focus. Dropdowns open on hover *and* focus so they're keyboard-reachable, and the active link carries `data-active` for styling. Provide a visible label on the mobile hamburger (an `sr-only` "Open menu" works).

## Installation

### navigation-menu

**Install:**

```bash
npx shadcn@latest add @designrevision/navigation-menu
```

**Dependencies:** @radix-ui/react-navigation-menu, class-variance-authority, utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| viewport | boolean | true | Render the shared viewport that animates dropdown size/position. Set false to position each NavigationMenuContent under its own item. |

**Usage & accessibility:** A Radix navbar with dropdown menus — the base for a site nav. Compose <NavigationMenu> → <NavigationMenuList> → <NavigationMenuItem>, each with a <NavigationMenuTrigger> + <NavigationMenuContent> (the dropdown) or a plain <NavigationMenuLink className={navigationMenuTriggerStyle()}>. Hover/focus opens menus, with a shared animated viewport (viewport=false to drop it per-item). Pair with Sheet for a mobile hamburger menu.

```tsx
// components/ui/navigation-menu.tsx
import * as React from "react"
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
import { cva } from "class-variance-authority"
import { ChevronDownIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function NavigationMenu({
  className,
  children,
  viewport = true,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
  viewport?: boolean
}) {
  return (
    <NavigationMenuPrimitive.Root
      data-slot="navigation-menu"
      data-viewport={viewport}
      className={cn(
        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
        className
      )}
      {...props}
    >
      {children}
      {viewport && <NavigationMenuViewport />}
    </NavigationMenuPrimitive.Root>
  )
}

function NavigationMenuList({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
  return (
    <NavigationMenuPrimitive.List
      data-slot="navigation-menu-list"
      className={cn(
        "group flex flex-1 list-none items-center justify-center gap-1",
        className
      )}
      {...props}
    />
  )
}

function NavigationMenuItem({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
  return (
    <NavigationMenuPrimitive.Item
      data-slot="navigation-menu-item"
      className={cn("relative", className)}
      {...props}
    />
  )
}

const navigationMenuTriggerStyle = cva(
  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
)

function NavigationMenuTrigger({
  className,
  children,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
  return (
    <NavigationMenuPrimitive.Trigger
      data-slot="navigation-menu-trigger"
      className={cn(navigationMenuTriggerStyle(), "group", className)}
      {...props}
    >
      {children}{" "}
      <ChevronDownIcon
        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
        aria-hidden="true"
      />
    </NavigationMenuPrimitive.Trigger>
  )
}

function NavigationMenuContent({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
  return (
    <NavigationMenuPrimitive.Content
      data-slot="navigation-menu-content"
      className={cn(
        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
        className
      )}
      {...props}
    />
  )
}

function NavigationMenuViewport({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
  return (
    <div
      className={cn(
        "absolute top-full left-0 isolate z-50 flex justify-center"
      )}
    >
      <NavigationMenuPrimitive.Viewport
        data-slot="navigation-menu-viewport"
        className={cn(
          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
          className
        )}
        {...props}
      />
    </div>
  )
}

function NavigationMenuLink({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
  return (
    <NavigationMenuPrimitive.Link
      data-slot="navigation-menu-link"
      className={cn(
        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    />
  )
}

function NavigationMenuIndicator({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
  return (
    <NavigationMenuPrimitive.Indicator
      data-slot="navigation-menu-indicator"
      className={cn(
        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
        className
      )}
      {...props}
    >
      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
    </NavigationMenuPrimitive.Indicator>
  )
}

export {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuContent,
  NavigationMenuTrigger,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
  navigationMenuTriggerStyle,
}
```

## Examples

### Dropdown menus

The canonical navigation menu — triggers opening rich dropdown grids, plus a plain link.

**Install:**

```bash
npx shadcn@latest add @designrevision/navigation-menu-demo-01
```

**Dependencies:** navigation-menu

```tsx
// components/ui/navigation-menu-demo-01.tsx
import * as React from "react"

import { cn } from "@/lib/utils"
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"

const components = [
  {
    title: "Alert Dialog",
    href: "#",
    description:
      "A modal dialog that interrupts the user with important content.",
  },
  {
    title: "Hover Card",
    href: "#",
    description: "For sighted users to preview content behind a link.",
  },
  {
    title: "Progress",
    href: "#",
    description: "Displays an indicator showing the completion of a task.",
  },
  {
    title: "Tabs",
    href: "#",
    description: "Layered sections of content shown one panel at a time.",
  },
]

function ListItem({
  title,
  children,
  href,
}: {
  title: string
  children: React.ReactNode
  href: string
}) {
  return (
    <li>
      <NavigationMenuLink asChild>
        <a
          href={href}
          className="hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground block space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors select-none"
        >
          <div className="text-sm leading-none font-medium">{title}</div>
          <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
            {children}
          </p>
        </a>
      </NavigationMenuLink>
    </li>
  )
}

export default function NavigationMenuDemo01() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid gap-2 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
              <li className="row-span-3">
                <NavigationMenuLink asChild>
                  <a
                    href="#"
                    className="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-6 no-underline outline-none select-none focus:shadow-md"
                  >
                    <div className="mt-4 mb-2 text-lg font-medium">
                      shadcn/ui
                    </div>
                    <p className="text-muted-foreground text-sm leading-tight">
                      Beautifully designed components built with Tailwind CSS.
                    </p>
                  </a>
                </NavigationMenuLink>
              </li>
              <ListItem href="#" title="Introduction">
                Re-usable components built using Radix UI and Tailwind CSS.
              </ListItem>
              <ListItem href="#" title="Installation">
                How to install dependencies and structure your app.
              </ListItem>
              <ListItem href="#" title="Typography">
                Styles for headings, paragraphs, lists, and more.
              </ListItem>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[400px] gap-2 p-4 md:w-[500px] md:grid-cols-2">
              {components.map((component) => (
                <ListItem
                  key={component.title}
                  title={component.title}
                  href={component.href}
                >
                  {component.description}
                </ListItem>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink asChild className={cn(navigationMenuTriggerStyle())}>
            <a href="#">Docs</a>
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}
```

---

### Simple link bar

A flat nav bar of links with no dropdowns — each styled with `navigationMenuTriggerStyle()`.

**Install:**

```bash
npx shadcn@latest add @designrevision/navigation-menu-simple-01
```

**Dependencies:** navigation-menu

```tsx
// components/ui/navigation-menu-simple-01.tsx
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"

const links = [
  { label: "Home", href: "#" },
  { label: "Features", href: "#" },
  { label: "Pricing", href: "#" },
  { label: "About", href: "#" },
]

export default function NavigationMenuSimple01() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        {links.map((link) => (
          <NavigationMenuItem key={link.label}>
            <NavigationMenuLink
              asChild
              className={navigationMenuTriggerStyle()}
            >
              <a href={link.href}>{link.label}</a>
            </NavigationMenuLink>
          </NavigationMenuItem>
        ))}
      </NavigationMenuList>
    </NavigationMenu>
  )
}
```

---

### Feature dropdown

A product dropdown with icons, titles, and descriptions — the feature-grid pattern.

**Install:**

```bash
npx shadcn@latest add @designrevision/navigation-menu-icons-01
```

**Dependencies:** lucide-react, navigation-menu

```tsx
// components/ui/navigation-menu-icons-01.tsx
import { BookOpen, LayoutGrid, LifeBuoy, Puzzle } from "lucide-react"

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"

const features = [
  { icon: LayoutGrid, title: "Dashboard", desc: "Overview of your workspace." },
  { icon: Puzzle, title: "Integrations", desc: "Connect your favorite tools." },
  { icon: BookOpen, title: "Documentation", desc: "Guides and API reference." },
  { icon: LifeBuoy, title: "Support", desc: "Get help from our team." },
]

export default function NavigationMenuIcons01() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Product</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[420px] gap-1 p-2 md:grid-cols-2">
              {features.map((feature) => (
                <li key={feature.title}>
                  <NavigationMenuLink asChild>
                    <a
                      href="#"
                      className="hover:bg-accent flex flex-row items-start gap-3 rounded-md p-3"
                    >
                      <feature.icon className="text-muted-foreground size-5" />
                      <div>
                        <div className="text-sm leading-none font-medium">
                          {feature.title}
                        </div>
                        <p className="text-muted-foreground mt-1 text-sm leading-snug">
                          {feature.desc}
                        </p>
                      </div>
                    </a>
                  </NavigationMenuLink>
                </li>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}
```

---

### Responsive navbar

A complete site navbar — desktop NavigationMenu plus a hamburger that opens a Sheet on mobile.

**Install:**

```bash
npx shadcn@latest add @designrevision/navigation-menu-navbar-01
```

**Dependencies:** lucide-react, navigation-menu, button, sheet

```tsx
// components/ui/navigation-menu-navbar-01.tsx
import { Menu } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"
import {
  Sheet,
  SheetContent,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

const links = [
  { label: "Home", href: "#" },
  { label: "Features", href: "#" },
  { label: "Pricing", href: "#" },
  { label: "About", href: "#" },
]

export default function NavigationMenuNavbar01() {
  return (
    <div className="w-full max-w-3xl">
      <header className="flex h-14 items-center justify-between rounded-lg border px-4">
        <a href="#" className="flex items-center gap-2 font-semibold">
          <div className="bg-primary text-primary-foreground flex size-7 items-center justify-center rounded-md text-sm">
            A
          </div>
          Acme
        </a>

        <NavigationMenu className="hidden md:flex">
          <NavigationMenuList>
            {links.map((link) => (
              <NavigationMenuItem key={link.label}>
                <NavigationMenuLink
                  asChild
                  className={navigationMenuTriggerStyle()}
                >
                  <a href={link.href}>{link.label}</a>
                </NavigationMenuLink>
              </NavigationMenuItem>
            ))}
          </NavigationMenuList>
        </NavigationMenu>

        <div className="flex items-center gap-2">
          <Button size="sm" className="hidden md:inline-flex">
            Sign up
          </Button>
          <Sheet>
            <SheetTrigger asChild>
              <Button variant="outline" size="icon" className="md:hidden">
                <Menu />
                <span className="sr-only">Open menu</span>
              </Button>
            </SheetTrigger>
            <SheetContent side="right" className="w-64">
              <SheetTitle className="px-4 pt-4">Acme</SheetTitle>
              <nav className="mt-4 flex flex-col gap-1 px-2">
                {links.map((link) => (
                  <a
                    key={link.label}
                    href={link.href}
                    className="hover:bg-accent rounded-md px-3 py-2 text-sm font-medium"
                  >
                    {link.label}
                  </a>
                ))}
                <Button className="mt-2">Sign up</Button>
              </nav>
            </SheetContent>
          </Sheet>
        </div>
      </header>
    </div>
  )
}
```

---

### Mega menu

A wide, multi-column mega-menu dropdown — grouped link sections under one trigger.

**Install:**

```bash
npx shadcn@latest add @designrevision/navigation-menu-mega-01
```

**Dependencies:** navigation-menu

```tsx
// components/ui/navigation-menu-mega-01.tsx
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"

const sections = [
  {
    heading: "Marketing",
    items: ["Landing pages", "SEO tools", "Email campaigns", "Analytics"],
  },
  {
    heading: "Sales",
    items: ["CRM", "Pipeline", "Forecasting", "Quotes"],
  },
  {
    heading: "Support",
    items: ["Help desk", "Live chat", "Knowledge base", "Community"],
  },
]

export default function NavigationMenuMega01() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Solutions</NavigationMenuTrigger>
          <NavigationMenuContent>
            <div className="grid w-[600px] grid-cols-3 gap-4 p-4">
              {sections.map((section) => (
                <div key={section.heading}>
                  <p className="text-muted-foreground mb-2 px-2 text-xs font-medium uppercase">
                    {section.heading}
                  </p>
                  <ul className="space-y-1">
                    {section.items.map((item) => (
                      <li key={item}>
                        <NavigationMenuLink asChild>
                          <a
                            href="#"
                            className="hover:bg-accent block rounded-md px-2 py-1.5 text-sm"
                          >
                            {item}
                          </a>
                        </NavigationMenuLink>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}
```

---

### Active link

Highlighting the current route — the `active` prop sets `data-active` on the matching link.

**Install:**

```bash
npx shadcn@latest add @designrevision/navigation-menu-active-01
```

**Dependencies:** navigation-menu

```tsx
// components/ui/navigation-menu-active-01.tsx
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"

const links = [
  { label: "Dashboard", href: "#" },
  { label: "Projects", href: "#" },
  { label: "Team", href: "#" },
  { label: "Settings", href: "#" },
]

// In a real app this comes from the router (usePathname).
const activeLabel = "Dashboard"

export default function NavigationMenuActive01() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        {links.map((link) => (
          <NavigationMenuItem key={link.label}>
            <NavigationMenuLink
              asChild
              active={link.label === activeLabel}
              className={navigationMenuTriggerStyle()}
            >
              <a href={link.href}>{link.label}</a>
            </NavigationMenuLink>
          </NavigationMenuItem>
        ))}
      </NavigationMenuList>
    </NavigationMenu>
  )
}
```

---

# Shadcn Pagination

> Free shadcn/ui pagination for React — previous/next, numbered links, and an ellipsis. With the page-range truncation logic, a controlled pager, a compact variant, a data-table footer, and SEO-friendly links.

Source: https://designrevision.com/components/pagination

The **Shadcn Pagination** is a set of composable controls for paging through results — previous/next, numbered links, and an ellipsis. It is **presentational**: it renders the buttons (styled with `buttonVariants`, no dependency), and **you** supply the page logic. The examples below include that logic — range truncation, a controlled pager, a table footer, and SEO-friendly links.

## Anatomy

```tsx
<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
    <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink href="#" isActive>2</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationNext href="#" /></PaginationItem>
  </PaginationContent>
</Pagination>
```

`PaginationLink` takes `isActive` (which sets `aria-current="page"`), and `PaginationPrevious` / `PaginationNext` / `PaginationEllipsis` are styled helpers.

## Truncating with an ellipsis

For large totals you don't render every page — show the first, the last, a window around the current page, and ellipses for the gaps:

```tsx
function getPages(current, total) {
  const pages = [1]
  if (current > 3) pages.push("ellipsis")
  for (let p = Math.max(2, current - 1); p <= Math.min(total - 1, current + 1); p++) pages.push(p)
  if (current < total - 2) pages.push("ellipsis")
  if (total > 1) pages.push(total)
  return pages
}
```

The Truncated example renders exactly this.

## Controlled (client-side)

Track the page in state and update on click, disabling the ends:

```tsx
const [page, setPage] = React.useState(1)

<PaginationPrevious
  href="#"
  onClick={(e) => { e.preventDefault(); setPage((p) => Math.max(1, p - 1)) }}
  className={cn(page === 1 && "pointer-events-none opacity-50")}
/>
```

## Server pagination & SEO

For crawlable pages, use **real links** with a page query so each page is its own URL and the server renders the right slice:

```tsx
<PaginationLink href={`?page=${n}`} isActive={n === current}>{n}</PaginationLink>
```

`PaginationLink` already sets `aria-current="page"` on the active item. The SEO links example uses this.

## In a data table

Tables usually want a compact bar — a **rows-per-page** Select with first / previous / next / last icon buttons and a "Page X of Y" label. The Table footer example is that bar, ready to wire to your table state (or TanStack Table's pagination API).

## Accessibility

`Pagination` is a `<nav aria-label="pagination">`, the active page carries `aria-current="page"`, and the ellipsis is hidden from assistive tech (`aria-hidden`) with screen-reader text. Use real `href`s where you can so pages work without JavaScript.

## Installation

### pagination

**Install:**

```bash
npx shadcn@latest add @designrevision/pagination
```

**Dependencies:** utils, button

**Usage & accessibility:** Page navigation — a <Pagination> nav wrapping <PaginationContent> (a list) of <PaginationItem>s holding <PaginationLink isActive>, plus <PaginationPrevious>, <PaginationNext>, and <PaginationEllipsis>. Links are styled with buttonVariants (no dependency). It is presentational: you compute which page numbers to show and wire isActive / href (or onClick) yourself — the examples include the range + ellipsis logic.

```tsx
// components/ui/pagination.tsx
import * as React from "react"
import {
  ChevronLeftIcon,
  ChevronRightIcon,
  MoreHorizontalIcon,
} from "lucide-react"

import { cn } from "@/lib/utils"
import { Button, buttonVariants } from "@/components/ui/button"

function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
  return (
    <nav
      role="navigation"
      aria-label="pagination"
      data-slot="pagination"
      className={cn("mx-auto flex w-full justify-center", className)}
      {...props}
    />
  )
}

function PaginationContent({
  className,
  ...props
}: React.ComponentProps<"ul">) {
  return (
    <ul
      data-slot="pagination-content"
      className={cn("flex flex-row items-center gap-1", className)}
      {...props}
    />
  )
}

function PaginationItem({ ...props }: React.ComponentProps<"li">) {
  return <li data-slot="pagination-item" {...props} />
}

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<React.ComponentProps<typeof Button>, "size"> &
  React.ComponentProps<"a">

function PaginationLink({
  className,
  isActive,
  size = "icon",
  ...props
}: PaginationLinkProps) {
  return (
    <a
      aria-current={isActive ? "page" : undefined}
      data-slot="pagination-link"
      data-active={isActive}
      className={cn(
        buttonVariants({
          variant: isActive ? "outline" : "ghost",
          size,
        }),
        className
      )}
      {...props}
    />
  )
}

function PaginationPrevious({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) {
  return (
    <PaginationLink
      aria-label="Go to previous page"
      size="default"
      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
      {...props}
    >
      <ChevronLeftIcon />
      <span className="hidden sm:block">Previous</span>
    </PaginationLink>
  )
}

function PaginationNext({
  className,
  ...props
}: React.ComponentProps<typeof PaginationLink>) {
  return (
    <PaginationLink
      aria-label="Go to next page"
      size="default"
      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
      {...props}
    >
      <span className="hidden sm:block">Next</span>
      <ChevronRightIcon />
    </PaginationLink>
  )
}

function PaginationEllipsis({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      aria-hidden
      data-slot="pagination-ellipsis"
      className={cn("flex size-9 items-center justify-center", className)}
      {...props}
    >
      <MoreHorizontalIcon className="size-4" />
      <span className="sr-only">More pages</span>
    </span>
  )
}

export {
  Pagination,
  PaginationContent,
  PaginationLink,
  PaginationItem,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
}
```

## Examples

### Basic

The canonical pagination — previous/next with numbered links and an ellipsis.

**Install:**

```bash
npx shadcn@latest add @designrevision/pagination-demo-01
```

**Dependencies:** pagination

```tsx
// components/ui/pagination-demo-01.tsx
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"

export default function PaginationDemo01() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" isActive>
            2
          </PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}
```

---

### Truncated with ellipsis

Smart range truncation for many pages — a `getPages` helper inserts leading/trailing ellipses.

**Install:**

```bash
npx shadcn@latest add @designrevision/pagination-ellipsis-01
```

**Dependencies:** pagination

```tsx
// components/ui/pagination-ellipsis-01.tsx
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"

// Compute the page list with leading/trailing ellipses for a large total.
function getPages(current: number, total: number) {
  const pages: (number | "ellipsis")[] = [1]
  if (current > 3) pages.push("ellipsis")
  for (
    let p = Math.max(2, current - 1);
    p <= Math.min(total - 1, current + 1);
    p++
  ) {
    pages.push(p)
  }
  if (current < total - 2) pages.push("ellipsis")
  if (total > 1) pages.push(total)
  return pages
}

export default function PaginationEllipsis01() {
  const current = 6
  const total = 20
  const pages = getPages(current, total)

  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        {pages.map((page, i) => (
          <PaginationItem key={i}>
            {page === "ellipsis" ? (
              <PaginationEllipsis />
            ) : (
              <PaginationLink href="#" isActive={page === current}>
                {page}
              </PaginationLink>
            )}
          </PaginationItem>
        ))}
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}
```

---

### Controlled

A working pager driven by `useState`, with prev/next disabled at the bounds.

**Install:**

```bash
npx shadcn@latest add @designrevision/pagination-controlled-01
```

**Dependencies:** pagination

```tsx
// components/ui/pagination-controlled-01.tsx
"use client"

import * as React from "react"

import { cn } from "@/lib/utils"
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"

export default function PaginationControlled01() {
  const total = 5
  const [page, setPage] = React.useState(1)

  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious
            href="#"
            onClick={(e) => {
              e.preventDefault()
              setPage((p) => Math.max(1, p - 1))
            }}
            className={cn(page === 1 && "pointer-events-none opacity-50")}
          />
        </PaginationItem>
        {Array.from({ length: total }).map((_, i) => (
          <PaginationItem key={i}>
            <PaginationLink
              href="#"
              isActive={page === i + 1}
              onClick={(e) => {
                e.preventDefault()
                setPage(i + 1)
              }}
            >
              {i + 1}
            </PaginationLink>
          </PaginationItem>
        ))}
        <PaginationItem>
          <PaginationNext
            href="#"
            onClick={(e) => {
              e.preventDefault()
              setPage((p) => Math.min(total, p + 1))
            }}
            className={cn(page === total && "pointer-events-none opacity-50")}
          />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}
```

---

### Compact

A minimal pager — just Previous / Page X of Y / Next.

**Install:**

```bash
npx shadcn@latest add @designrevision/pagination-compact-01
```

**Dependencies:** pagination

```tsx
// components/ui/pagination-compact-01.tsx
"use client"

import * as React from "react"

import { cn } from "@/lib/utils"
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"

export default function PaginationCompact01() {
  const total = 10
  const [page, setPage] = React.useState(1)

  return (
    <Pagination>
      <PaginationContent className="gap-3">
        <PaginationItem>
          <PaginationPrevious
            href="#"
            onClick={(e) => {
              e.preventDefault()
              setPage((p) => Math.max(1, p - 1))
            }}
            className={cn(page === 1 && "pointer-events-none opacity-50")}
          />
        </PaginationItem>
        <PaginationItem>
          <span className="text-muted-foreground px-2 text-sm">
            Page {page} of {total}
          </span>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext
            href="#"
            onClick={(e) => {
              e.preventDefault()
              setPage((p) => Math.min(total, p + 1))
            }}
            className={cn(page === total && "pointer-events-none opacity-50")}
          />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}
```

---

### Table footer

The data-table bar — a rows-per-page Select with first/prev/next/last icon buttons.

**Install:**

```bash
npx shadcn@latest add @designrevision/pagination-table-01
```

**Dependencies:** lucide-react, button, @designrevision/select

```tsx
// components/ui/pagination-table-01.tsx
"use client"

import * as React from "react"
import {
  ChevronLeft,
  ChevronRight,
  ChevronsLeft,
  ChevronsRight,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

export default function PaginationTable01() {
  const totalRows = 97
  const [pageSize, setPageSize] = React.useState("10")
  const [page, setPage] = React.useState(1)
  const totalPages = Math.ceil(totalRows / Number(pageSize))

  return (
    <div className="flex w-full max-w-2xl flex-col items-center gap-4 sm:flex-row sm:justify-between">
      <div className="flex items-center gap-2 text-sm">
        <span className="text-muted-foreground">Rows per page</span>
        <Select
          value={pageSize}
          onValueChange={(v) => {
            setPageSize(v)
            setPage(1)
          }}
        >
          <SelectTrigger className="h-8 w-[70px]">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {["10", "20", "50"].map((s) => (
              <SelectItem key={s} value={s}>
                {s}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
      <div className="flex items-center gap-4 text-sm">
        <span className="text-muted-foreground">
          Page {page} of {totalPages}
        </span>
        <div className="flex items-center gap-1">
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            disabled={page === 1}
            onClick={() => setPage(1)}
          >
            <ChevronsLeft />
            <span className="sr-only">First page</span>
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            disabled={page === 1}
            onClick={() => setPage((p) => p - 1)}
          >
            <ChevronLeft />
            <span className="sr-only">Previous page</span>
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            disabled={page === totalPages}
            onClick={() => setPage((p) => p + 1)}
          >
            <ChevronRight />
            <span className="sr-only">Next page</span>
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            disabled={page === totalPages}
            onClick={() => setPage(totalPages)}
          >
            <ChevronsRight />
            <span className="sr-only">Last page</span>
          </Button>
        </div>
      </div>
    </div>
  )
}
```

---

### SEO links

Real anchor links (`?page=N`) for server-rendered, crawlable pagination.

**Install:**

```bash
npx shadcn@latest add @designrevision/pagination-links-01
```

**Dependencies:** pagination

```tsx
// components/ui/pagination-links-01.tsx
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"

// Real anchor links (?page=N) for server-rendered, SEO-friendly pagination.
export default function PaginationLinks01() {
  const current = 2
  const total = 5

  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href={`?page=${current - 1}`} />
        </PaginationItem>
        {Array.from({ length: total }).map((_, i) => (
          <PaginationItem key={i}>
            <PaginationLink href={`?page=${i + 1}`} isActive={current === i + 1}>
              {i + 1}
            </PaginationLink>
          </PaginationItem>
        ))}
        <PaginationItem>
          <PaginationNext href={`?page=${current + 1}`} />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}
```

---

### With results count

A search-results footer — a "Showing X–Y of Z" summary beside a pager.

**Install:**

```bash
npx shadcn@latest add @designrevision/pagination-results-01
```

**Dependencies:** pagination

```tsx
// components/ui/pagination-results-01.tsx
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"

export default function PaginationResults01() {
  const current = 2
  const pageSize = 10
  const totalItems = 97
  const start = (current - 1) * pageSize + 1
  const end = Math.min(current * pageSize, totalItems)

  return (
    <div className="flex w-full max-w-2xl flex-col items-center gap-3 sm:flex-row sm:justify-between">
      <p className="text-muted-foreground text-sm">
        Showing {start}–{end} of {totalItems} results
      </p>
      <Pagination className="mx-0 w-auto justify-end">
        <PaginationContent>
          <PaginationItem>
            <PaginationPrevious href="#" />
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">1</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#" isActive>
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">3</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationEllipsis />
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">10</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationNext href="#" />
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </div>
  )
}
```

---

# Shadcn Pie Chart

> Free shadcn/ui pie and donut chart for React — built on Recharts and themed with CSS variables. Pie, donut, donut-with-center-text, labels, an interactive variant, plus loading, empty, and accessible states.

Source: https://designrevision.com/components/pie-chart

The **Shadcn Pie Chart** (and **donut**) is a <a href="https://recharts.org/" rel="nofollow">Recharts</a> `PieChart` wrapped in the shadcn `ChartContainer` — themed with your `--chart` CSS variables and dark-mode-ready. It's the **part-to-whole** chart: market share, status breakdowns, budget splits. Below: pie, donut, donut-with-center-text, labels, an interactive variant, and the production states.

## The basic pie chart

Colors come from each data row's `fill`, mapped through your config:

```tsx
const chartData = [
  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
  // …
]
const chartConfig = {
  visitors: { label: "Visitors" },
  chrome: { label: "Chrome", color: "var(--chart-1)" },
  // …
} satisfies ChartConfig

<ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[250px]">
  <PieChart>
    <ChartTooltip content={<ChartTooltipContent hideLabel />} />
    <Pie data={chartData} dataKey="visitors" nameKey="browser" />
  </PieChart>
</ChartContainer>
```

## Donut

Add an `innerRadius` to carve out the center:

```tsx
<Pie data={chartData} dataKey="visitors" nameKey="browser" innerRadius={60} />
```

## Donut with a center total

Render a Recharts `<Label>` inside the `<Pie>` and draw SVG text at the center — a big number and a caption:

```tsx
<Pie data={chartData} dataKey="visitors" nameKey="browser" innerRadius={60}>
  <Label content={({ viewBox }) => /* <text> with two <tspan>s */} />
</Pie>
```

## Interactive

The Interactive example tracks the active slice as `activeIndex`, renders it as an enlarged `activeShape` Sector, and drives the selection with a `<Select>` of swatched slices — the center total updates to match.

## Production states

Loading (circular skeleton), empty (dashed circle + icon), and accessible (a data table with per-slice **share %**) variants are included.

See **[Shadcn Charts](/components/chart)** for the theming system and the other chart types.

## Installation

### chart

**Install:**

```bash
npx shadcn@latest add @designrevision/chart
```

**Dependencies:** recharts, utils, card

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| config * | ChartConfig | — | Maps each data key to { label, icon?, color }. Colors become --color-<key> CSS vars. |
| children * | React.ReactElement (a Recharts chart) | — | A single Recharts chart (BarChart, LineChart, …) — ChartContainer wraps it in a ResponsiveContainer. |

`*` required.

**Usage & accessibility:** A Recharts wrapper themed with CSS variables. Pass a `config` (ChartConfig: each data key → { label, icon?, color }) to <ChartContainer>; it injects --color-<key> vars (scoped per light/dark theme) that your Recharts series reference as fill="var(--color-desktop)". Use <ChartTooltip content={<ChartTooltipContent />}> and <ChartLegend content={<ChartLegendContent />}> for themed tooltips/legends. Colors default to the --chart-1..5 tokens, which re-theme automatically in dark mode. The container needs a height — keep aspect-video / min-h-* or ResponsiveContainer measures 0. This is the base primitive; the Bar/Line/Area/Pie/Radar/Radial chart pages compose it.

```tsx
// components/ui/chart.tsx
"use client"

import * as React from "react"
import * as RechartsPrimitive from "recharts"

import { cn } from "@/lib/utils"

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

  if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

  return context
}

function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
}: React.ComponentProps<"div"> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >["children"]
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`

  return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme || config.color
  )

  if (!colorConfig.length) {
    return null
  }

  return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
}
`
          )
          .join("\n"),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = "dot",
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<"div"> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    indicator?: "line" | "dot" | "dashed"
    nameKey?: string
    labelKey?: string
  }) {
  const { config } = useChart()

  const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
      return null
    }

    const [item] = payload
    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
    const itemConfig = getPayloadConfigFromPayload(config, item, key)
    const value =
      !labelKey && typeof label === "string"
        ? config[label as keyof typeof config]?.label || label
        : itemConfig?.label

    if (labelFormatter) {
      return (
        <div className={cn("font-medium", labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      )
    }

    if (!value) {
      return null
    }

    return <div className={cn("font-medium", labelClassName)}>{value}</div>
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ])

  if (!active || !payload?.length) {
    return null
  }

  const nestLabel = payload.length === 1 && indicator !== "dot"

  return (
    <div
      className={cn(
        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
        className
      )}
    >
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-1.5">
        {payload
          .filter((item) => item.type !== "none")
          .map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

            return (
              <div
                key={item.dataKey}
                className={cn(
                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                            {
                              "h-2.5 w-2.5": indicator === "dot",
                              "w-1": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="text-foreground font-mono font-medium tabular-nums">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
      </div>
    </div>
  )
}

const ChartLegend = RechartsPrimitive.Legend

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = "bottom",
  nameKey,
}: React.ComponentProps<"div"> &
  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
    hideIcon?: boolean
    nameKey?: string
  }) {
  const { config } = useChart()

  if (!payload?.length) {
    return null
  }

  return (
    <div
      className={cn(
        "flex items-center justify-center gap-4",
        verticalAlign === "top" ? "pb-3" : "pt-3",
        className
      )}
    >
      {payload
        .filter((item) => item.type !== "none")
        .map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

          return (
            <div
              key={item.value}
              className={cn(
                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
              )}
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
    </div>
  )
}

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

  const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

  let configLabelKey: string = key

  if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

  return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
```

## Examples

### Pie Chart

The canonical pie with per-slice colors from the data.

**Install:**

```bash
npx shadcn@latest add @designrevision/pie-chart-demo-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/pie-chart-demo-01.tsx
"use client"

import { Pie, PieChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
  { browser: "other", visitors: 90, fill: "var(--color-other)" },
]

const chartConfig = {
  visitors: { label: "Visitors" },
  chrome: { label: "Chrome", color: "var(--chart-1)" },
  safari: { label: "Safari", color: "var(--chart-2)" },
  firefox: { label: "Firefox", color: "var(--chart-3)" },
  edge: { label: "Edge", color: "var(--chart-4)" },
  other: { label: "Other", color: "var(--chart-5)" },
} satisfies ChartConfig

export default function PieChartDemo01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-0">
        <CardTitle>Pie Chart</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent className="flex-1 pb-0">
        <ChartContainer
          config={chartConfig}
          className="[&_.recharts-pie-label-text]:fill-foreground mx-auto aspect-square max-h-[250px] pb-0"
        >
          <PieChart>
            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
            <Pie data={chartData} dataKey="visitors" nameKey="browser" />
          </PieChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Donut

A donut chart — an inner radius carves out the center.

**Install:**

```bash
npx shadcn@latest add @designrevision/pie-chart-donut-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/pie-chart-donut-01.tsx
"use client"

import { Pie, PieChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
  { browser: "other", visitors: 90, fill: "var(--color-other)" },
]

const chartConfig = {
  visitors: { label: "Visitors" },
  chrome: { label: "Chrome", color: "var(--chart-1)" },
  safari: { label: "Safari", color: "var(--chart-2)" },
  firefox: { label: "Firefox", color: "var(--chart-3)" },
  edge: { label: "Edge", color: "var(--chart-4)" },
  other: { label: "Other", color: "var(--chart-5)" },
} satisfies ChartConfig

export default function PieChartDonut01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-0">
        <CardTitle>Pie Chart — Donut</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent className="flex-1 pb-0">
        <ChartContainer
          config={chartConfig}
          className="mx-auto aspect-square max-h-[250px]"
        >
          <PieChart>
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel />}
            />
            <Pie
              data={chartData}
              dataKey="visitors"
              nameKey="browser"
              innerRadius={60}
            />
          </PieChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Donut with center text

A donut with a centered Label showing the total — the KPI pattern.

**Install:**

```bash
npx shadcn@latest add @designrevision/pie-chart-donut-text-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/pie-chart-donut-text-01.tsx
"use client"

import * as React from "react"
import { Label, Pie, PieChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
  { browser: "other", visitors: 90, fill: "var(--color-other)" },
]

const chartConfig = {
  visitors: { label: "Visitors" },
  chrome: { label: "Chrome", color: "var(--chart-1)" },
  safari: { label: "Safari", color: "var(--chart-2)" },
  firefox: { label: "Firefox", color: "var(--chart-3)" },
  edge: { label: "Edge", color: "var(--chart-4)" },
  other: { label: "Other", color: "var(--chart-5)" },
} satisfies ChartConfig

export default function PieChartDonutText01() {
  const totalVisitors = React.useMemo(
    () => chartData.reduce((acc, curr) => acc + curr.visitors, 0),
    []
  )

  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-0">
        <CardTitle>Pie Chart — Donut with Text</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent className="flex-1 pb-0">
        <ChartContainer
          config={chartConfig}
          className="mx-auto aspect-square max-h-[250px]"
        >
          <PieChart>
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel />}
            />
            <Pie
              data={chartData}
              dataKey="visitors"
              nameKey="browser"
              innerRadius={60}
              strokeWidth={5}
            >
              <Label
                content={({ viewBox }) => {
                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                    return (
                      <text
                        x={viewBox.cx}
                        y={viewBox.cy}
                        textAnchor="middle"
                        dominantBaseline="middle"
                      >
                        <tspan
                          x={viewBox.cx}
                          y={viewBox.cy}
                          className="fill-foreground text-3xl font-bold"
                        >
                          {totalVisitors.toLocaleString()}
                        </tspan>
                        <tspan
                          x={viewBox.cx}
                          y={(viewBox.cy || 0) + 24}
                          className="fill-muted-foreground"
                        >
                          Visitors
                        </tspan>
                      </text>
                    )
                  }
                }}
              />
            </Pie>
          </PieChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### With labels

A pie with value labels drawn on each slice.

**Install:**

```bash
npx shadcn@latest add @designrevision/pie-chart-label-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/pie-chart-label-01.tsx
"use client"

import { Pie, PieChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
  { browser: "other", visitors: 90, fill: "var(--color-other)" },
]

const chartConfig = {
  visitors: { label: "Visitors" },
  chrome: { label: "Chrome", color: "var(--chart-1)" },
  safari: { label: "Safari", color: "var(--chart-2)" },
  firefox: { label: "Firefox", color: "var(--chart-3)" },
  edge: { label: "Edge", color: "var(--chart-4)" },
  other: { label: "Other", color: "var(--chart-5)" },
} satisfies ChartConfig

export default function PieChartLabel01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-0">
        <CardTitle>Pie Chart — Labels</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent className="flex-1 pb-0">
        <ChartContainer
          config={chartConfig}
          className="[&_.recharts-pie-label-text]:fill-foreground mx-auto aspect-square max-h-[250px] pb-0"
        >
          <PieChart>
            <ChartTooltip
              content={<ChartTooltipContent nameKey="visitors" hideLabel />}
            />
            <Pie data={chartData} dataKey="visitors" nameKey="browser" label />
          </PieChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Interactive

A Select highlights the active sector (enlarged) and updates the center total.

**Install:**

```bash
npx shadcn@latest add @designrevision/pie-chart-interactive-01
```

**Dependencies:** recharts, chart, card, @designrevision/select

```tsx
// components/ui/pie-chart-interactive-01.tsx
"use client"

import * as React from "react"
import { Label, Pie, PieChart, Sector } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const chartData = [
  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
  { browser: "other", visitors: 90, fill: "var(--color-other)" },
]

const chartConfig = {
  visitors: { label: "Visitors" },
  chrome: { label: "Chrome", color: "var(--chart-1)" },
  safari: { label: "Safari", color: "var(--chart-2)" },
  firefox: { label: "Firefox", color: "var(--chart-3)" },
  edge: { label: "Edge", color: "var(--chart-4)" },
  other: { label: "Other", color: "var(--chart-5)" },
} satisfies ChartConfig

export default function PieChartInteractive01() {
  const [activeBrowser, setActiveBrowser] = React.useState(
    chartData[0].browser
  )

  const activeIndex = React.useMemo(
    () => chartData.findIndex((item) => item.browser === activeBrowser),
    [activeBrowser]
  )
  const browsers = React.useMemo(() => chartData.map((item) => item.browser), [])

  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="flex-row items-start space-y-0 pb-0">
        <div className="grid gap-1">
          <CardTitle>Pie Chart — Interactive</CardTitle>
          <CardDescription>January - June 2024</CardDescription>
        </div>
        <Select value={activeBrowser} onValueChange={setActiveBrowser}>
          <SelectTrigger
            className="ml-auto h-7 w-[130px] rounded-lg pl-2.5"
            aria-label="Select a browser"
          >
            <SelectValue placeholder="Select browser" />
          </SelectTrigger>
          <SelectContent align="end" className="rounded-xl">
            {browsers.map((key) => {
              const config = chartConfig[key as keyof typeof chartConfig]
              if (!config) {
                return null
              }
              return (
                <SelectItem
                  key={key}
                  value={key}
                  className="rounded-lg [&_span]:flex"
                >
                  <div className="flex items-center gap-2 text-xs">
                    <span
                      className="flex size-3 shrink-0 rounded-xs"
                      style={{ backgroundColor: `var(--color-${key})` }}
                    />
                    {config.label}
                  </div>
                </SelectItem>
              )
            })}
          </SelectContent>
        </Select>
      </CardHeader>
      <CardContent className="flex flex-1 justify-center pb-0">
        <ChartContainer
          config={chartConfig}
          className="mx-auto aspect-square w-full max-w-[300px]"
        >
          <PieChart>
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel />}
            />
            <Pie
              data={chartData}
              dataKey="visitors"
              nameKey="browser"
              innerRadius={60}
              strokeWidth={5}
              activeIndex={activeIndex}
              activeShape={({ outerRadius = 0, ...props }) => (
                <g>
                  <Sector {...props} outerRadius={outerRadius + 10} />
                  <Sector
                    {...props}
                    outerRadius={outerRadius + 25}
                    innerRadius={outerRadius + 12}
                  />
                </g>
              )}
            >
              <Label
                content={({ viewBox }) => {
                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                    return (
                      <text
                        x={viewBox.cx}
                        y={viewBox.cy}
                        textAnchor="middle"
                        dominantBaseline="middle"
                      >
                        <tspan
                          x={viewBox.cx}
                          y={viewBox.cy}
                          className="fill-foreground text-3xl font-bold"
                        >
                          {chartData[activeIndex].visitors.toLocaleString()}
                        </tspan>
                        <tspan
                          x={viewBox.cx}
                          y={(viewBox.cy || 0) + 24}
                          className="fill-muted-foreground"
                        >
                          Visitors
                        </tspan>
                      </text>
                    )
                  }
                }}
              />
            </Pie>
          </PieChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Loading state

A circular skeleton while data loads.

**Install:**

```bash
npx shadcn@latest add @designrevision/pie-chart-loading-01
```

**Dependencies:** card, skeleton

```tsx
// components/ui/pie-chart-loading-01.tsx
import {
  Card,
  CardContent,
  CardHeader,
} from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

// A loading state for a pie/donut chart — a circular skeleton.
export default function PieChartLoading01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center gap-2 pb-0">
        <Skeleton className="h-5 w-24" />
        <Skeleton className="h-4 w-36" />
      </CardHeader>
      <CardContent className="flex flex-1 items-center justify-center py-6">
        <Skeleton className="aspect-square size-[200px] rounded-full" />
      </CardContent>
    </Card>
  )
}
```

---

### Empty state

A graceful no-data state with a pie-chart icon.

**Install:**

```bash
npx shadcn@latest add @designrevision/pie-chart-empty-01
```

**Dependencies:** lucide-react, card

```tsx
// components/ui/pie-chart-empty-01.tsx
import { ChartPie } from "lucide-react"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export default function PieChartEmpty01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-0">
        <CardTitle>Pie Chart</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-1 items-center justify-center py-6">
        <div className="flex aspect-square w-full max-w-[250px] flex-col items-center justify-center gap-2 rounded-full border border-dashed text-center">
          <ChartPie className="text-muted-foreground size-8" />
          <div className="text-sm font-medium">No data</div>
          <p className="text-muted-foreground max-w-[12rem] text-xs">
            There's nothing to break down yet.
          </p>
        </div>
      </CardContent>
    </Card>
  )
}
```

---

### Accessible

role/aria-label plus a data table with per-slice share for screen readers.

**Install:**

```bash
npx shadcn@latest add @designrevision/pie-chart-a11y-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/pie-chart-a11y-01.tsx
"use client"

import { Pie, PieChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { browser: "Chrome", visitors: 275, fill: "var(--chart-1)" },
  { browser: "Safari", visitors: 200, fill: "var(--chart-2)" },
  { browser: "Firefox", visitors: 187, fill: "var(--chart-3)" },
  { browser: "Edge", visitors: 173, fill: "var(--chart-4)" },
  { browser: "Other", visitors: 90, fill: "var(--chart-5)" },
]

const chartConfig = {
  visitors: { label: "Visitors" },
} satisfies ChartConfig

const total = chartData.reduce((acc, curr) => acc + curr.visitors, 0)

export default function PieChartA11y01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-0">
        <CardTitle>Accessible Pie Chart</CardTitle>
        <CardDescription>Visitors by browser, with a data table</CardDescription>
      </CardHeader>
      <CardContent className="flex-1 pb-0">
        <ChartContainer
          config={chartConfig}
          className="mx-auto aspect-square max-h-[250px]"
          role="img"
          aria-label="Pie chart of visitors by browser: Chrome 275, Safari 200, Firefox 187, Edge 173, Other 90."
        >
          <PieChart>
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel nameKey="browser" />}
            />
            <Pie data={chartData} dataKey="visitors" nameKey="browser" />
          </PieChart>
        </ChartContainer>

        {/* Visually-hidden data-table fallback for assistive technology. */}
        <table className="sr-only">
          <caption>Visitors by browser</caption>
          <thead>
            <tr>
              <th scope="col">Browser</th>
              <th scope="col">Visitors</th>
              <th scope="col">Share</th>
            </tr>
          </thead>
          <tbody>
            {chartData.map((row) => (
              <tr key={row.browser}>
                <th scope="row">{row.browser}</th>
                <td>{row.visitors}</td>
                <td>{Math.round((row.visitors / total) * 100)}%</td>
              </tr>
            ))}
          </tbody>
        </table>
      </CardContent>
    </Card>
  )
}
```

---

# Shadcn Popover

> Free shadcn/ui popover for React — a Radix floating panel anchored to a trigger. Positioning (side/align/offset), forms that close on submit, settings, notifications, and profile panels. The examples official shadcn never shipped.

Source: https://designrevision.com/components/popover

The **Shadcn Popover** is the floating panel — the canonical <a href="https://ui.shadcn.com/docs/components/popover" rel="nofollow">shadcn/ui</a> popover built on <a href="https://www.radix-ui.com/primitives/docs/components/popover" rel="nofollow">Radix</a>, a generic content panel anchored to a trigger. Official ships one form demo; the examples below show the real range — **forms, settings, notifications, profile cards, and precise positioning**.

## Popover vs Dropdown Menu vs Tooltip vs Dialog

A popover overlaps with three other components, so pick deliberately:

- **Popover** — a panel of **arbitrary content** (fields, toggles, a card) anchored to a trigger. Opens on click, closes on outside-click and Escape.
- **[Dropdown Menu](/components/dropdown-menu)** — a **menu of actions** with roving-focus keyboard semantics. Use it when every row is a command.
- **[Tooltip](/components/tooltip)** — a **hover hint**, non-interactive, for a short label.
- **[Dialog](/components/dialog)** — a **centered modal** that interrupts the page. Use it when the task deserves full attention rather than a small anchored panel.

If the panel holds inputs or rich content, it's a Popover; if it's a list of commands, it's a Dropdown Menu.

## Positioning

Position `PopoverContent` with `side` (`"top" | "right" | "bottom" | "left"`, default `"bottom"`), `align` (`"start" | "center" | "end"`, default `"center"`), and `sideOffset` for the gap. Radix automatically **flips and shifts** the panel to stay in the viewport, so you set a preference, not a fixed position. The Positioning example opens from all four sides.

## Forms in a popover

A popover is the lightweight alternative to a [Dialog](/components/dialog) for a quick edit — rename a project, set dimensions, tweak a value. Control the `open` state and call `setOpen(false)` on submit so the panel closes when the work is done. The Controlled form example is the full pattern; the dimensions form is the canonical shadcn demo.

## Content panels

Because the content is arbitrary, a popover is the home for small **panels**:

- **Settings** — labelled [Switch](/components/switch) rows behind a gear icon (the Settings panel example).
- **Notifications** — a bell trigger with an unread badge over a scrollable list (the Notifications panel example).
- **Profile** — a @mention or avatar opening a card with a follow button (the Profile card example).
- **Help** — a "?" beside a field for inline contextual help (the Info / help example).

## Anchor & dismissal

By default the popover anchors to its trigger; wrap a different element in `PopoverAnchor` to anchor it elsewhere. It closes on outside-click and Escape and returns focus to the trigger; to keep it open during a multi-step flow, `preventDefault()` in `onInteractOutside` / `onEscapeKeyDown`.

## Accessibility & theming

Radix manages focus (it moves into the panel on open and returns to the trigger on close), wires `aria-expanded` / `aria-controls`, and handles Escape — so keyboard and screen-reader users get a coherent experience. The popover reads your design tokens — `--popover`, `--popover-foreground`, `--border` — so it follows your theme, including dark mode, with no overrides.

## Installation

### popover

**Install:**

```bash
npx shadcn@latest add @designrevision/popover
```

**Dependencies:** @radix-ui/react-popover, utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| side | "top" \| "right" \| "bottom" \| "left" | "bottom" | Which side of the trigger the content opens on (on PopoverContent). |
| align | "start" \| "center" \| "end" | "center" | Alignment against the trigger (on PopoverContent). |
| sideOffset | number | 4 | Distance in px between the trigger and the content (on PopoverContent). |
| open | boolean | — | Controlled open state (on Popover). Pair with onOpenChange. |
| onOpenChange | (open: boolean) => void | — | Fires when the popover opens or closes (on Popover). |

**Usage & accessibility:** A Radix popover — four parts (Popover, PopoverTrigger, PopoverContent, PopoverAnchor). A generic floating panel anchored to a trigger; position it with side / align / sideOffset on PopoverContent. Closes on outside-click and Escape. For a menu of actions use Dropdown Menu; for hover hints use Tooltip; for a searchable list use Command (Combobox).

```tsx
// components/ui/popover.tsx
"use client"

import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"

import { cn } from "@/lib/utils"

function Popover({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
  return <PopoverPrimitive.Root data-slot="popover" {...props} />
}

function PopoverTrigger({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
}

function PopoverContent({
  className,
  align = "center",
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
  return (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Content
        data-slot="popover-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
          className
        )}
        {...props}
      />
    </PopoverPrimitive.Portal>
  )
}

function PopoverAnchor({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
}

export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
```

## Examples

### Popover

The canonical dimensions form — a small panel of `Label` + `Input` rows anchored to a trigger.

**Install:**

```bash
npx shadcn@latest add @designrevision/popover-demo-01
```

**Dependencies:** popover, button, input, label

```tsx
// components/ui/popover-demo-01.tsx
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

const fields = [
  { id: "width", label: "Width", value: "100%" },
  { id: "maxWidth", label: "Max. width", value: "300px" },
  { id: "height", label: "Height", value: "25px" },
  { id: "maxHeight", label: "Max. height", value: "none" },
]

export default function PopoverDemo01() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open popover</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <div className="grid gap-4">
          <div className="space-y-1.5">
            <h4 className="font-medium leading-none">Dimensions</h4>
            <p className="text-muted-foreground text-sm">
              Set the dimensions for the layer.
            </p>
          </div>
          <div className="grid gap-2">
            {fields.map((field) => (
              <div
                key={field.id}
                className="grid grid-cols-3 items-center gap-4"
              >
                <Label htmlFor={field.id}>{field.label}</Label>
                <Input
                  id={field.id}
                  defaultValue={field.value}
                  className="col-span-2 h-8"
                />
              </div>
            ))}
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
}
```

---

### Controlled form

A **controlled** popover holding a rename form that closes itself on submit or cancel.

**Install:**

```bash
npx shadcn@latest add @designrevision/popover-form-01
```

**Dependencies:** popover, button, input, label

```tsx
// components/ui/popover-form-01.tsx
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

export default function PopoverForm01() {
  const [open, setOpen] = React.useState(false)
  const [name, setName] = React.useState("Project Alpha")

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button variant="outline">Rename project</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <form
          onSubmit={(event) => {
            event.preventDefault()
            setOpen(false)
          }}
          className="grid gap-3"
        >
          <div className="space-y-1.5">
            <h4 className="font-medium leading-none">Rename project</h4>
            <p className="text-muted-foreground text-sm">
              Give your project a new name.
            </p>
          </div>
          <div className="grid gap-2">
            <Label htmlFor="project-name">Name</Label>
            <Input
              id="project-name"
              value={name}
              onChange={(event) => setName(event.target.value)}
            />
          </div>
          <div className="flex justify-end gap-2">
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={() => setOpen(false)}
            >
              Cancel
            </Button>
            <Button type="submit" size="sm">
              Save
            </Button>
          </div>
        </form>
      </PopoverContent>
    </Popover>
  )
}
```

---

### Positioning

Open from any side with the `side` prop, fine-tuned by `align` and `sideOffset`.

**Install:**

```bash
npx shadcn@latest add @designrevision/popover-align-01
```

**Dependencies:** popover, button

```tsx
// components/ui/popover-align-01.tsx
import { Button } from "@/components/ui/button"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

const sides = ["top", "right", "bottom", "left"] as const

export default function PopoverAlign01() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {sides.map((side) => (
        <Popover key={side}>
          <PopoverTrigger asChild>
            <Button variant="outline" className="capitalize">
              {side}
            </Button>
          </PopoverTrigger>
          <PopoverContent side={side} align="center" sideOffset={8} className="w-auto">
            <p className="text-sm">
              Opens on the <code>{side}</code> — <code>side="{side}"</code>.
            </p>
          </PopoverContent>
        </Popover>
      ))}
    </div>
  )
}
```

---

### Settings panel

A notification-settings panel with labelled [Switch](/components/switch) rows — the gear-icon popover.

**Install:**

```bash
npx shadcn@latest add @designrevision/popover-settings-01
```

**Dependencies:** lucide-react, popover, button, label, switch

```tsx
// components/ui/popover-settings-01.tsx
import { Settings2Icon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import { Switch } from "@/components/ui/switch"

const rows = [
  { id: "comments", label: "Comments", desc: "Replies to your posts", checked: true },
  { id: "mentions", label: "Mentions", desc: "When someone @mentions you", checked: true },
  { id: "marketing", label: "Marketing", desc: "News and product updates", checked: false },
]

export default function PopoverSettings01() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" size="icon" aria-label="Notification settings">
          <Settings2Icon />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-72" align="end">
        <div className="grid gap-4">
          <div className="space-y-1.5">
            <h4 className="font-medium leading-none">Notifications</h4>
            <p className="text-muted-foreground text-sm">
              Choose what you want to hear about.
            </p>
          </div>
          <div className="grid gap-3">
            {rows.map((row) => (
              <div
                key={row.id}
                className="flex items-center justify-between gap-4"
              >
                <div className="space-y-0.5">
                  <Label htmlFor={row.id}>{row.label}</Label>
                  <p className="text-muted-foreground text-xs">{row.desc}</p>
                </div>
                <Switch id={row.id} defaultChecked={row.checked} />
              </div>
            ))}
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
}
```

---

### Notifications panel

A bell-icon trigger with an unread badge opening a list of notifications and a "mark all read" action.

**Install:**

```bash
npx shadcn@latest add @designrevision/popover-notifications-01
```

**Dependencies:** lucide-react, popover, button

```tsx
// components/ui/popover-notifications-01.tsx
import { BellIcon, CheckCheckIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

const notifications = [
  { id: 1, title: "Ada commented on your post", time: "2m ago", unread: true },
  { id: 2, title: "New sign-in from Chrome on macOS", time: "1h ago", unread: true },
  { id: 3, title: "Your export is ready to download", time: "3h ago", unread: false },
]

export default function PopoverNotifications01() {
  const unread = notifications.filter((n) => n.unread).length

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          size="icon"
          className="relative"
          aria-label="Notifications"
        >
          <BellIcon />
          {unread > 0 && (
            <span className="bg-primary text-primary-foreground absolute -top-1 -right-1 flex size-4 items-center justify-center rounded-full text-[10px] font-medium">
              {unread}
            </span>
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-80 p-0" align="end">
        <div className="flex items-center justify-between border-b px-4 py-3">
          <h4 className="font-medium">Notifications</h4>
          <Button variant="ghost" size="sm" className="h-7 gap-1 text-xs">
            <CheckCheckIcon className="size-3.5" />
            Mark all read
          </Button>
        </div>
        <div className="grid">
          {notifications.map((n) => (
            <div
              key={n.id}
              className="flex items-start gap-3 border-b px-4 py-3 last:border-0"
            >
              <span
                className={
                  n.unread
                    ? "bg-primary mt-1.5 size-2 shrink-0 rounded-full"
                    : "mt-1.5 size-2 shrink-0"
                }
              />
              <div className="grid gap-0.5">
                <p className="text-sm">{n.title}</p>
                <p className="text-muted-foreground text-xs">{n.time}</p>
              </div>
            </div>
          ))}
        </div>
      </PopoverContent>
    </Popover>
  )
}
```

---

### Profile card

A @mention link opening a profile card with avatar, bio, a follow button, and a joined date.

**Install:**

```bash
npx shadcn@latest add @designrevision/popover-profile-01
```

**Dependencies:** lucide-react, popover, button, avatar

```tsx
// components/ui/popover-profile-01.tsx
import { CalendarIcon } from "lucide-react"

import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

export default function PopoverProfile01() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="link" className="px-0">
          @ada
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <div className="flex gap-4">
          <Avatar className="size-12">
            <AvatarFallback>AL</AvatarFallback>
          </Avatar>
          <div className="grid gap-1.5">
            <div className="flex items-center justify-between gap-2">
              <div>
                <h4 className="font-medium leading-none">Ada Lovelace</h4>
                <p className="text-muted-foreground text-sm">@ada</p>
              </div>
              <Button size="sm" className="h-7">
                Follow
              </Button>
            </div>
            <p className="text-sm">
              The first programmer. Writes about analytical engines and
              abstraction.
            </p>
            <div className="text-muted-foreground flex items-center gap-1 text-xs">
              <CalendarIcon className="size-3.5" />
              Joined December 1842
            </div>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
}
```

---

### Info / help

A "?" icon beside a field label opening a short explanatory popover — inline contextual help.

**Install:**

```bash
npx shadcn@latest add @designrevision/popover-help-01
```

**Dependencies:** lucide-react, popover, button, label

```tsx
// components/ui/popover-help-01.tsx
import { HelpCircleIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

export default function PopoverHelp01() {
  return (
    <div className="flex items-center gap-2">
      <Label htmlFor="api-key">API key</Label>
      <Popover>
        <PopoverTrigger asChild>
          <Button
            variant="ghost"
            size="icon"
            className="text-muted-foreground size-6"
            aria-label="What is an API key?"
          >
            <HelpCircleIcon className="size-4" />
          </Button>
        </PopoverTrigger>
        <PopoverContent side="top" className="w-72 text-sm">
          <p>
            Your <strong>secret API key</strong> authenticates requests. Keep it
            private — anyone with it can act on your behalf. You can rotate it
            any time from Settings.
          </p>
        </PopoverContent>
      </Popover>
    </div>
  )
}
```

---

# Shadcn Progress

> Free shadcn/ui progress bar for React — built on Radix. A determinate bar with a value, plus labels, colors, sizes, an indeterminate loading state, an upload simulation, and a circular variant.

Source: https://designrevision.com/components/progress

The **Shadcn Progress** is a **Tailwind progress bar** built on <a href="https://www.radix-ui.com/primitives/docs/components/progress" rel="nofollow">Radix</a>: a rounded track with an indicator that fills to a `value` and animates smoothly between updates. The examples below cover the determinate bar, labels, colors, sizes, an indeterminate loading state, a live upload, and a circular variant.

## A value-driven bar

The whole API is one prop — `value`, from 0 to 100:

```tsx
<Progress value={66} />
```

The indicator fills via a CSS `transform` with a `transition`, so when the value changes the bar animates to the new position. Drive it from state to make it move:

```tsx
const [value, setValue] = React.useState(0)
React.useEffect(() => {
  const t = setTimeout(() => setValue(66), 400)
  return () => clearTimeout(t)
}, [])
```

## A label and percentage

Pair the bar with a label row for the storage/usage pattern:

```tsx
<div className="flex items-center justify-between text-sm">
  <span className="text-muted-foreground">Storage used</span>
  <span className="font-medium">{value}%</span>
</div>
<Progress value={value} />
```

## Color and size

It's a Tailwind component, so restyle it with a `className`:

- **Color** — recolor the indicator with a child selector: `className="[&>[data-slot=progress-indicator]]:bg-green-500"`. The Colors example shows success / warning / destructive.
- **Size** — override the track height: `h-1`, `h-2` (default), or `h-4`.

## Indeterminate

When you can't measure progress, show a **sliding** bar instead of a filled value — an absolutely-positioned indicator that animates across the track with a small keyframe:

```css
@keyframes progress-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
```

The Indeterminate example includes the markup and the keyframe.

## Live progress

Wire the value to real progress — an upload's `onprogress`, a multi-step flow, or a timer. The Upload simulation example climbs from 0 to 100% on an interval to show the bar moving.

## Circular progress

A ring is a different shape: draw two SVG circles and animate `stroke-dashoffset` from the full circumference down to the filled fraction. The Circular progress example does this with a centered percentage — handy for compact dashboards.

## Accessibility

Radix gives the bar the `progressbar` role and the right `aria-valuenow` / `aria-valuemax`, so assistive tech reads the percentage. For an indeterminate bar, omit the value so it is announced as "loading" rather than a specific number.

## Installation

### progress

**Install:**

```bash
npx shadcn@latest add @designrevision/progress
```

**Dependencies:** @radix-ui/react-progress, utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | number | 0 | The progress percentage (0–100). The indicator fills to this width. |
| className | string | — | Style the track — height (h-1 / h-2 / h-4), color, radius. |

**Usage & accessibility:** A Radix progress bar — a track (bg-primary/20, h-2 rounded-full) with an indicator that fills to value via a translateX transform, so changes animate smoothly. Pass value 0–100; omit it (or leave the value undefined) and style a sliding indicator for an indeterminate bar. Restyle height/color with a className.

```tsx
// components/ui/progress.tsx
"use client"

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

import { cn } from "@/lib/utils"

function Progress({
  className,
  value,
  ...props
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      className={cn(
        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
        className
      )}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className="bg-primary h-full w-full flex-1 transition-all"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
  )
}

export { Progress }
```

## Examples

### Determinate

The canonical progress bar — animates from 0 to its `value` on mount.

**Install:**

```bash
npx shadcn@latest add @designrevision/progress-demo-01
```

**Dependencies:** progress

```tsx
// components/ui/progress-demo-01.tsx
"use client"

import * as React from "react"

import { Progress } from "@/components/ui/progress"

export default function ProgressDemo01() {
  const [value, setValue] = React.useState(0)

  React.useEffect(() => {
    const timer = setTimeout(() => setValue(66), 400)
    return () => clearTimeout(timer)
  }, [])

  return (
    <div className="w-full max-w-sm">
      <Progress value={value} />
    </div>
  )
}
```

---

### With label

A progress bar with a label and percentage readout — the storage/usage pattern.

**Install:**

```bash
npx shadcn@latest add @designrevision/progress-label-01
```

**Dependencies:** progress

```tsx
// components/ui/progress-label-01.tsx
import { Progress } from "@/components/ui/progress"

export default function ProgressLabel01() {
  const value = 72

  return (
    <div className="w-full max-w-sm space-y-2">
      <div className="flex items-center justify-between text-sm">
        <span className="text-muted-foreground">Storage used</span>
        <span className="font-medium">{value}%</span>
      </div>
      <Progress value={value} />
    </div>
  )
}
```

---

### Colors

Recolor the indicator with a child selector — success, warning, destructive.

**Install:**

```bash
npx shadcn@latest add @designrevision/progress-colors-01
```

**Dependencies:** progress

```tsx
// components/ui/progress-colors-01.tsx
import { Progress } from "@/components/ui/progress"

export default function ProgressColors01() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <Progress
        value={80}
        className="[&>[data-slot=progress-indicator]]:bg-green-500"
      />
      <Progress
        value={55}
        className="[&>[data-slot=progress-indicator]]:bg-amber-500"
      />
      <Progress
        value={30}
        className="[&>[data-slot=progress-indicator]]:bg-destructive"
      />
    </div>
  )
}
```

---

### Sizes

Three track heights — override with `h-1` / `h-2` / `h-4`.

**Install:**

```bash
npx shadcn@latest add @designrevision/progress-sizes-01
```

**Dependencies:** progress

```tsx
// components/ui/progress-sizes-01.tsx
import { Progress } from "@/components/ui/progress"

export default function ProgressSizes01() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <Progress value={60} className="h-1" />
      <Progress value={60} className="h-2" />
      <Progress value={60} className="h-4" />
    </div>
  )
}
```

---

### Indeterminate

A sliding loading bar for unknown duration, via a small keyframe.

**Install:**

```bash
npx shadcn@latest add @designrevision/progress-indeterminate-01
```

**Dependencies:** progress

```tsx
// components/ui/progress-indeterminate-01.tsx
// An indeterminate progress bar — for when you can't measure percent complete.
// The sliding indicator uses the .animate-progress-indeterminate keyframe from globals.css.
export default function ProgressIndeterminate01() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-primary/20 relative h-2 w-full overflow-hidden rounded-full">
        <div className="animate-progress-indeterminate bg-primary absolute inset-y-0 left-0 w-1/3 rounded-full" />
      </div>
    </div>
  )
}
```

---

### Upload simulation

A live bar driven by state — climbs from 0 to 100% on an interval.

**Install:**

```bash
npx shadcn@latest add @designrevision/progress-upload-01
```

**Dependencies:** progress

```tsx
// components/ui/progress-upload-01.tsx
"use client"

import * as React from "react"

import { Progress } from "@/components/ui/progress"

export default function ProgressUpload01() {
  const [value, setValue] = React.useState(0)

  React.useEffect(() => {
    const interval = setInterval(() => {
      setValue((v) => (v >= 100 ? 0 : v + 5))
    }, 300)
    return () => clearInterval(interval)
  }, [])

  return (
    <div className="w-full max-w-sm space-y-2">
      <div className="flex items-center justify-between text-sm">
        <span className="text-muted-foreground">document.pdf</span>
        <span className="font-medium">{value}%</span>
      </div>
      <Progress value={value} />
    </div>
  )
}
```

---

### Circular progress

A circular ring built with SVG `stroke-dashoffset`, with a centered percentage.

**Install:**

```bash
npx shadcn@latest add @designrevision/progress-circular-01
```

**Dependencies:** progress

```tsx
// components/ui/progress-circular-01.tsx
// A circular progress ring built with SVG stroke-dashoffset — beyond the linear Progress bar.
export default function ProgressCircular01() {
  const value = 68
  const size = 96
  const stroke = 8
  const radius = (size - stroke) / 2
  const circumference = 2 * Math.PI * radius
  const offset = circumference - (value / 100) * circumference

  return (
    <div className="relative inline-flex items-center justify-center">
      <svg width={size} height={size} className="-rotate-90">
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          strokeWidth={stroke}
          className="stroke-primary/20"
        />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          strokeWidth={stroke}
          strokeLinecap="round"
          strokeDasharray={circumference}
          strokeDashoffset={offset}
          className="stroke-primary transition-all"
        />
      </svg>
      <span className="absolute text-lg font-semibold">{value}%</span>
    </div>
  )
}
```

---

# Shadcn Radar Chart

> Free shadcn/ui radar chart for React — built on Recharts and themed with CSS variables. Filled, dots, lines-only, multiple series, and circular-grid variants, plus loading, empty, and accessible states.

Source: https://designrevision.com/components/radar-chart

The **Shadcn Radar Chart** is a <a href="https://recharts.org/" rel="nofollow">Recharts</a> `RadarChart` wrapped in the shadcn `ChartContainer` — themed with your `--chart` CSS variables and dark-mode-ready. It plots several metrics on a shared scale around a circle, ideal for **multi-axis profiles** — skills, features, competitor scores. Below: filled, dots, lines-only, multiple series, and a circular-grid variant, plus the production states.

## The basic radar chart

```tsx
const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig

<ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[250px]">
  <RadarChart data={chartData}>
    <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
    <PolarAngleAxis dataKey="month" />
    <PolarGrid />
    <Radar dataKey="desktop" fill="var(--color-desktop)" fillOpacity={0.6} />
  </RadarChart>
</ChartContainer>
```

`PolarAngleAxis` draws the spokes (one per data row), `PolarGrid` the rings, and `Radar` the filled profile.

## Multiple series

Overlay one `<Radar>` per series and add a legend — keep `fillOpacity` low so the shapes read through each other:

```tsx
<Radar dataKey="desktop" fill="var(--color-desktop)" fillOpacity={0.6} />
<Radar dataKey="mobile"  fill="var(--color-mobile)"  fillOpacity={0.6} />
<ChartLegend content={<ChartLegendContent />} />
```

## Variants

- **Dots** — `dot={{ r: 4, fillOpacity: 1 }}` marks each vertex.
- **Lines only** — `fillOpacity={0}` + a `stroke` gives just the outline (pair with `PolarGrid radialLines={false}`).
- **Circular grid** — `PolarGrid gridType="circle"` swaps the polygon rings for circles.

## Production states

Loading (circular skeleton), empty (icon + message), and accessible (`role`/`aria-label` + data-table fallback) variants are included.

See **[Shadcn Charts](/components/chart)** for the theming system, dark mode, and the other chart types.

## Installation

### chart

**Install:**

```bash
npx shadcn@latest add @designrevision/chart
```

**Dependencies:** recharts, utils, card

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| config * | ChartConfig | — | Maps each data key to { label, icon?, color }. Colors become --color-<key> CSS vars. |
| children * | React.ReactElement (a Recharts chart) | — | A single Recharts chart (BarChart, LineChart, …) — ChartContainer wraps it in a ResponsiveContainer. |

`*` required.

**Usage & accessibility:** A Recharts wrapper themed with CSS variables. Pass a `config` (ChartConfig: each data key → { label, icon?, color }) to <ChartContainer>; it injects --color-<key> vars (scoped per light/dark theme) that your Recharts series reference as fill="var(--color-desktop)". Use <ChartTooltip content={<ChartTooltipContent />}> and <ChartLegend content={<ChartLegendContent />}> for themed tooltips/legends. Colors default to the --chart-1..5 tokens, which re-theme automatically in dark mode. The container needs a height — keep aspect-video / min-h-* or ResponsiveContainer measures 0. This is the base primitive; the Bar/Line/Area/Pie/Radar/Radial chart pages compose it.

```tsx
// components/ui/chart.tsx
"use client"

import * as React from "react"
import * as RechartsPrimitive from "recharts"

import { cn } from "@/lib/utils"

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

  if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

  return context
}

function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
}: React.ComponentProps<"div"> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >["children"]
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`

  return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme || config.color
  )

  if (!colorConfig.length) {
    return null
  }

  return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
}
`
          )
          .join("\n"),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = "dot",
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<"div"> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    indicator?: "line" | "dot" | "dashed"
    nameKey?: string
    labelKey?: string
  }) {
  const { config } = useChart()

  const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
      return null
    }

    const [item] = payload
    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
    const itemConfig = getPayloadConfigFromPayload(config, item, key)
    const value =
      !labelKey && typeof label === "string"
        ? config[label as keyof typeof config]?.label || label
        : itemConfig?.label

    if (labelFormatter) {
      return (
        <div className={cn("font-medium", labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      )
    }

    if (!value) {
      return null
    }

    return <div className={cn("font-medium", labelClassName)}>{value}</div>
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ])

  if (!active || !payload?.length) {
    return null
  }

  const nestLabel = payload.length === 1 && indicator !== "dot"

  return (
    <div
      className={cn(
        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
        className
      )}
    >
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-1.5">
        {payload
          .filter((item) => item.type !== "none")
          .map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

            return (
              <div
                key={item.dataKey}
                className={cn(
                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                            {
                              "h-2.5 w-2.5": indicator === "dot",
                              "w-1": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="text-foreground font-mono font-medium tabular-nums">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
      </div>
    </div>
  )
}

const ChartLegend = RechartsPrimitive.Legend

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = "bottom",
  nameKey,
}: React.ComponentProps<"div"> &
  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
    hideIcon?: boolean
    nameKey?: string
  }) {
  const { config } = useChart()

  if (!payload?.length) {
    return null
  }

  return (
    <div
      className={cn(
        "flex items-center justify-center gap-4",
        verticalAlign === "top" ? "pb-3" : "pt-3",
        className
      )}
    >
      {payload
        .filter((item) => item.type !== "none")
        .map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

          return (
            <div
              key={item.value}
              className={cn(
                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
              )}
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
    </div>
  )
}

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

  const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

  let configLabelKey: string = key

  if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

  return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
```

## Examples

### Radar Chart

The canonical single filled series over a polar grid.

**Install:**

```bash
npx shadcn@latest add @designrevision/radar-chart-demo-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/radar-chart-demo-01.tsx
"use client"

import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 273 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig

export default function RadarChartDemo01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-4">
        <CardTitle>Radar Chart</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent className="pb-0">
        <ChartContainer
          config={chartConfig}
          className="mx-auto aspect-square max-h-[250px]"
        >
          <RadarChart data={chartData}>
            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
            <PolarAngleAxis dataKey="month" />
            <PolarGrid />
            <Radar
              dataKey="desktop"
              fill="var(--color-desktop)"
              fillOpacity={0.6}
            />
          </RadarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### With dots

A filled radar with a dot marker on each vertex.

**Install:**

```bash
npx shadcn@latest add @designrevision/radar-chart-dots-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/radar-chart-dots-01.tsx
"use client"

import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 273 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig

export default function RadarChartDots01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-4">
        <CardTitle>Radar Chart — Dots</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent className="pb-0">
        <ChartContainer
          config={chartConfig}
          className="mx-auto aspect-square max-h-[250px]"
        >
          <RadarChart data={chartData}>
            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
            <PolarAngleAxis dataKey="month" />
            <PolarGrid />
            <Radar
              dataKey="desktop"
              fill="var(--color-desktop)"
              fillOpacity={0.6}
              dot={{ r: 4, fillOpacity: 1 }}
            />
          </RadarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Lines only

An unfilled radar — just the stroked outline.

**Install:**

```bash
npx shadcn@latest add @designrevision/radar-chart-lines-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/radar-chart-lines-01.tsx
"use client"

import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 273 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig

export default function RadarChartLines01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-4">
        <CardTitle>Radar Chart — Lines Only</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent className="pb-0">
        <ChartContainer
          config={chartConfig}
          className="mx-auto aspect-square max-h-[250px]"
        >
          <RadarChart data={chartData}>
            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
            <PolarAngleAxis dataKey="month" />
            <PolarGrid radialLines={false} />
            <Radar
              dataKey="desktop"
              fill="var(--color-desktop)"
              fillOpacity={0}
              stroke="var(--color-desktop)"
              strokeWidth={2}
            />
          </RadarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Multiple series

Two overlaid radar series with a legend — comparing two profiles.

**Install:**

```bash
npx shadcn@latest add @designrevision/radar-chart-multiple-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/radar-chart-multiple-01.tsx
"use client"

import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 273, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function RadarChartMultiple01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-4">
        <CardTitle>Radar Chart — Multiple</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent className="pb-0">
        <ChartContainer
          config={chartConfig}
          className="mx-auto aspect-square max-h-[250px]"
        >
          <RadarChart data={chartData}>
            <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />
            <PolarAngleAxis dataKey="month" />
            <PolarGrid />
            <Radar
              dataKey="desktop"
              fill="var(--color-desktop)"
              fillOpacity={0.6}
            />
            <Radar dataKey="mobile" fill="var(--color-mobile)" fillOpacity={0.6} />
            <ChartLegend className="mt-8" content={<ChartLegendContent />} />
          </RadarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Circular grid

A circular polar grid (`gridType="circle"`) instead of the default polygon.

**Install:**

```bash
npx shadcn@latest add @designrevision/radar-chart-grid-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/radar-chart-grid-01.tsx
"use client"

import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 273 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig

export default function RadarChartGrid01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-4">
        <CardTitle>Radar Chart — Circular Grid</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent className="pb-0">
        <ChartContainer
          config={chartConfig}
          className="mx-auto aspect-square max-h-[250px]"
        >
          <RadarChart data={chartData}>
            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
            <PolarGrid gridType="circle" />
            <PolarAngleAxis dataKey="month" />
            <Radar
              dataKey="desktop"
              fill="var(--color-desktop)"
              fillOpacity={0.6}
              dot={{ r: 4, fillOpacity: 1 }}
            />
          </RadarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Loading state

A circular skeleton while data loads.

**Install:**

```bash
npx shadcn@latest add @designrevision/radar-chart-loading-01
```

**Dependencies:** card, skeleton

```tsx
// components/ui/radar-chart-loading-01.tsx
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

// A loading state for a radar chart — a circular skeleton.
export default function RadarChartLoading01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center gap-2 pb-4">
        <Skeleton className="h-5 w-28" />
        <Skeleton className="h-4 w-36" />
      </CardHeader>
      <CardContent className="flex flex-1 items-center justify-center pb-6">
        <Skeleton className="aspect-square size-[210px] rounded-full" />
      </CardContent>
    </Card>
  )
}
```

---

### Empty state

A graceful no-data state with a radar icon.

**Install:**

```bash
npx shadcn@latest add @designrevision/radar-chart-empty-01
```

**Dependencies:** lucide-react, card

```tsx
// components/ui/radar-chart-empty-01.tsx
import { Radar } from "lucide-react"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export default function RadarChartEmpty01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-4">
        <CardTitle>Radar Chart</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-1 items-center justify-center pb-6">
        <div className="flex aspect-square w-full max-w-[230px] flex-col items-center justify-center gap-2 rounded-full border border-dashed text-center">
          <Radar className="text-muted-foreground size-8" />
          <div className="text-sm font-medium">No data</div>
          <p className="text-muted-foreground max-w-[12rem] text-xs">
            There are no metrics to compare yet.
          </p>
        </div>
      </CardContent>
    </Card>
  )
}
```

---

### Accessible

role/aria-label with a screen-reader data-table fallback.

**Install:**

```bash
npx shadcn@latest add @designrevision/radar-chart-a11y-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/radar-chart-a11y-01.tsx
"use client"

import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 273 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig

export default function RadarChartA11y01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-4">
        <CardTitle>Accessible Radar Chart</CardTitle>
        <CardDescription>Monthly profile, with a data table</CardDescription>
      </CardHeader>
      <CardContent className="pb-0">
        <ChartContainer
          config={chartConfig}
          className="mx-auto aspect-square max-h-[250px]"
          role="img"
          aria-label="Radar chart of desktop visitors across six months, ranging from 186 in January to 305 in February."
        >
          <RadarChart data={chartData}>
            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
            <PolarAngleAxis dataKey="month" />
            <PolarGrid />
            <Radar
              dataKey="desktop"
              fill="var(--color-desktop)"
              fillOpacity={0.6}
            />
          </RadarChart>
        </ChartContainer>

        {/* Visually-hidden data-table fallback for assistive technology. */}
        <table className="sr-only">
          <caption>Desktop visitors by month</caption>
          <thead>
            <tr>
              <th scope="col">Month</th>
              <th scope="col">Visitors</th>
            </tr>
          </thead>
          <tbody>
            {chartData.map((row) => (
              <tr key={row.month}>
                <th scope="row">{row.month}</th>
                <td>{row.desktop}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </CardContent>
    </Card>
  )
}
```

---

# Shadcn Radial Chart

> Free shadcn/ui radial bar chart for React — built on Recharts and themed with CSS variables. Simple, labeled, center-text gauge, grid, and stacked half-donut variants, plus loading, empty, and accessible states.

Source: https://designrevision.com/components/radial-chart

The **Shadcn Radial Chart** is a <a href="https://recharts.org/" rel="nofollow">Recharts</a> `RadialBarChart` wrapped in the shadcn `ChartContainer` — themed with your `--chart` CSS variables and dark-mode-ready. It bends bars around a circle: a **radial bar chart** for ranking categories, or a **gauge** for a single value. Below: simple, labeled, center-text gauge, grid, and stacked half-donut variants, plus the production states.

## The basic radial chart

Colors come from each data row's `fill`, like a pie chart:

```tsx
<ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[250px]">
  <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>
    <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel nameKey="browser" />} />
    <RadialBar dataKey="visitors" background />
  </RadialBarChart>
</ChartContainer>
```

`innerRadius` / `outerRadius` set how thick the ring is; `background` draws the empty track behind each bar.

## Gauge with center text

For a single-value gauge, use a partial arc and a centered `Label`:

```tsx
<RadialBarChart data={[oneRow]} startAngle={0} endAngle={250} innerRadius={80} outerRadius={110}>
  <RadialBar dataKey="visitors" background cornerRadius={10} />
  <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
    <Label content={({ viewBox }) => /* <text> total + caption */} />
  </PolarRadiusAxis>
</RadialBarChart>
```

The Center text example is a 250° gauge; **Stacked** is a 180° half-donut.

## Stacked half-donut

Two `<RadialBar>`s with a shared `stackId` and `endAngle={180}` make a KPI gauge with a combined total in the middle:

```tsx
<RadialBar dataKey="desktop" stackId="a" fill="var(--color-desktop)" cornerRadius={5} />
<RadialBar dataKey="mobile"  stackId="a" fill="var(--color-mobile)"  cornerRadius={5} />
```

## Labels & grid

- **Labels** — a `<LabelList dataKey="browser" position="insideStart" />` prints each category inside its arc (full-circle works best).
- **Grid** — `<PolarGrid gridType="circle" />` adds concentric rings behind the bars.

## Production states

Loading (circular skeleton), empty (gauge icon), and accessible (`role`/`aria-label` + data-table fallback) variants are included.

See **[Shadcn Charts](/components/chart)** for theming and dark mode, and the **[Pie / Donut Chart](/components/pie-chart)** for part-to-whole breakdowns.

## Installation

### chart

**Install:**

```bash
npx shadcn@latest add @designrevision/chart
```

**Dependencies:** recharts, utils, card

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| config * | ChartConfig | — | Maps each data key to { label, icon?, color }. Colors become --color-<key> CSS vars. |
| children * | React.ReactElement (a Recharts chart) | — | A single Recharts chart (BarChart, LineChart, …) — ChartContainer wraps it in a ResponsiveContainer. |

`*` required.

**Usage & accessibility:** A Recharts wrapper themed with CSS variables. Pass a `config` (ChartConfig: each data key → { label, icon?, color }) to <ChartContainer>; it injects --color-<key> vars (scoped per light/dark theme) that your Recharts series reference as fill="var(--color-desktop)". Use <ChartTooltip content={<ChartTooltipContent />}> and <ChartLegend content={<ChartLegendContent />}> for themed tooltips/legends. Colors default to the --chart-1..5 tokens, which re-theme automatically in dark mode. The container needs a height — keep aspect-video / min-h-* or ResponsiveContainer measures 0. This is the base primitive; the Bar/Line/Area/Pie/Radar/Radial chart pages compose it.

```tsx
// components/ui/chart.tsx
"use client"

import * as React from "react"
import * as RechartsPrimitive from "recharts"

import { cn } from "@/lib/utils"

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

  if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

  return context
}

function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
}: React.ComponentProps<"div"> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >["children"]
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`

  return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme || config.color
  )

  if (!colorConfig.length) {
    return null
  }

  return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
}
`
          )
          .join("\n"),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = "dot",
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<"div"> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    indicator?: "line" | "dot" | "dashed"
    nameKey?: string
    labelKey?: string
  }) {
  const { config } = useChart()

  const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
      return null
    }

    const [item] = payload
    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
    const itemConfig = getPayloadConfigFromPayload(config, item, key)
    const value =
      !labelKey && typeof label === "string"
        ? config[label as keyof typeof config]?.label || label
        : itemConfig?.label

    if (labelFormatter) {
      return (
        <div className={cn("font-medium", labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      )
    }

    if (!value) {
      return null
    }

    return <div className={cn("font-medium", labelClassName)}>{value}</div>
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ])

  if (!active || !payload?.length) {
    return null
  }

  const nestLabel = payload.length === 1 && indicator !== "dot"

  return (
    <div
      className={cn(
        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
        className
      )}
    >
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-1.5">
        {payload
          .filter((item) => item.type !== "none")
          .map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

            return (
              <div
                key={item.dataKey}
                className={cn(
                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                            {
                              "h-2.5 w-2.5": indicator === "dot",
                              "w-1": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="text-foreground font-mono font-medium tabular-nums">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
      </div>
    </div>
  )
}

const ChartLegend = RechartsPrimitive.Legend

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = "bottom",
  nameKey,
}: React.ComponentProps<"div"> &
  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
    hideIcon?: boolean
    nameKey?: string
  }) {
  const { config } = useChart()

  if (!payload?.length) {
    return null
  }

  return (
    <div
      className={cn(
        "flex items-center justify-center gap-4",
        verticalAlign === "top" ? "pb-3" : "pt-3",
        className
      )}
    >
      {payload
        .filter((item) => item.type !== "none")
        .map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

          return (
            <div
              key={item.value}
              className={cn(
                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
              )}
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
    </div>
  )
}

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

  const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

  let configLabelKey: string = key

  if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

  return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
```

## Examples

### Radial Chart

The canonical radial bar chart — one bar per category around the circle.

**Install:**

```bash
npx shadcn@latest add @designrevision/radial-chart-demo-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/radial-chart-demo-01.tsx
"use client"

import { RadialBar, RadialBarChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
  { browser: "other", visitors: 90, fill: "var(--color-other)" },
]

const chartConfig = {
  visitors: { label: "Visitors" },
  chrome: { label: "Chrome", color: "var(--chart-1)" },
  safari: { label: "Safari", color: "var(--chart-2)" },
  firefox: { label: "Firefox", color: "var(--chart-3)" },
  edge: { label: "Edge", color: "var(--chart-4)" },
  other: { label: "Other", color: "var(--chart-5)" },
} satisfies ChartConfig

export default function RadialChartDemo01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-0">
        <CardTitle>Radial Chart</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent className="flex-1 pb-0">
        <ChartContainer
          config={chartConfig}
          className="mx-auto aspect-square max-h-[250px]"
        >
          <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel nameKey="browser" />}
            />
            <RadialBar dataKey="visitors" background />
          </RadialBarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### With labels

A full-circle radial chart with each category labeled inside its bar.

**Install:**

```bash
npx shadcn@latest add @designrevision/radial-chart-label-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/radial-chart-label-01.tsx
"use client"

import { LabelList, RadialBar, RadialBarChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
  { browser: "other", visitors: 90, fill: "var(--color-other)" },
]

const chartConfig = {
  visitors: { label: "Visitors" },
  chrome: { label: "Chrome", color: "var(--chart-1)" },
  safari: { label: "Safari", color: "var(--chart-2)" },
  firefox: { label: "Firefox", color: "var(--chart-3)" },
  edge: { label: "Edge", color: "var(--chart-4)" },
  other: { label: "Other", color: "var(--chart-5)" },
} satisfies ChartConfig

export default function RadialChartLabel01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-0">
        <CardTitle>Radial Chart — Labels</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent className="flex-1 pb-0">
        <ChartContainer
          config={chartConfig}
          className="mx-auto aspect-square max-h-[250px]"
        >
          <RadialBarChart
            data={chartData}
            startAngle={-90}
            endAngle={380}
            innerRadius={30}
            outerRadius={110}
          >
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel nameKey="browser" />}
            />
            <RadialBar dataKey="visitors" background>
              <LabelList
                position="insideStart"
                dataKey="browser"
                className="fill-white capitalize mix-blend-luminosity"
                fontSize={11}
              />
            </RadialBar>
          </RadialBarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Center text (gauge)

A single-value gauge — a partial arc with a centered total.

**Install:**

```bash
npx shadcn@latest add @designrevision/radial-chart-text-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/radial-chart-text-01.tsx
"use client"

import {
  Label,
  PolarGrid,
  PolarRadiusAxis,
  RadialBar,
  RadialBarChart,
} from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
} from "@/components/ui/chart"

const chartData = [
  { browser: "safari", visitors: 1260, fill: "var(--color-safari)" },
]

const chartConfig = {
  visitors: { label: "Visitors" },
  safari: { label: "Safari", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function RadialChartText01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-0">
        <CardTitle>Radial Chart — Center Text</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent className="flex-1 pb-0">
        <ChartContainer
          config={chartConfig}
          className="mx-auto aspect-square max-h-[250px]"
        >
          <RadialBarChart
            data={chartData}
            startAngle={0}
            endAngle={250}
            innerRadius={80}
            outerRadius={110}
          >
            <PolarGrid
              gridType="circle"
              radialLines={false}
              stroke="none"
              className="first:fill-muted last:fill-background"
              polarRadius={[86, 74]}
            />
            <RadialBar dataKey="visitors" background cornerRadius={10} />
            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
              <Label
                content={({ viewBox }) => {
                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                    return (
                      <text
                        x={viewBox.cx}
                        y={viewBox.cy}
                        textAnchor="middle"
                        dominantBaseline="middle"
                      >
                        <tspan
                          x={viewBox.cx}
                          y={viewBox.cy}
                          className="fill-foreground text-4xl font-bold"
                        >
                          {chartData[0].visitors.toLocaleString()}
                        </tspan>
                        <tspan
                          x={viewBox.cx}
                          y={(viewBox.cy || 0) + 24}
                          className="fill-muted-foreground"
                        >
                          Visitors
                        </tspan>
                      </text>
                    )
                  }
                }}
              />
            </PolarRadiusAxis>
          </RadialBarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### With grid

A radial chart with a circular polar grid behind the bars.

**Install:**

```bash
npx shadcn@latest add @designrevision/radial-chart-grid-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/radial-chart-grid-01.tsx
"use client"

import { PolarGrid, RadialBar, RadialBarChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
  { browser: "other", visitors: 90, fill: "var(--color-other)" },
]

const chartConfig = {
  visitors: { label: "Visitors" },
  chrome: { label: "Chrome", color: "var(--chart-1)" },
  safari: { label: "Safari", color: "var(--chart-2)" },
  firefox: { label: "Firefox", color: "var(--chart-3)" },
  edge: { label: "Edge", color: "var(--chart-4)" },
  other: { label: "Other", color: "var(--chart-5)" },
} satisfies ChartConfig

export default function RadialChartGrid01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-0">
        <CardTitle>Radial Chart — Grid</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent className="flex-1 pb-0">
        <ChartContainer
          config={chartConfig}
          className="mx-auto aspect-square max-h-[250px]"
        >
          <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel nameKey="browser" />}
            />
            <PolarGrid gridType="circle" />
            <RadialBar dataKey="visitors" />
          </RadialBarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Stacked (half donut)

Two stacked values on a half-circle with a centered total — the KPI gauge.

**Install:**

```bash
npx shadcn@latest add @designrevision/radial-chart-stacked-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/radial-chart-stacked-01.tsx
"use client"

import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [{ month: "january", desktop: 1260, mobile: 570 }]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function RadialChartStacked01() {
  const totalVisitors = chartData[0].desktop + chartData[0].mobile

  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-0">
        <CardTitle>Radial Chart — Stacked</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-1 items-center pb-0">
        <ChartContainer
          config={chartConfig}
          className="mx-auto aspect-square w-full max-w-[250px]"
        >
          <RadialBarChart
            data={chartData}
            endAngle={180}
            innerRadius={80}
            outerRadius={130}
          >
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel />}
            />
            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
              <Label
                content={({ viewBox }) => {
                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                    return (
                      <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle">
                        <tspan
                          x={viewBox.cx}
                          y={(viewBox.cy || 0) - 16}
                          className="fill-foreground text-2xl font-bold"
                        >
                          {totalVisitors.toLocaleString()}
                        </tspan>
                        <tspan
                          x={viewBox.cx}
                          y={(viewBox.cy || 0) + 4}
                          className="fill-muted-foreground"
                        >
                          Visitors
                        </tspan>
                      </text>
                    )
                  }
                }}
              />
            </PolarRadiusAxis>
            <RadialBar
              dataKey="desktop"
              stackId="a"
              cornerRadius={5}
              fill="var(--color-desktop)"
              className="stroke-transparent stroke-2"
            />
            <RadialBar
              dataKey="mobile"
              stackId="a"
              cornerRadius={5}
              fill="var(--color-mobile)"
              className="stroke-transparent stroke-2"
            />
          </RadialBarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Loading state

A circular skeleton while data loads.

**Install:**

```bash
npx shadcn@latest add @designrevision/radial-chart-loading-01
```

**Dependencies:** card, skeleton

```tsx
// components/ui/radial-chart-loading-01.tsx
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

// A loading state for a radial chart — a ring-shaped skeleton.
export default function RadialChartLoading01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center gap-2 pb-0">
        <Skeleton className="h-5 w-28" />
        <Skeleton className="h-4 w-36" />
      </CardHeader>
      <CardContent className="flex flex-1 items-center justify-center py-6">
        <Skeleton className="aspect-square size-[210px] rounded-full" />
      </CardContent>
    </Card>
  )
}
```

---

### Empty state

A graceful no-data state with a gauge icon.

**Install:**

```bash
npx shadcn@latest add @designrevision/radial-chart-empty-01
```

**Dependencies:** lucide-react, card

```tsx
// components/ui/radial-chart-empty-01.tsx
import { Gauge } from "lucide-react"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export default function RadialChartEmpty01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-0">
        <CardTitle>Radial Chart</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-1 items-center justify-center py-6">
        <div className="flex aspect-square w-full max-w-[230px] flex-col items-center justify-center gap-2 rounded-full border border-dashed text-center">
          <Gauge className="text-muted-foreground size-8" />
          <div className="text-sm font-medium">No data</div>
          <p className="text-muted-foreground max-w-[12rem] text-xs">
            There's nothing to measure yet.
          </p>
        </div>
      </CardContent>
    </Card>
  )
}
```

---

### Accessible

role/aria-label with a screen-reader data-table fallback.

**Install:**

```bash
npx shadcn@latest add @designrevision/radial-chart-a11y-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/radial-chart-a11y-01.tsx
"use client"

import { RadialBar, RadialBarChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { browser: "Chrome", visitors: 275, fill: "var(--chart-1)" },
  { browser: "Safari", visitors: 200, fill: "var(--chart-2)" },
  { browser: "Firefox", visitors: 187, fill: "var(--chart-3)" },
  { browser: "Edge", visitors: 173, fill: "var(--chart-4)" },
  { browser: "Other", visitors: 90, fill: "var(--chart-5)" },
]

const chartConfig = {
  visitors: { label: "Visitors" },
} satisfies ChartConfig

export default function RadialChartA11y01() {
  return (
    <Card className="flex w-full max-w-sm flex-col">
      <CardHeader className="items-center pb-0">
        <CardTitle>Accessible Radial Chart</CardTitle>
        <CardDescription>Visitors by browser, with a data table</CardDescription>
      </CardHeader>
      <CardContent className="flex-1 pb-0">
        <ChartContainer
          config={chartConfig}
          className="mx-auto aspect-square max-h-[250px]"
          role="img"
          aria-label="Radial bar chart of visitors by browser: Chrome 275, Safari 200, Firefox 187, Edge 173, Other 90."
        >
          <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel nameKey="browser" />}
            />
            <RadialBar dataKey="visitors" background />
          </RadialBarChart>
        </ChartContainer>

        {/* Visually-hidden data-table fallback for assistive technology. */}
        <table className="sr-only">
          <caption>Visitors by browser</caption>
          <thead>
            <tr>
              <th scope="col">Browser</th>
              <th scope="col">Visitors</th>
            </tr>
          </thead>
          <tbody>
            {chartData.map((row) => (
              <tr key={row.browser}>
                <th scope="row">{row.browser}</th>
                <td>{row.visitors}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </CardContent>
    </Card>
  )
}
```

---

# Shadcn Radio Group

> Free shadcn/ui radio group component for React — radio cards / plan picker, React Hook Form validation, horizontal layout, descriptions and sizes. Copy or install in one command.

Source: https://designrevision.com/components/radio-group

The **Shadcn Radio Group** is the control for picking **one** option from a small set — the canonical <a href="https://ui.shadcn.com/docs/components/radio-group" rel="nofollow">shadcn/ui</a> radio group built on <a href="https://www.radix-ui.com/primitives/docs/components/radio-group" rel="nofollow">Radix</a>, themed entirely with CSS variables. It exports `RadioGroup` and `RadioGroupItem`, pairs with a [Label](/components/label) per option, and the examples below cover what you actually build — radio cards, validated forms, and horizontal layouts.

## When to use — radio vs checkbox vs select

Reach for a radio group when the user must choose **exactly one** option from a small set (2–5) that's worth seeing all at once — a plan, a shipping method, a notification frequency. If each option is **independent** and any number can be on, use a [checkbox](/components/checkbox). If the list is long enough that showing every option would crowd the page, use a select. A radio group's strength is that every choice is visible and comparable.

## Radio cards

The highest-value radio pattern is the **card / plan picker**: each option is a whole clickable card with a title, description, and maybe a price, and the selected card highlights. Wrap each `RadioGroupItem` in a [Label](/components/label) styled as a card and highlight the chosen one with `has-[[data-state=checked]]:border-primary`. Clicking anywhere on the card selects it. The Radio cards example is the drop-in version.

## Descriptions and layout

For richer options, add a description line under each label — the "Standard / Recommended" pattern. The group lays out vertically by default (`grid gap-3`); override the `RadioGroup` className to `flex` for a **horizontal** row of short choices. Keep each `RadioGroupItem` bound to its own `Label` with `htmlFor`/`id` either way.

## React Hook Form

The group is fully controllable, so it slots into <a href="https://react-hook-form.com" rel="nofollow">React Hook Form</a>: read each group's value from the field and write it back with `setValue` (or `field.onChange`) from `onValueChange`. Pair it with a `zod` `enum` schema to require a selection, and set `aria-invalid` on the items to show the error. The React Hook Form example is a complete, working plan selector.

## Accessibility

Radix manages roving focus and arrow-key navigation across the group, so keyboard users move between options with the arrow keys and Tab in/out of the group. Give every option a bound `Label`, and for an invalid group keep the error message linked with `aria-describedby`. For a set of options under a shared question, a `fieldset` with a `legend` adds another layer of grouping for screen readers.

## Theming

The radio group reads your design tokens (`--primary`, `--input`, `--ring`), so it follows your theme — including dark mode — with zero overrides. Any palette produced by a shadcn-compatible theme generator applies automatically.

## Installation

### radio-group

**Install:**

```bash
npx shadcn@latest add @designrevision/radio-group
```

**Dependencies:** @radix-ui/react-radio-group, lucide-react, utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | string | — | Controlled value of the selected item (on RadioGroup). |
| defaultValue | string | — | Initial selected value when uncontrolled (on RadioGroup). |
| onValueChange | (value: string) => void | — | Fires when the selection changes (on RadioGroup). |
| disabled | boolean | false | Disables the whole group, or an individual RadioGroupItem. |

**Usage & accessibility:** Two exports: RadioGroup (the Radix Root) and RadioGroupItem (each option, takes a required value). Set aria-invalid on items for the destructive error styling.

```tsx
// components/ui/radio-group.tsx
"use client"

import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { CircleIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function RadioGroup({
  className,
  ...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
  return (
    <RadioGroupPrimitive.Root
      data-slot="radio-group"
      className={cn("grid gap-3", className)}
      {...props}
    />
  )
}

function RadioGroupItem({
  className,
  ...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
  return (
    <RadioGroupPrimitive.Item
      data-slot="radio-group-item"
      className={cn(
        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator
        data-slot="radio-group-indicator"
        className="relative flex items-center justify-center"
      >
        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
}

export { RadioGroup, RadioGroupItem }
```

## Examples

### With labels

A controlled radio group with one labelled option per row — the canonical single-choice field, read with `onValueChange`.

**Install:**

```bash
npx shadcn@latest add @designrevision/radio-label-01
```

**Dependencies:** radio-group, label

```tsx
// components/ui/radio-label-01.tsx
"use client"

import * as React from "react"

import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

const options = [
  { value: "all", label: "All new messages" },
  { value: "mentions", label: "Direct messages and mentions" },
  { value: "none", label: "Nothing" },
]

export default function RadioLabel01() {
  const [value, setValue] = React.useState("all")

  return (
    <RadioGroup
      value={value}
      onValueChange={setValue}
      className="w-full max-w-sm"
    >
      {options.map((option) => (
        <div key={option.value} className="flex items-center gap-3">
          <RadioGroupItem id={option.value} value={option.value} />
          <Label htmlFor={option.value} className="font-normal">
            {option.label}
          </Label>
        </div>
      ))}
    </RadioGroup>
  )
}
```

---

### With descriptions

Each option carries a title and a description line — the “Standard / Recommended” pattern for plans and settings.

**Install:**

```bash
npx shadcn@latest add @designrevision/radio-description-01
```

**Dependencies:** radio-group, label

```tsx
// components/ui/radio-description-01.tsx
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

const plans = [
  {
    value: "starter",
    title: "Starter",
    description: "For individuals and small projects.",
  },
  {
    value: "team",
    title: "Team",
    description: "For growing teams that collaborate.",
  },
  {
    value: "enterprise",
    title: "Enterprise",
    description: "Advanced controls and dedicated support.",
  },
]

export default function RadioDescription01() {
  return (
    <RadioGroup defaultValue="team" className="w-full max-w-sm gap-4">
      {plans.map((plan) => (
        <div key={plan.value} className="flex items-start gap-3">
          <RadioGroupItem id={plan.value} value={plan.value} className="mt-0.5" />
          <div className="grid gap-1">
            <Label htmlFor={plan.value}>{plan.title}</Label>
            <p className="text-sm text-muted-foreground">{plan.description}</p>
          </div>
        </div>
      ))}
    </RadioGroup>
  )
}
```

---

### Radio cards

Whole-card selectable options — a plan picker that highlights the chosen card via `has-[[data-state=checked]]`. The dominant real-world radio UI.

**Install:**

```bash
npx shadcn@latest add @designrevision/radio-cards-01
```

**Dependencies:** radio-group, label

```tsx
// components/ui/radio-cards-01.tsx
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

const plans = [
  { value: "starter", title: "Starter", description: "Up to 5 projects", price: "$0" },
  { value: "pro", title: "Pro", description: "Unlimited projects", price: "$12" },
  { value: "team", title: "Team", description: "Pro plus collaboration", price: "$32" },
]

export default function RadioCards01() {
  return (
    <RadioGroup defaultValue="pro" className="w-full max-w-sm gap-3">
      {plans.map((plan) => (
        <Label
          key={plan.value}
          htmlFor={plan.value}
          className="flex items-center gap-3 rounded-lg border border-border p-4 font-normal has-[[data-state=checked]]:border-primary has-[[data-state=checked]]:bg-primary/5"
        >
          <RadioGroupItem id={plan.value} value={plan.value} />
          <div className="grid gap-1">
            <span className="text-sm font-medium leading-none">{plan.title}</span>
            <span className="text-sm text-muted-foreground">
              {plan.description}
            </span>
          </div>
          <span className="ml-auto text-sm font-medium">
            {plan.price}
            <span className="text-muted-foreground">/mo</span>
          </span>
        </Label>
      ))}
    </RadioGroup>
  )
}
```

---

### React Hook Form

A required plan selection validated with `react-hook-form` and `zod` — the group reads its value from the field and writes back through `onValueChange`, with an `aria-invalid` error.

**Install:**

```bash
npx shadcn@latest add @designrevision/radio-form-01
```

**Dependencies:** react-hook-form, zod, @hookform/resolvers, radio-group, label, button

```tsx
// components/ui/radio-form-01.tsx
"use client"

import * as React from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"

import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

const schema = z.object({
  plan: z.enum(["starter", "pro", "team"], {
    message: "Please select a plan.",
  }),
})

type FormValues = z.infer<typeof schema>

const plans = [
  { value: "starter", label: "Starter" },
  { value: "pro", label: "Pro" },
  { value: "team", label: "Team" },
]

export default function RadioForm01() {
  const [submitted, setSubmitted] = React.useState(false)
  const {
    handleSubmit,
    setValue,
    watch,
    formState: { errors },
  } = useForm<FormValues>({ resolver: zodResolver(schema) })

  const plan = watch("plan")

  return (
    <form
      onSubmit={handleSubmit(() => setSubmitted(true))}
      className="grid w-full max-w-sm gap-4"
    >
      <div className="grid gap-2">
        <Label>Subscription plan</Label>
        <RadioGroup
          value={plan}
          onValueChange={(value) =>
            setValue("plan", value as FormValues["plan"], {
              shouldValidate: true,
            })
          }
          aria-describedby={errors.plan ? "plan-error" : undefined}
        >
          {plans.map((option) => (
            <div key={option.value} className="flex items-center gap-3">
              <RadioGroupItem
                id={`plan-${option.value}`}
                value={option.value}
                aria-invalid={!!errors.plan}
              />
              <Label htmlFor={`plan-${option.value}`} className="font-normal">
                {option.label}
              </Label>
            </div>
          ))}
        </RadioGroup>
        {errors.plan ? (
          <p id="plan-error" className="text-sm text-destructive">
            {errors.plan.message}
          </p>
        ) : null}
      </div>
      <Button type="submit" className="w-fit">
        {submitted ? "Submitted!" : "Continue"}
      </Button>
    </form>
  )
}
```

---

### Horizontal

Lay the options out in a row by overriding the group to `flex` — useful for short, scannable choices.

**Install:**

```bash
npx shadcn@latest add @designrevision/radio-horizontal-01
```

**Dependencies:** radio-group, label

```tsx
// components/ui/radio-horizontal-01.tsx
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

const options = [
  { value: "monthly", label: "Monthly" },
  { value: "yearly", label: "Yearly" },
  { value: "lifetime", label: "Lifetime" },
]

export default function RadioHorizontal01() {
  return (
    <RadioGroup defaultValue="yearly" className="flex flex-wrap gap-6">
      {options.map((option) => (
        <div key={option.value} className="flex items-center gap-2">
          <RadioGroupItem id={`billing-${option.value}`} value={option.value} />
          <Label htmlFor={`billing-${option.value}`} className="font-normal">
            {option.label}
          </Label>
        </div>
      ))}
    </RadioGroup>
  )
}
```

---

### States

A fully disabled group, a single disabled option, and an invalid group (`aria-invalid` switches on the destructive ring, paired with `aria-describedby`).

**Install:**

```bash
npx shadcn@latest add @designrevision/radio-states-01
```

**Dependencies:** radio-group, label

```tsx
// components/ui/radio-states-01.tsx
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

export default function RadioStates01() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <div className="grid gap-2">
        <Label className="text-muted-foreground">Disabled group</Label>
        <RadioGroup defaultValue="b" disabled>
          <div className="flex items-center gap-3">
            <RadioGroupItem id="dis-a" value="a" />
            <Label htmlFor="dis-a" className="font-normal text-muted-foreground">
              Option A
            </Label>
          </div>
          <div className="flex items-center gap-3">
            <RadioGroupItem id="dis-b" value="b" />
            <Label htmlFor="dis-b" className="font-normal text-muted-foreground">
              Option B
            </Label>
          </div>
        </RadioGroup>
      </div>
      <div className="grid gap-2">
        <Label>One option disabled</Label>
        <RadioGroup defaultValue="free">
          <div className="flex items-center gap-3">
            <RadioGroupItem id="opt-free" value="free" />
            <Label htmlFor="opt-free" className="font-normal">
              Free
            </Label>
          </div>
          <div className="flex items-center gap-3">
            <RadioGroupItem id="opt-pro" value="pro" disabled />
            <Label htmlFor="opt-pro" className="font-normal text-muted-foreground">
              Pro — upgrade required
            </Label>
          </div>
        </RadioGroup>
      </div>
      <div className="grid gap-2">
        <Label>Required — pick one</Label>
        <RadioGroup aria-describedby="radio-error">
          <div className="flex items-center gap-3">
            <RadioGroupItem id="inv-yes" value="yes" aria-invalid />
            <Label htmlFor="inv-yes" className="font-normal">
              Yes
            </Label>
          </div>
          <div className="flex items-center gap-3">
            <RadioGroupItem id="inv-no" value="no" aria-invalid />
            <Label htmlFor="inv-no" className="font-normal">
              No
            </Label>
          </div>
        </RadioGroup>
        <p id="radio-error" className="text-sm text-destructive">
          This field is required.
        </p>
      </div>
    </div>
  )
}
```

---

### Sizes

Small, default, and large radios — scale the control and its dot together with `size-* [&_svg]:size-*`.

**Install:**

```bash
npx shadcn@latest add @designrevision/radio-sizes-01
```

**Dependencies:** radio-group, label

```tsx
// components/ui/radio-sizes-01.tsx
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

export default function RadioSizes01() {
  return (
    <RadioGroup defaultValue="default" className="flex flex-wrap items-center gap-8">
      <div className="flex items-center gap-2">
        <RadioGroupItem
          id="rs-sm"
          value="sm"
          className="size-3.5 [&_svg]:size-1.5"
        />
        <Label htmlFor="rs-sm" className="text-xs font-normal">
          Small
        </Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem id="rs-default" value="default" />
        <Label htmlFor="rs-default" className="font-normal">
          Default
        </Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem
          id="rs-lg"
          value="lg"
          className="size-5 [&_svg]:size-2.5"
        />
        <Label htmlFor="rs-lg" className="text-base font-normal">
          Large
        </Label>
      </div>
    </RadioGroup>
  )
}
```

---

# Shadcn Scatter Chart

> Free shadcn/ui scatter and bubble chart for React — built on Recharts and themed with CSS variables. Basic scatter, bubble (ZAxis sizing), multiple series, labeled axes, and custom shapes, plus loading, empty, and accessible states.

Source: https://designrevision.com/components/scatter-chart

The **Shadcn Scatter Chart** is a <a href="https://recharts.org/" rel="nofollow">Recharts</a> `ScatterChart` wrapped in the shadcn `ChartContainer` — themed with your `--chart` CSS variables and dark-mode-ready. It plots two numeric variables against each other to reveal **correlation, clusters, and outliers**, and with a `ZAxis` becomes a **bubble chart**. Below: basic, bubble, multiple series, labeled axes, and custom shapes, plus the production states.

## The basic scatter chart

Both axes are numeric — that's what makes it a scatter rather than a bar/line:

```tsx
const chartConfig = {
  y: { label: "Revenue", color: "var(--chart-1)" },
} satisfies ChartConfig

<ChartContainer config={chartConfig}>
  <ScatterChart margin={{ top: 12, right: 12, bottom: 12, left: 12 }}>
    <CartesianGrid />
    <XAxis dataKey="x" type="number" name="Visits" />
    <YAxis dataKey="y" type="number" name="Revenue" />
    <ChartTooltip cursor={{ strokeDasharray: "3 3" }} content={<ChartTooltipContent hideLabel />} />
    <Scatter data={chartData} fill="var(--color-y)" />
  </ScatterChart>
</ChartContainer>
```

## Bubble chart

Add a third field and a `ZAxis` to size each point by a value:

```tsx
<ZAxis dataKey="z" type="number" range={[80, 500]} name="Order size" />
<Scatter data={chartData} fill="var(--color-y)" fillOpacity={0.6} />
```

`range` sets the smallest and largest bubble area. Lower the `fillOpacity` so overlaps read.

## Multiple groups & shapes

Render one `<Scatter>` per group with a `name` and a color, and add a legend. Give each a distinct `shape` — `circle`, `triangle`, `cross`, `diamond`, `star`, `square`, `wye` — when color alone isn't enough:

```tsx
<Scatter name="desktop" data={desktop} fill="var(--color-desktop)" shape="circle" />
<Scatter name="mobile"  data={mobile}  fill="var(--color-mobile)"  shape="triangle" />
<ChartLegend content={<ChartLegendContent />} />
```

## Labeled axes

Name the axes, add units, and fix the domain for a real-data plot:

```tsx
<XAxis dataKey="height" type="number" name="Height" unit="cm" domain={[155, 200]} />
<YAxis dataKey="weight" type="number" name="Weight" unit="kg" />
```

## Production states

Loading (scattered-dot skeleton), empty (icon + message), and accessible (`role`/`aria-label` + a data table of x/y pairs) variants are included.

See **[Shadcn Charts](/components/chart)** for the theming system, dark mode, and the other chart types.

## Installation

### chart

**Install:**

```bash
npx shadcn@latest add @designrevision/chart
```

**Dependencies:** recharts, utils, card

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| config * | ChartConfig | — | Maps each data key to { label, icon?, color }. Colors become --color-<key> CSS vars. |
| children * | React.ReactElement (a Recharts chart) | — | A single Recharts chart (BarChart, LineChart, …) — ChartContainer wraps it in a ResponsiveContainer. |

`*` required.

**Usage & accessibility:** A Recharts wrapper themed with CSS variables. Pass a `config` (ChartConfig: each data key → { label, icon?, color }) to <ChartContainer>; it injects --color-<key> vars (scoped per light/dark theme) that your Recharts series reference as fill="var(--color-desktop)". Use <ChartTooltip content={<ChartTooltipContent />}> and <ChartLegend content={<ChartLegendContent />}> for themed tooltips/legends. Colors default to the --chart-1..5 tokens, which re-theme automatically in dark mode. The container needs a height — keep aspect-video / min-h-* or ResponsiveContainer measures 0. This is the base primitive; the Bar/Line/Area/Pie/Radar/Radial chart pages compose it.

```tsx
// components/ui/chart.tsx
"use client"

import * as React from "react"
import * as RechartsPrimitive from "recharts"

import { cn } from "@/lib/utils"

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

  if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

  return context
}

function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
}: React.ComponentProps<"div"> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >["children"]
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`

  return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme || config.color
  )

  if (!colorConfig.length) {
    return null
  }

  return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
}
`
          )
          .join("\n"),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = "dot",
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<"div"> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    indicator?: "line" | "dot" | "dashed"
    nameKey?: string
    labelKey?: string
  }) {
  const { config } = useChart()

  const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
      return null
    }

    const [item] = payload
    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
    const itemConfig = getPayloadConfigFromPayload(config, item, key)
    const value =
      !labelKey && typeof label === "string"
        ? config[label as keyof typeof config]?.label || label
        : itemConfig?.label

    if (labelFormatter) {
      return (
        <div className={cn("font-medium", labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      )
    }

    if (!value) {
      return null
    }

    return <div className={cn("font-medium", labelClassName)}>{value}</div>
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ])

  if (!active || !payload?.length) {
    return null
  }

  const nestLabel = payload.length === 1 && indicator !== "dot"

  return (
    <div
      className={cn(
        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
        className
      )}
    >
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-1.5">
        {payload
          .filter((item) => item.type !== "none")
          .map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

            return (
              <div
                key={item.dataKey}
                className={cn(
                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                            {
                              "h-2.5 w-2.5": indicator === "dot",
                              "w-1": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="text-foreground font-mono font-medium tabular-nums">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
      </div>
    </div>
  )
}

const ChartLegend = RechartsPrimitive.Legend

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = "bottom",
  nameKey,
}: React.ComponentProps<"div"> &
  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
    hideIcon?: boolean
    nameKey?: string
  }) {
  const { config } = useChart()

  if (!payload?.length) {
    return null
  }

  return (
    <div
      className={cn(
        "flex items-center justify-center gap-4",
        verticalAlign === "top" ? "pb-3" : "pt-3",
        className
      )}
    >
      {payload
        .filter((item) => item.type !== "none")
        .map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

          return (
            <div
              key={item.value}
              className={cn(
                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
              )}
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
    </div>
  )
}

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

  const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

  let configLabelKey: string = key

  if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

  return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
```

## Examples

### Scatter Chart

The canonical scatter chart — x/y points over a grid.

**Install:**

```bash
npx shadcn@latest add @designrevision/scatter-chart-demo-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/scatter-chart-demo-01.tsx
"use client"

import { CartesianGrid, Scatter, ScatterChart, XAxis, YAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { x: 12, y: 230 },
  { x: 18, y: 290 },
  { x: 22, y: 250 },
  { x: 27, y: 340 },
  { x: 31, y: 300 },
  { x: 35, y: 410 },
  { x: 40, y: 360 },
  { x: 44, y: 470 },
  { x: 49, y: 430 },
  { x: 53, y: 520 },
  { x: 58, y: 480 },
  { x: 62, y: 560 },
]

const chartConfig = {
  y: { label: "Revenue", color: "var(--chart-1)" },
} satisfies ChartConfig

export default function ScatterChartDemo01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Scatter Chart</CardTitle>
        <CardDescription>Visits vs. revenue</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <ScatterChart
            accessibilityLayer
            margin={{ top: 12, right: 12, bottom: 12, left: 12 }}
          >
            <CartesianGrid />
            <XAxis
              dataKey="x"
              type="number"
              name="Visits"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
            />
            <YAxis
              dataKey="y"
              type="number"
              name="Revenue"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
            />
            <ChartTooltip
              cursor={{ strokeDasharray: "3 3" }}
              content={<ChartTooltipContent hideLabel />}
            />
            <Scatter data={chartData} fill="var(--color-y)" />
          </ScatterChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Bubble chart

A third dimension via ZAxis — each point's size encodes a value.

**Install:**

```bash
npx shadcn@latest add @designrevision/scatter-chart-bubble-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/scatter-chart-bubble-01.tsx
"use client"

import {
  CartesianGrid,
  Scatter,
  ScatterChart,
  XAxis,
  YAxis,
  ZAxis,
} from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { x: 12, y: 230, z: 120 },
  { x: 20, y: 290, z: 260 },
  { x: 26, y: 250, z: 80 },
  { x: 33, y: 360, z: 320 },
  { x: 38, y: 300, z: 160 },
  { x: 45, y: 430, z: 240 },
  { x: 51, y: 360, z: 90 },
  { x: 57, y: 500, z: 380 },
  { x: 63, y: 420, z: 140 },
  { x: 70, y: 560, z: 300 },
]

const chartConfig = {
  y: { label: "Revenue", color: "var(--chart-1)" },
} satisfies ChartConfig

export default function ScatterChartBubble01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Bubble Chart</CardTitle>
        <CardDescription>Visits, revenue, and order size</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <ScatterChart
            accessibilityLayer
            margin={{ top: 12, right: 12, bottom: 12, left: 12 }}
          >
            <CartesianGrid />
            <XAxis
              dataKey="x"
              type="number"
              name="Visits"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
            />
            <YAxis
              dataKey="y"
              type="number"
              name="Revenue"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
            />
            <ZAxis dataKey="z" type="number" range={[80, 500]} name="Order size" />
            <ChartTooltip
              cursor={{ strokeDasharray: "3 3" }}
              content={<ChartTooltipContent hideLabel />}
            />
            <Scatter
              data={chartData}
              fill="var(--color-y)"
              fillOpacity={0.6}
            />
          </ScatterChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Multiple series

Two named series in distinct colors with a legend.

**Install:**

```bash
npx shadcn@latest add @designrevision/scatter-chart-multiple-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/scatter-chart-multiple-01.tsx
"use client"

import { CartesianGrid, Scatter, ScatterChart, XAxis, YAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const groupA = [
  { x: 12, y: 200 },
  { x: 20, y: 260 },
  { x: 28, y: 230 },
  { x: 36, y: 300 },
  { x: 44, y: 280 },
  { x: 52, y: 340 },
]

const groupB = [
  { x: 16, y: 380 },
  { x: 24, y: 420 },
  { x: 32, y: 400 },
  { x: 40, y: 470 },
  { x: 48, y: 440 },
  { x: 56, y: 520 },
]

const chartConfig = {
  groupA: { label: "Group A", color: "var(--chart-1)" },
  groupB: { label: "Group B", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function ScatterChartMultiple01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Scatter Chart — Multiple</CardTitle>
        <CardDescription>Two cohorts compared</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <ScatterChart
            accessibilityLayer
            margin={{ top: 12, right: 12, bottom: 12, left: 12 }}
          >
            <CartesianGrid />
            <XAxis
              dataKey="x"
              type="number"
              name="Visits"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
            />
            <YAxis
              dataKey="y"
              type="number"
              name="Revenue"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
            />
            <ChartTooltip
              cursor={{ strokeDasharray: "3 3" }}
              content={<ChartTooltipContent hideLabel />}
            />
            <ChartLegend content={<ChartLegendContent />} />
            <Scatter name="groupA" data={groupA} fill="var(--color-groupA)" />
            <Scatter name="groupB" data={groupB} fill="var(--color-groupB)" />
          </ScatterChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Labeled axes

Named, unit-bearing X and Y axes with a fixed domain.

**Install:**

```bash
npx shadcn@latest add @designrevision/scatter-chart-axes-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/scatter-chart-axes-01.tsx
"use client"

import { CartesianGrid, Scatter, ScatterChart, XAxis, YAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { height: 160, weight: 54 },
  { height: 165, weight: 59 },
  { height: 168, weight: 63 },
  { height: 170, weight: 61 },
  { height: 173, weight: 68 },
  { height: 176, weight: 72 },
  { height: 178, weight: 70 },
  { height: 181, weight: 78 },
  { height: 184, weight: 81 },
  { height: 188, weight: 86 },
  { height: 191, weight: 90 },
  { height: 194, weight: 95 },
]

const chartConfig = {
  weight: { label: "Weight", color: "var(--chart-3)" },
} satisfies ChartConfig

export default function ScatterChartAxes01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Scatter Chart — Labeled Axes</CardTitle>
        <CardDescription>Height vs. weight</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <ScatterChart
            accessibilityLayer
            margin={{ top: 12, right: 16, bottom: 12, left: 12 }}
          >
            <CartesianGrid />
            <XAxis
              dataKey="height"
              type="number"
              name="Height"
              unit="cm"
              domain={[155, 200]}
              tickLine={false}
              axisLine={false}
              tickMargin={8}
            />
            <YAxis
              dataKey="weight"
              type="number"
              name="Weight"
              unit="kg"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
            />
            <ChartTooltip
              cursor={{ strokeDasharray: "3 3" }}
              content={<ChartTooltipContent hideLabel />}
            />
            <Scatter data={chartData} fill="var(--color-weight)" />
          </ScatterChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Custom shapes

Three series, each with a distinct marker shape.

**Install:**

```bash
npx shadcn@latest add @designrevision/scatter-chart-shapes-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/scatter-chart-shapes-01.tsx
"use client"

import { CartesianGrid, Scatter, ScatterChart, XAxis, YAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const desktop = [
  { x: 14, y: 220 },
  { x: 24, y: 280 },
  { x: 34, y: 250 },
  { x: 44, y: 330 },
  { x: 54, y: 360 },
]
const mobile = [
  { x: 18, y: 380 },
  { x: 28, y: 420 },
  { x: 38, y: 400 },
  { x: 48, y: 470 },
  { x: 58, y: 500 },
]
const tablet = [
  { x: 16, y: 120 },
  { x: 26, y: 160 },
  { x: 36, y: 140 },
  { x: 46, y: 190 },
  { x: 56, y: 210 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
  tablet: { label: "Tablet", color: "var(--chart-3)" },
} satisfies ChartConfig

export default function ScatterChartShapes01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Scatter Chart — Shapes</CardTitle>
        <CardDescription>A distinct marker per series</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <ScatterChart
            accessibilityLayer
            margin={{ top: 12, right: 12, bottom: 12, left: 12 }}
          >
            <CartesianGrid />
            <XAxis
              dataKey="x"
              type="number"
              name="Visits"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
            />
            <YAxis
              dataKey="y"
              type="number"
              name="Revenue"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
            />
            <ChartTooltip
              cursor={{ strokeDasharray: "3 3" }}
              content={<ChartTooltipContent hideLabel />}
            />
            <ChartLegend content={<ChartLegendContent />} />
            <Scatter
              name="desktop"
              data={desktop}
              fill="var(--color-desktop)"
              shape="circle"
            />
            <Scatter
              name="mobile"
              data={mobile}
              fill="var(--color-mobile)"
              shape="triangle"
            />
            <Scatter
              name="tablet"
              data={tablet}
              fill="var(--color-tablet)"
              shape="cross"
            />
          </ScatterChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Loading state

A skeleton shaped like a scatter chart.

**Install:**

```bash
npx shadcn@latest add @designrevision/scatter-chart-loading-01
```

**Dependencies:** card, skeleton

```tsx
// components/ui/scatter-chart-loading-01.tsx
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

// A loading state for a scatter chart — scattered dot placeholders.
const dots = [
  { top: "18%", left: "12%" },
  { top: "55%", left: "22%" },
  { top: "32%", left: "35%" },
  { top: "70%", left: "44%" },
  { top: "40%", left: "56%" },
  { top: "22%", left: "66%" },
  { top: "60%", left: "74%" },
  { top: "38%", left: "86%" },
]

export default function ScatterChartLoading01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader className="gap-2">
        <Skeleton className="h-5 w-28" />
        <Skeleton className="h-4 w-36" />
      </CardHeader>
      <CardContent>
        <div className="relative aspect-video w-full">
          {dots.map((dot, i) => (
            <Skeleton
              key={i}
              className="absolute size-3 rounded-full"
              style={dot}
            />
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
```

---

### Empty state

A graceful no-data state with a scatter icon.

**Install:**

```bash
npx shadcn@latest add @designrevision/scatter-chart-empty-01
```

**Dependencies:** lucide-react, card

```tsx
// components/ui/scatter-chart-empty-01.tsx
import { ChartScatter } from "lucide-react"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export default function ScatterChartEmpty01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Scatter Chart</CardTitle>
        <CardDescription>Visits vs. revenue</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex aspect-video flex-col items-center justify-center gap-2 rounded-lg border border-dashed text-center">
          <ChartScatter className="text-muted-foreground size-8" />
          <div className="text-sm font-medium">No data points</div>
          <p className="text-muted-foreground max-w-[15rem] text-xs">
            There's nothing to plot for this range yet.
          </p>
        </div>
      </CardContent>
    </Card>
  )
}
```

---

### Accessible

role/aria-label with a screen-reader data table of x/y pairs.

**Install:**

```bash
npx shadcn@latest add @designrevision/scatter-chart-a11y-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/scatter-chart-a11y-01.tsx
"use client"

import { CartesianGrid, Scatter, ScatterChart, XAxis, YAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { x: 12, y: 230 },
  { x: 22, y: 290 },
  { x: 32, y: 340 },
  { x: 42, y: 410 },
  { x: 52, y: 470 },
  { x: 62, y: 560 },
]

const chartConfig = {
  y: { label: "Revenue", color: "var(--chart-1)" },
} satisfies ChartConfig

export default function ScatterChartA11y01() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Accessible Scatter Chart</CardTitle>
        <CardDescription>Visits vs. revenue, with a data table</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer
          config={chartConfig}
          role="img"
          aria-label="Scatter chart of revenue against visits across six points, trending upward from (12, 230) to (62, 560)."
        >
          <ScatterChart
            accessibilityLayer
            margin={{ top: 12, right: 12, bottom: 12, left: 12 }}
          >
            <CartesianGrid />
            <XAxis
              dataKey="x"
              type="number"
              name="Visits"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
            />
            <YAxis
              dataKey="y"
              type="number"
              name="Revenue"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
            />
            <ChartTooltip
              cursor={{ strokeDasharray: "3 3" }}
              content={<ChartTooltipContent hideLabel />}
            />
            <Scatter data={chartData} fill="var(--color-y)" />
          </ScatterChart>
        </ChartContainer>

        {/* Visually-hidden data-table fallback for assistive technology. */}
        <table className="sr-only">
          <caption>Revenue by number of visits</caption>
          <thead>
            <tr>
              <th scope="col">Visits</th>
              <th scope="col">Revenue</th>
            </tr>
          </thead>
          <tbody>
            {chartData.map((row) => (
              <tr key={row.x}>
                <th scope="row">{row.x}</th>
                <td>{row.y}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </CardContent>
    </Card>
  )
}
```

---

# Shadcn Scroll Area

> Free shadcn/ui scroll area for React — a custom scrollbar built on Radix that looks consistent across browsers: a vertical list, a horizontal row, a notification feed, and long text.

Source: https://designrevision.com/components/scroll-area

The **Shadcn Scroll Area** is a **custom scrollbar** for React — it replaces the native browser scrollbar with one that looks identical on macOS, Windows, and Linux, while keeping real scrolling, keyboard support, and touch. Built on <a href="https://www.radix-ui.com/primitives/docs/components/scroll-area" rel="nofollow">Radix</a>, it wraps any overflowing content and renders a consistent, styleable thumb. The examples below cover a vertical list, a horizontal row, a notification feed, and long text.

## The shape

```tsx
<ScrollArea className="h-72 w-48 rounded-md border">
  {/* long content */}
</ScrollArea>
```

Give the `ScrollArea` a **fixed height** (or max-height) so the content can overflow — that bounded size is what makes it scroll. The styled scrollbar appears only when there's overflow.

## Why not `overflow: auto`?

Native scrollbars differ across operating systems and overlay scrollbars hide until you scroll, which makes overflow hard to discover. `ScrollArea` renders a consistent thumb in every browser, so a scrolling region looks the same everywhere and stays on-brand — while still using native scrolling underneath for performance and accessibility.

## Horizontal scrolling

The default scrollbar is vertical. For a sideways-scrolling row, lay the content out in a row and add a horizontal `ScrollBar`:

```tsx
<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
  <div className="flex gap-4 p-4">{/* cards */}</div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>
```

## Styling the scrollbar

Because the thumb is a real element — not the browser chrome — every property is yours. Render `ScrollBar` yourself and style its width, colour, and radius with Tailwind, or rely on the default that `ScrollArea` includes.

## Common patterns

- **Notification panel** — a fixed-height activity feed (the Notification list example).
- **Terms / long prose** — a scrollable block of legal text in a dialog (the Long text example).
- **Card rail** — a horizontal row of items that scrolls sideways (the Horizontal example).

## Accessibility

`ScrollArea` uses native scrolling underneath, so the wheel, trackpad, touch dragging, and keyboard (arrows, Page Up / Down) all behave as users expect. The custom thumb is purely visual — the scrolling mechanics stay native, which is what keeps it accessible.

## Installation

### scroll-area

**Install:**

```bash
npx shadcn@latest add @designrevision/scroll-area
```

**Dependencies:** @radix-ui/react-scroll-area, utils

**Usage & accessibility:** A custom scrollbar / scroll area built on Radix. Wrap content in <ScrollArea className="h-[…]"> and it renders a styled, cross-browser scrollbar over a native-scrolling viewport. For horizontal scrolling add a <ScrollBar orientation="horizontal" /> inside. Give the ScrollArea a fixed height (or max-height) or there's nothing to scroll.

```tsx
// components/ui/scroll-area.tsx
"use client"

import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

import { cn } from "@/lib/utils"

function ScrollArea({
  className,
  children,
  ...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
  return (
    <ScrollAreaPrimitive.Root
      data-slot="scroll-area"
      className={cn("relative", className)}
      {...props}
    >
      <ScrollAreaPrimitive.Viewport
        data-slot="scroll-area-viewport"
        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
      >
        {children}
      </ScrollAreaPrimitive.Viewport>
      <ScrollBar />
      <ScrollAreaPrimitive.Corner />
    </ScrollAreaPrimitive.Root>
  )
}

function ScrollBar({
  className,
  orientation = "vertical",
  ...props
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
  return (
    <ScrollAreaPrimitive.ScrollAreaScrollbar
      data-slot="scroll-area-scrollbar"
      orientation={orientation}
      className={cn(
        "flex touch-none p-px transition-colors select-none",
        orientation === "vertical" &&
          "h-full w-2.5 border-l border-l-transparent",
        orientation === "horizontal" &&
          "h-2.5 flex-col border-t border-t-transparent",
        className
      )}
      {...props}
    >
      <ScrollAreaPrimitive.ScrollAreaThumb
        data-slot="scroll-area-thumb"
        className="bg-border relative flex-1 rounded-full"
      />
    </ScrollAreaPrimitive.ScrollAreaScrollbar>
  )
}

export { ScrollArea, ScrollBar }
```

## Examples

### Basic

The canonical vertical scroll area — a tag list with a styled scrollbar.

**Install:**

```bash
npx shadcn@latest add @designrevision/scroll-area-demo-01
```

**Dependencies:** scroll-area, separator

```tsx
// components/ui/scroll-area-demo-01.tsx
import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"

const tags = Array.from({ length: 40 }).map(
  (_, i, a) => `v1.2.0-beta.${a.length - i}`
)

export default function ScrollAreaDemo01() {
  return (
    <ScrollArea className="h-72 w-48 rounded-md border">
      <div className="p-4">
        <h4 className="mb-4 text-sm leading-none font-medium">Tags</h4>
        {tags.map((tag) => (
          <div key={tag}>
            <div className="text-sm">{tag}</div>
            <Separator className="my-2" />
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}
```

---

### Horizontal

A horizontally-scrolling row of cards with a horizontal scrollbar.

**Install:**

```bash
npx shadcn@latest add @designrevision/scroll-area-horizontal-01
```

**Dependencies:** scroll-area

```tsx
// components/ui/scroll-area-horizontal-01.tsx
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"

const works = [
  { id: 1, artist: "Ornella Binni", gradient: "from-rose-400 to-orange-300" },
  { id: 2, artist: "Tom Byrom", gradient: "from-sky-400 to-indigo-300" },
  { id: 3, artist: "Vladimir Malyavko", gradient: "from-emerald-400 to-teal-300" },
  { id: 4, artist: "Maya Reyes", gradient: "from-fuchsia-400 to-pink-300" },
  { id: 5, artist: "Leo Park", gradient: "from-amber-400 to-yellow-300" },
  { id: 6, artist: "Nia Cole", gradient: "from-violet-400 to-purple-300" },
]

export default function ScrollAreaHorizontal01() {
  return (
    <ScrollArea className="w-full max-w-md rounded-md border whitespace-nowrap">
      <div className="flex w-max gap-4 p-4">
        {works.map((work) => (
          <figure key={work.id} className="shrink-0">
            <div
              className={`h-40 w-32 rounded-md bg-gradient-to-b ${work.gradient}`}
            />
            <figcaption className="text-muted-foreground pt-2 text-xs">
              Photo by{" "}
              <span className="text-foreground font-medium">
                {work.artist}
              </span>
            </figcaption>
          </figure>
        ))}
      </div>
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  )
}
```

---

### Notification list

A scrollable activity feed — the notification-panel pattern.

**Install:**

```bash
npx shadcn@latest add @designrevision/scroll-area-notifications-01
```

**Dependencies:** scroll-area

```tsx
// components/ui/scroll-area-notifications-01.tsx
import { ScrollArea } from "@/components/ui/scroll-area"

const notifications = Array.from({ length: 12 }).map((_, i) => ({
  id: i,
  title: [
    "Your call has been confirmed.",
    "You have a new message.",
    "Your subscription is expiring soon.",
    "A new device signed in.",
  ][i % 4],
  time: `${(i + 1) * 5} min ago`,
}))

export default function ScrollAreaNotifications01() {
  return (
    <ScrollArea className="h-72 w-full max-w-sm rounded-md border">
      <div className="p-2">
        {notifications.map((n) => (
          <div
            key={n.id}
            className="hover:bg-accent flex items-start gap-3 rounded-md p-2"
          >
            <span className="bg-primary mt-1.5 size-2 shrink-0 rounded-full" />
            <div className="space-y-0.5">
              <p className="text-sm leading-none font-medium">{n.title}</p>
              <p className="text-muted-foreground text-xs">{n.time}</p>
            </div>
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}
```

---

### Long text

A fixed-height scroll area for long prose like terms of service.

**Install:**

```bash
npx shadcn@latest add @designrevision/scroll-area-text-01
```

**Dependencies:** scroll-area

```tsx
// components/ui/scroll-area-text-01.tsx
import { ScrollArea } from "@/components/ui/scroll-area"

export default function ScrollAreaText01() {
  return (
    <ScrollArea className="h-64 w-full max-w-sm rounded-md border p-4">
      <h4 className="mb-2 text-sm font-medium">Terms of Service</h4>
      <div className="text-muted-foreground space-y-3 text-sm leading-relaxed">
        <p>
          By accessing or using this service, you agree to be bound by these
          terms. If you do not agree to all of the terms, you may not use the
          service.
        </p>
        <p>
          You are responsible for safeguarding the credentials you use to
          access the service and for any activities or actions under your
          account.
        </p>
        <p>
          The service and its original content, features, and functionality are
          and will remain the exclusive property of the company and its
          licensors.
        </p>
        <p>
          We may terminate or suspend access to the service immediately, without
          prior notice or liability, for any reason, including a breach of these
          terms.
        </p>
        <p>
          These terms shall be governed and construed in accordance with the
          laws of the jurisdiction in which the company is established, without
          regard to its conflict-of-law provisions.
        </p>
        <p>
          We reserve the right to modify or replace these terms at any time. By
          continuing to access the service after revisions become effective, you
          agree to be bound by the revised terms.
        </p>
      </div>
    </ScrollArea>
  )
}
```

---

# Shadcn Select

> Free shadcn/ui select (dropdown) component for React — grouped & scrollable lists, icons, country picker, React Hook Form validation, controlled value and sizes. Copy or install in one command.

Source: https://designrevision.com/components/select

The **Shadcn Select** is the dropdown for picking **one** value from a list — the canonical <a href="https://ui.shadcn.com/docs/components/select" rel="nofollow">shadcn/ui</a> select, a ten-part <a href="https://www.radix-ui.com/primitives/docs/components/select" rel="nofollow">Radix</a> composition themed entirely with CSS variables. It pairs with a [Label](/components/label) and composes from `SelectTrigger`, `SelectContent`, `SelectItem`, and friends. The examples below cover what you actually build — grouped pickers, icons, country lists, and validated forms.

## When to use — select vs radio vs combobox

Reach for a select when the user picks **one** value and the list is long enough that showing every option inline would crowd the page (roughly 6+). For a handful of always-visible options, a [radio group](/components/radio-group) reads better. When the list is long enough that users need to **filter as they type**, use a combobox. And when they need to choose **several** values, use a multi-select — the select itself is single-choice.

## Grouped and scrollable lists

For long lists, group related options under `SelectLabel` headings inside `SelectGroup`, and divide groups with `SelectSeparator` — exactly the timezone/region pattern. The scroll-up and scroll-down buttons appear automatically when the list is taller than the viewport, and the content is positioned and animated by Radix's popper.

## Controlled value and the empty-value gotcha

The select is controllable with `value` + `onValueChange`, or uncontrolled with `defaultValue`. One sharp edge trips up most developers: a `SelectItem` **cannot** have an empty-string `value` — Radix reserves `""` for the cleared/placeholder state, so `<SelectItem value="">` throws. Give every item a real value; to **clear** the selection, set the `Select` value back to `""` and the placeholder returns. The Controlled example shows this with a clear button.

## React Hook Form

The select drops into <a href="https://react-hook-form.com" rel="nofollow">React Hook Form</a>: read each field's value into `Select value` and write it back with `setValue` (or `field.onChange`) from `onValueChange`. Pair it with a `zod` `enum` to require a choice, and set `aria-invalid` on the `SelectTrigger` to show the error. The React Hook Form example is a complete, working field.

## Accessibility

Radix gives the select full keyboard support — open with Enter or Space, move with the arrow keys, type to jump to an option, and Escape to close — plus the right ARIA roles. Bind the trigger to a [Label](/components/label) with `htmlFor`/`id`, and link any error text with `aria-describedby`. The trigger's placeholder is muted via `data-[placeholder]` so an unfilled select reads as empty.

## Theming

The select reads your design tokens (`--primary`, `--input`, `--ring`, `--popover`), so it follows your theme — including dark mode — with zero overrides. Any palette produced by a shadcn-compatible theme generator applies automatically.

## Installation

### select

**Install:**

```bash
npx shadcn@latest add @designrevision/select
```

**Dependencies:** @radix-ui/react-select, lucide-react, utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | string | — | Controlled selected value (on Select). Note: SelectItem cannot have an empty-string value — set the Select value to "" to clear to the placeholder. |
| defaultValue | string | — | Initial value when uncontrolled (on Select). |
| onValueChange | (value: string) => void | — | Fires when the selection changes (on Select). |
| size | 'sm' \| 'default' | default | Trigger height preset (on SelectTrigger). |

**Usage & accessibility:** Ten composable parts: Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, and SelectScroll{Up,Down}Button. Set aria-invalid on SelectTrigger for the error styling.

```tsx
// components/ui/select.tsx
"use client"

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function Select({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
  return <SelectPrimitive.Root data-slot="select" {...props} />
}

function SelectGroup({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
  return <SelectPrimitive.Group data-slot="select-group" {...props} />
}

function SelectValue({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
  return <SelectPrimitive.Value data-slot="select-value" {...props} />
}

function SelectTrigger({
  className,
  size = "default",
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
  size?: "sm" | "default"
}) {
  return (
    <SelectPrimitive.Trigger
      data-slot="select-trigger"
      data-size={size}
      className={cn(
        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    >
      {children}
      <SelectPrimitive.Icon>
        <ChevronDownIcon className="size-4 opacity-50" />
      </SelectPrimitive.Icon>
    </SelectPrimitive.Trigger>
  )
}

function SelectContent({
  className,
  children,
  position = "popper",
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
  return (
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        data-slot="select-content"
        className={cn(
          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
          position === "popper" &&
            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
          className
        )}
        position={position}
        {...props}
      >
        <SelectScrollUpButton />
        <SelectPrimitive.Viewport
          className={cn(
            "p-1",
            position === "popper" &&
              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
          )}
        >
          {children}
        </SelectPrimitive.Viewport>
        <SelectScrollDownButton />
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
  )
}

function SelectLabel({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
  return (
    <SelectPrimitive.Label
      data-slot="select-label"
      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
      {...props}
    />
  )
}

function SelectItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
  return (
    <SelectPrimitive.Item
      data-slot="select-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
        className
      )}
      {...props}
    >
      <span className="absolute right-2 flex size-3.5 items-center justify-center">
        <SelectPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </SelectPrimitive.ItemIndicator>
      </span>
      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
    </SelectPrimitive.Item>
  )
}

function SelectSeparator({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
  return (
    <SelectPrimitive.Separator
      data-slot="select-separator"
      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
      {...props}
    />
  )
}

function SelectScrollUpButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
  return (
    <SelectPrimitive.ScrollUpButton
      data-slot="select-scroll-up-button"
      className={cn(
        "flex cursor-default items-center justify-center py-1",
        className
      )}
      {...props}
    >
      <ChevronUpIcon className="size-4" />
    </SelectPrimitive.ScrollUpButton>
  )
}

function SelectScrollDownButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
  return (
    <SelectPrimitive.ScrollDownButton
      data-slot="select-scroll-down-button"
      className={cn(
        "flex cursor-default items-center justify-center py-1",
        className
      )}
      {...props}
    >
      <ChevronDownIcon className="size-4" />
    </SelectPrimitive.ScrollDownButton>
  )
}

export {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectScrollDownButton,
  SelectScrollUpButton,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
}
```

## Examples

### With label

A labelled select with a placeholder — the canonical single-choice dropdown built from `SelectTrigger`, `SelectValue`, and `SelectItem`.

**Install:**

```bash
npx shadcn@latest add @designrevision/select-label-01
```

**Dependencies:** @designrevision/select, label

```tsx
// components/ui/select-label-01.tsx
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

export default function SelectLabel01() {
  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="fruit">Favorite fruit</Label>
      <Select>
        <SelectTrigger id="fruit" className="w-full">
          <SelectValue placeholder="Select a fruit" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="apple">Apple</SelectItem>
          <SelectItem value="banana">Banana</SelectItem>
          <SelectItem value="blueberry">Blueberry</SelectItem>
          <SelectItem value="grapes">Grapes</SelectItem>
          <SelectItem value="pineapple">Pineapple</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}
```

---

### Grouped & scrollable

A timezone picker with `SelectGroup` headings, `SelectSeparator` dividers, and the scroll buttons that appear automatically on long lists.

**Install:**

```bash
npx shadcn@latest add @designrevision/select-groups-01
```

**Dependencies:** @designrevision/select, label

```tsx
// components/ui/select-groups-01.tsx
import * as React from "react"

import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const zones = [
  {
    region: "North America",
    items: [
      ["est", "Eastern (EST)"],
      ["cst", "Central (CST)"],
      ["mst", "Mountain (MST)"],
      ["pst", "Pacific (PST)"],
      ["akst", "Alaska (AKST)"],
      ["hst", "Hawaii (HST)"],
    ],
  },
  {
    region: "Europe & Africa",
    items: [
      ["gmt", "Greenwich Mean (GMT)"],
      ["cet", "Central European (CET)"],
      ["eet", "Eastern European (EET)"],
      ["cat", "Central Africa (CAT)"],
    ],
  },
  {
    region: "Asia",
    items: [
      ["ist", "India (IST)"],
      ["cstc", "China (CST)"],
      ["jst", "Japan (JST)"],
      ["kst", "Korea (KST)"],
    ],
  },
  {
    region: "Australia & Pacific",
    items: [
      ["awst", "Australian Western (AWST)"],
      ["aest", "Australian Eastern (AEST)"],
      ["nzst", "New Zealand (NZST)"],
    ],
  },
]

export default function SelectGroups01() {
  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="timezone">Timezone</Label>
      <Select>
        <SelectTrigger id="timezone" className="w-full">
          <SelectValue placeholder="Select a timezone" />
        </SelectTrigger>
        <SelectContent>
          {zones.map((zone, index) => (
            <React.Fragment key={zone.region}>
              {index > 0 ? <SelectSeparator /> : null}
              <SelectGroup>
                <SelectLabel>{zone.region}</SelectLabel>
                {zone.items.map(([value, label]) => (
                  <SelectItem key={value} value={value}>
                    {label}
                  </SelectItem>
                ))}
              </SelectGroup>
            </React.Fragment>
          ))}
        </SelectContent>
      </Select>
    </div>
  )
}
```

---

### With icons

Status options each with a leading colored dot — the indicator renders in both the open list and the trigger via `SelectValue`.

**Install:**

```bash
npx shadcn@latest add @designrevision/select-icons-01
```

**Dependencies:** @designrevision/select, label

```tsx
// components/ui/select-icons-01.tsx
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const statuses = [
  { value: "backlog", label: "Backlog", color: "bg-muted-foreground" },
  { value: "todo", label: "Todo", color: "bg-blue-500" },
  { value: "in-progress", label: "In Progress", color: "bg-amber-500" },
  { value: "done", label: "Done", color: "bg-emerald-500" },
  { value: "canceled", label: "Canceled", color: "bg-destructive" },
]

export default function SelectIcons01() {
  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="status">Status</Label>
      <Select defaultValue="in-progress">
        <SelectTrigger id="status" className="w-full">
          <SelectValue placeholder="Select a status" />
        </SelectTrigger>
        <SelectContent>
          {statuses.map((status) => (
            <SelectItem key={status.value} value={status.value}>
              <span className={`size-2 rounded-full ${status.color}`} />
              {status.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  )
}
```

---

### Country picker

A real-world country select with a flag emoji beside each option.

**Install:**

```bash
npx shadcn@latest add @designrevision/select-country-01
```

**Dependencies:** @designrevision/select, label

```tsx
// components/ui/select-country-01.tsx
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const countries = [
  { value: "us", label: "United States", flag: "🇺🇸" },
  { value: "gb", label: "United Kingdom", flag: "🇬🇧" },
  { value: "ca", label: "Canada", flag: "🇨🇦" },
  { value: "au", label: "Australia", flag: "🇦🇺" },
  { value: "de", label: "Germany", flag: "🇩🇪" },
  { value: "fr", label: "France", flag: "🇫🇷" },
  { value: "jp", label: "Japan", flag: "🇯🇵" },
  { value: "br", label: "Brazil", flag: "🇧🇷" },
]

export default function SelectCountry01() {
  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="country">Country</Label>
      <Select defaultValue="us">
        <SelectTrigger id="country" className="w-full">
          <SelectValue placeholder="Select a country" />
        </SelectTrigger>
        <SelectContent>
          {countries.map((country) => (
            <SelectItem key={country.value} value={country.value}>
              <span className="text-base leading-none">{country.flag}</span>
              {country.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  )
}
```

---

### React Hook Form

A required role select validated with `react-hook-form` and `zod` — the trigger gets `aria-invalid` and an error message until a value is chosen.

**Install:**

```bash
npx shadcn@latest add @designrevision/select-form-01
```

**Dependencies:** react-hook-form, zod, @hookform/resolvers, @designrevision/select, label, button

```tsx
// components/ui/select-form-01.tsx
"use client"

import * as React from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"

import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const schema = z.object({
  role: z.enum(["admin", "editor", "viewer"], {
    message: "Please select a role.",
  }),
})

type FormValues = z.infer<typeof schema>

export default function SelectForm01() {
  const [submitted, setSubmitted] = React.useState(false)
  const {
    handleSubmit,
    setValue,
    watch,
    formState: { errors },
  } = useForm<FormValues>({ resolver: zodResolver(schema) })

  const role = watch("role")

  return (
    <form
      onSubmit={handleSubmit(() => setSubmitted(true))}
      className="grid w-full max-w-sm gap-4"
    >
      <div className="grid gap-2">
        <Label htmlFor="role">Role</Label>
        <Select
          value={role}
          onValueChange={(value) =>
            setValue("role", value as FormValues["role"], {
              shouldValidate: true,
            })
          }
        >
          <SelectTrigger
            id="role"
            className="w-full"
            aria-invalid={!!errors.role}
            aria-describedby={errors.role ? "role-error" : undefined}
          >
            <SelectValue placeholder="Select a role" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="admin">Admin</SelectItem>
            <SelectItem value="editor">Editor</SelectItem>
            <SelectItem value="viewer">Viewer</SelectItem>
          </SelectContent>
        </Select>
        {errors.role ? (
          <p id="role-error" className="text-sm text-destructive">
            {errors.role.message}
          </p>
        ) : null}
      </div>
      <Button type="submit" className="w-fit">
        {submitted ? "Submitted!" : "Save"}
      </Button>
    </form>
  )
}
```

---

### Controlled & clear

A controlled select with a default value and a clear button. Clearing sets the value back to `""`, which shows the placeholder again.

**Install:**

```bash
npx shadcn@latest add @designrevision/select-controlled-01
```

**Dependencies:** lucide-react, @designrevision/select, label, button

```tsx
// components/ui/select-controlled-01.tsx
"use client"

import * as React from "react"
import { X } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const fruits = [
  ["apple", "Apple"],
  ["banana", "Banana"],
  ["blueberry", "Blueberry"],
  ["grapes", "Grapes"],
]

export default function SelectControlled01() {
  const [value, setValue] = React.useState("banana")

  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="fruit-controlled">Favorite fruit</Label>
      <div className="flex items-center gap-2">
        <Select value={value} onValueChange={setValue}>
          <SelectTrigger id="fruit-controlled" className="w-full">
            <SelectValue placeholder="Select a fruit" />
          </SelectTrigger>
          <SelectContent>
            {fruits.map(([itemValue, label]) => (
              <SelectItem key={itemValue} value={itemValue}>
                {label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Button
          type="button"
          variant="outline"
          size="icon"
          onClick={() => setValue("")}
          disabled={!value}
          aria-label="Clear selection"
        >
          <X />
        </Button>
      </div>
      <p className="text-sm text-muted-foreground">
        Selected:{" "}
        <span className="font-medium text-foreground">{value || "none"}</span>
      </p>
    </div>
  )
}
```

---

### States

A disabled select, a single disabled option, and an invalid select (`aria-invalid` switches on the destructive ring, paired with `aria-describedby`).

**Install:**

```bash
npx shadcn@latest add @designrevision/select-states-01
```

**Dependencies:** @designrevision/select, label

```tsx
// components/ui/select-states-01.tsx
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

export default function SelectStates01() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <div className="grid gap-2">
        <Label htmlFor="sel-disabled" className="text-muted-foreground">
          Disabled
        </Label>
        <Select disabled>
          <SelectTrigger id="sel-disabled" className="w-full">
            <SelectValue placeholder="Unavailable" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="a">Option A</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div className="grid gap-2">
        <Label htmlFor="sel-option">One option disabled</Label>
        <Select>
          <SelectTrigger id="sel-option" className="w-full">
            <SelectValue placeholder="Select a plan" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="free">Free</SelectItem>
            <SelectItem value="pro">Pro</SelectItem>
            <SelectItem value="enterprise" disabled>
              Enterprise — contact sales
            </SelectItem>
          </SelectContent>
        </Select>
      </div>
      <div className="grid gap-2">
        <Label htmlFor="sel-invalid">Required</Label>
        <Select>
          <SelectTrigger
            id="sel-invalid"
            className="w-full"
            aria-invalid
            aria-describedby="sel-error"
          >
            <SelectValue placeholder="Select an option" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="x">Option X</SelectItem>
            <SelectItem value="y">Option Y</SelectItem>
          </SelectContent>
        </Select>
        <p id="sel-error" className="text-sm text-destructive">
          This field is required.
        </p>
      </div>
    </div>
  )
}
```

---

### Sizes

The `sm` and `default` trigger heights via the built-in `size` prop on `SelectTrigger`.

**Install:**

```bash
npx shadcn@latest add @designrevision/select-sizes-01
```

**Dependencies:** @designrevision/select, label

```tsx
// components/ui/select-sizes-01.tsx
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const items = [
  ["apple", "Apple"],
  ["banana", "Banana"],
  ["grapes", "Grapes"],
]

export default function SelectSizes01() {
  return (
    <div className="flex flex-wrap items-end gap-6">
      <div className="grid gap-2">
        <Label htmlFor="sz-sm" className="text-xs">
          Small
        </Label>
        <Select defaultValue="apple">
          <SelectTrigger id="sz-sm" size="sm" className="w-[140px]">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {items.map(([value, label]) => (
              <SelectItem key={value} value={value}>
                {label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
      <div className="grid gap-2">
        <Label htmlFor="sz-default">Default</Label>
        <Select defaultValue="apple">
          <SelectTrigger id="sz-default" className="w-[160px]">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {items.map(([value, label]) => (
              <SelectItem key={value} value={value}>
                {label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    </div>
  )
}
```

---

# Shadcn Separator

> Free shadcn/ui separator (divider) component for React — built on Radix. Horizontal and vertical orientations, a labeled "or continue with" divider, section dividers, and styled variants, with proper role="separator" accessibility.

Source: https://designrevision.com/components/separator

The **Shadcn Separator** is a thin divider line — the shadcn/ui name for what other libraries call a **Divider**. It is built on <a href="https://www.radix-ui.com/primitives/docs/components/separator" rel="nofollow">Radix</a>, so it works **horizontally and vertically** and carries the correct accessibility semantics, unlike a plain `<hr>`. The examples below cover both orientations, a labeled "or continue with" divider, section and stat dividers, and styled variants.

## Separator or divider?

They are the same element. MUI and Chakra ship a `Divider`; shadcn — following Radix and the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/" rel="nofollow">ARIA separator role</a> — calls it `Separator`. If you came here looking for a **shadcn divider**, this is it. The only API you usually touch is `orientation` and a `className`.

## Horizontal & vertical

By default the separator is horizontal — a full-width, 1px line:

```tsx
<Separator />
```

For a vertical rule, set `orientation="vertical"`. A vertical separator takes its **height from its parent**, so place it in a flex row that has a height:

```tsx
<div className="flex h-5 items-center space-x-4 text-sm">
  <div>Blog</div>
  <Separator orientation="vertical" />
  <div>Docs</div>
  <Separator orientation="vertical" />
  <div>Source</div>
</div>
```

## Why not just use `<hr>`?

A native `<hr>` only divides horizontally and comes with browser default styling you have to reset. The Separator:

- works in **both orientations**,
- is themed with your tokens (`bg-border`) and fully restyleable,
- exposes the right **`role` and `aria-orientation`** through Radix.

By default it is **decorative** (`decorative` is `true`), meaning it is hidden from assistive technology — correct for a purely visual divide. When the separation is *semantically* meaningful (e.g. between two distinct groups of controls), pass `decorative={false}` so it is announced.

## Styling

Because it is just an element, you restyle it with a `className`:

- **Color** — `bg-primary`, or a fade with `bg-linear-to-r from-transparent via-border to-transparent`.
- **Thickness** — the default `h-px` / `w-px` comes from a `data-orientation` variant, so override it with an important utility: `className="h-0.5!"`.
- **Inset** — give the parent horizontal padding so the line stops short of the edges.

The Styled & decorative example collects these in one place.

## Common patterns

- **Labeled divider** — center a label over the line with a masking background for the "OR CONTINUE WITH" login pattern (Labeled divider example).
- **Section dividers** — drop a `<Separator />` between rows of a card or menu (Section dividers example).
- **Inline splits** — vertical separators between stats or footer links (Vertical stat splits and Footer nav splits examples).

## Installation

### separator

**Install:**

```bash
npx shadcn@latest add @designrevision/separator
```

**Dependencies:** @radix-ui/react-separator, utils

**Usage & accessibility:** A Radix separator — a thin divider line. orientation is "horizontal" (default) or "vertical" (it fills the cross-axis of its parent). decorative defaults to true (hidden from screen readers). Color it with a bg-* class.

```tsx
// components/ui/separator.tsx
"use client"

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

import { cn } from "@/lib/utils"

function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  ...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
  return (
    <SeparatorPrimitive.Root
      data-slot="separator"
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
        className
      )}
      {...props}
    />
  )
}

export { Separator }
```

## Examples

### Horizontal & vertical

The canonical separator — a horizontal divider plus vertical separators between inline links.

**Install:**

```bash
npx shadcn@latest add @designrevision/separator-demo-01
```

**Dependencies:** separator

```tsx
// components/ui/separator-demo-01.tsx
import { Separator } from "@/components/ui/separator"

export default function SeparatorDemo01() {
  return (
    <div className="w-full max-w-sm">
      <div className="space-y-1">
        <h4 className="text-sm leading-none font-medium">Radix Primitives</h4>
        <p className="text-muted-foreground text-sm">
          An open-source UI component library.
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center space-x-4 text-sm">
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
      </div>
    </div>
  )
}
```

---

### Labeled divider

An **"Or continue with"** divider — a label masking the middle of the line, the classic auth-form pattern.

**Install:**

```bash
npx shadcn@latest add @designrevision/separator-label-01
```

**Dependencies:** separator

```tsx
// components/ui/separator-label-01.tsx
import { Separator } from "@/components/ui/separator"

export default function SeparatorLabel01() {
  return (
    <div className="w-full max-w-sm py-2">
      <div className="relative">
        <Separator />
        <span className="bg-background text-muted-foreground absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 px-2 text-xs uppercase">
          Or continue with
        </span>
      </div>
    </div>
  )
}
```

---

### Section dividers

Horizontal separators between the rows of a settings card.

**Install:**

```bash
npx shadcn@latest add @designrevision/separator-list-01
```

**Dependencies:** separator

```tsx
// components/ui/separator-list-01.tsx
import { Separator } from "@/components/ui/separator"

const settings = [
  { label: "Profile", value: "Ada Lovelace" },
  { label: "Email", value: "ada@example.com" },
  { label: "Plan", value: "Pro" },
  { label: "Billing", value: "Visa •••• 4242" },
]

export default function SeparatorList01() {
  return (
    <div className="bg-card text-card-foreground w-full max-w-sm rounded-lg border">
      <div className="px-4 py-3">
        <h4 className="text-sm font-medium">Account</h4>
      </div>
      <Separator />
      <div className="px-4">
        {settings.map((row, i) => (
          <div key={row.label}>
            <div className="flex items-center justify-between py-3 text-sm">
              <span className="text-muted-foreground">{row.label}</span>
              <span className="font-medium">{row.value}</span>
            </div>
            {i < settings.length - 1 && <Separator />}
          </div>
        ))}
      </div>
    </div>
  )
}
```

---

### Vertical stat splits

A row of stat counters divided by vertical separators — the profile-header metrics pattern.

**Install:**

```bash
npx shadcn@latest add @designrevision/separator-stats-01
```

**Dependencies:** separator

```tsx
// components/ui/separator-stats-01.tsx
import { Separator } from "@/components/ui/separator"

const stats = [
  { label: "Posts", value: "1,240" },
  { label: "Followers", value: "350k" },
  { label: "Following", value: "80" },
]

export default function SeparatorStats01() {
  return (
    <div className="flex h-10 items-center gap-4 text-sm">
      {stats.map((stat, i) => (
        <div key={stat.label} className="flex h-full items-center gap-4">
          <div className="flex flex-col">
            <span className="font-semibold">{stat.value}</span>
            <span className="text-muted-foreground text-xs">{stat.label}</span>
          </div>
          {i < stats.length - 1 && <Separator orientation="vertical" />}
        </div>
      ))}
    </div>
  )
}
```

---

### Footer nav splits

Footer links separated by vertical separators — a compact, inline nav bar.

**Install:**

```bash
npx shadcn@latest add @designrevision/separator-footer-01
```

**Dependencies:** separator

```tsx
// components/ui/separator-footer-01.tsx
import { Separator } from "@/components/ui/separator"

const links = ["About", "Blog", "Careers", "Terms", "Privacy"]

export default function SeparatorFooter01() {
  return (
    <div className="flex h-5 items-center gap-3 text-sm">
      {links.map((link, i) => (
        <div key={link} className="flex h-full items-center gap-3">
          <a href="#" className="text-muted-foreground hover:text-foreground">
            {link}
          </a>
          {i < links.length - 1 && <Separator orientation="vertical" />}
        </div>
      ))}
    </div>
  )
}
```

---

### Styled & decorative

The separator is just a themeable element — colored, gradient-fade, thicker, and inset variants.

**Install:**

```bash
npx shadcn@latest add @designrevision/separator-styled-01
```

**Dependencies:** separator

```tsx
// components/ui/separator-styled-01.tsx
import { Separator } from "@/components/ui/separator"

export default function SeparatorStyled01() {
  return (
    <div className="w-full max-w-sm space-y-6">
      <div className="space-y-1.5">
        <p className="text-muted-foreground text-xs">Colored</p>
        <Separator className="bg-primary" />
      </div>
      <div className="space-y-1.5">
        <p className="text-muted-foreground text-xs">Gradient fade</p>
        <Separator className="bg-linear-to-r from-transparent via-border to-transparent" />
      </div>
      <div className="space-y-1.5">
        <p className="text-muted-foreground text-xs">Thicker</p>
        <Separator className="h-0.5! rounded-full" />
      </div>
      <div className="space-y-1.5">
        <p className="text-muted-foreground text-xs">Inset</p>
        <div className="px-10">
          <Separator />
        </div>
      </div>
    </div>
  )
}
```

---

# Shadcn Sheet

> Free shadcn/ui sheet component for React — a side panel on Radix Dialog. Slide in from any edge, mobile navigation, forms, custom widths, and a scrollable cart drawer. The examples official shadcn never shipped.

Source: https://designrevision.com/components/sheet

The **Shadcn Sheet** is a panel that slides in from the edge of the screen — the canonical <a href="https://ui.shadcn.com/docs/components/sheet" rel="nofollow">shadcn/ui</a> sheet built on <a href="https://www.radix-ui.com/primitives/docs/components/dialog" rel="nofollow">Radix Dialog</a>, with a `side` prop, a built-in close X, and a header/footer layout. Official ships it with one demo; the examples below cover what you actually build with it — **mobile navigation**, forms, custom widths, scrollable content, and a shopping-cart drawer.

## Sheet vs Dialog vs Drawer

All three are overlays, and the choice is about **placement and intent**:

- **Sheet** anchors to an **edge** and slides in. Reach for it when the content sits *beside* the main view — navigation, filters, a settings panel, a cart. It's built on Radix Dialog, so it has the same `open` / `onOpenChange` API as a Dialog.
- **[Dialog](/components/dialog)** is **centered** and interrupts for a single focused task — a form, a detail view, a confirmation.
- **Drawer** (built on vaul) is the **touch-native bottom sheet** with drag-to-dismiss momentum, best on mobile.

A frequent, good pattern is a **Sheet on desktop and a Drawer on mobile** for the same content.

## Four sides

The `side` prop on `SheetContent` controls the edge: `"top"`, `"right"`, `"bottom"`, or `"left"` (default `"right"`). **Left** and **right** sheets take their width from the className (default `sm:max-w-sm`) and fill the height; **top** and **bottom** sheets span the width and size to their content. The Four sides example shows all four from one trigger row.

## Mobile navigation

The single most common use of a sheet is the **mobile menu** — a hamburger button that opens a left sheet of navigation links. The key detail: wrap each link in `SheetClose asChild` so tapping a link **closes the menu** as it navigates. Render the hamburger only below your breakpoint (`md:hidden`) and keep your normal navbar above it. The Mobile navigation example is the complete pattern.

## Width & height

Size the panel with a utility class on `SheetContent` rather than editing the primitive: `className="sm:max-w-md"`, `sm:max-w-lg`, or `w-[90vw] sm:max-w-3xl` for a wide panel. Because the width lives in a className, `tailwind-merge` cleanly overrides the default `sm:max-w-sm`. For top/bottom sheets, control the **height** the same way (`h-1/2`, `h-auto`). The Widths example demonstrates four sizes.

## Controlled & closing

Open the sheet declaratively with `SheetTrigger`, or **controlled** from state via `open` / `onOpenChange`. To dismiss it: wrap any button in `SheetClose asChild` for a plain close, or call `setOpen(false)` to close it programmatically — for example after a form submits successfully. The With a form example controls the sheet and closes it on submit; the Scrollable and Shopping cart examples keep a **sticky header and footer** around a `flex-1 overflow-y-auto` body so long lists scroll without losing the actions.

## "My sheet won't animate"

If the sheet **snaps open with no slide**, the animation utilities are missing. The `animate-in`, `slide-in-from-*`, and `fade-in-0` classes come from **`tw-animate-css`** (or the older `tailwindcss-animate`), not core Tailwind. Add it to your global stylesheet:

```css
@import "tailwindcss";
@import "tw-animate-css";
```

Without it the sheet is fully functional — it just appears instantly instead of sliding. This is the same setup that powers the Dialog and Alert Dialog animations.

## Accessibility

Radix gives the sheet a focus trap, restores focus to the trigger on close, and closes on **Escape** and **outside-click** (unlike an [Alert Dialog](/components/alert-dialog), which blocks outside-click on purpose). Always include a `SheetTitle` and a `SheetDescription` so the panel is announced — if your design hides the title, keep it in the DOM with `sr-only` rather than removing it, or Radix logs an accessibility warning.

## Theming

The sheet reads your design tokens — `--background`, `--border`, `--muted-foreground` — so it follows your theme, including dark mode, with no overrides. Style any region with a className (`SheetContent`, `SheetHeader`, `SheetFooter`) to adjust padding, borders, or width per use.

## Installation

### sheet

**Install:**

```bash
npx shadcn@latest add @designrevision/sheet
```

**Dependencies:** @radix-ui/react-dialog, utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| side | "top" \| "right" \| "bottom" \| "left" | "right" | Which edge the panel slides in from (on SheetContent). |
| open | boolean | — | Controlled open state (on Sheet). Pair with onOpenChange. |
| onOpenChange | (open: boolean) => void | — | Fires when the sheet opens or closes (on Sheet). |

**Usage & accessibility:** Eight parts (Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription) built on Radix Dialog. SheetContent has a built-in close X and a side prop (top/right/bottom/left, default right). Set the width with a className on SheetContent (default sm:max-w-sm). The slide/fade animations require tw-animate-css (or tailwindcss-animate) in your CSS.

```tsx
// components/ui/sheet.tsx
"use client"

import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { XIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
  return <SheetPrimitive.Root data-slot="sheet" {...props} />
}

function SheetTrigger({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
}

function SheetClose({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
}

function SheetPortal({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
}

function SheetOverlay({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
  return (
    <SheetPrimitive.Overlay
      data-slot="sheet-overlay"
      className={cn(
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
        className
      )}
      {...props}
    />
  )
}

function SheetContent({
  className,
  children,
  side = "right",
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
  side?: "top" | "right" | "bottom" | "left"
}) {
  return (
    <SheetPortal>
      <SheetOverlay />
      <SheetPrimitive.Content
        data-slot="sheet-content"
        className={cn(
          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
          side === "right" &&
            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
          side === "left" &&
            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
          side === "top" &&
            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
          side === "bottom" &&
            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
          className
        )}
        {...props}
      >
        {children}
        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
          <XIcon className="size-4" />
          <span className="sr-only">Close</span>
        </SheetPrimitive.Close>
      </SheetPrimitive.Content>
    </SheetPortal>
  )
}

function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sheet-header"
      className={cn("flex flex-col gap-1.5 p-4", className)}
      {...props}
    />
  )
}

function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sheet-footer"
      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
      {...props}
    />
  )
}

function SheetTitle({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
  return (
    <SheetPrimitive.Title
      data-slot="sheet-title"
      className={cn("text-foreground font-semibold", className)}
      {...props}
    />
  )
}

function SheetDescription({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
  return (
    <SheetPrimitive.Description
      data-slot="sheet-description"
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  )
}

export {
  Sheet,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}
```

## Examples

### Basic

A sheet that slides in from the right with a `SheetHeader`, body, and `SheetFooter` — the canonical side panel.

**Install:**

```bash
npx shadcn@latest add @designrevision/sheet-demo-01
```

**Dependencies:** sheet, button

```tsx
// components/ui/sheet-demo-01.tsx
import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export default function SheetDemo01() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open sheet</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Notifications</SheetTitle>
          <SheetDescription>
            Choose how you want to be notified. Changes are saved automatically.
          </SheetDescription>
        </SheetHeader>
        <div className="px-4 text-sm text-muted-foreground">
          A sheet slides in from the edge of the screen — use it for secondary
          content that complements the main view without leaving the page.
        </div>
        <SheetFooter>
          <SheetClose asChild>
            <Button>Done</Button>
          </SheetClose>
          <SheetClose asChild>
            <Button variant="outline">Cancel</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}
```

---

### Four sides

Open the panel from any edge — `top`, `right`, `bottom`, or `left` — with the `side` prop on `SheetContent`.

**Install:**

```bash
npx shadcn@latest add @designrevision/sheet-sides-01
```

**Dependencies:** sheet, button

```tsx
// components/ui/sheet-sides-01.tsx
import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

const sides = ["top", "right", "bottom", "left"] as const

export default function SheetSides01() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {sides.map((side) => (
        <Sheet key={side}>
          <SheetTrigger asChild>
            <Button variant="outline" className="capitalize">
              {side}
            </Button>
          </SheetTrigger>
          <SheetContent side={side}>
            <SheetHeader>
              <SheetTitle className="capitalize">{side} sheet</SheetTitle>
              <SheetDescription>
                This panel slides in from the {side}. Set it with the{" "}
                <code>side</code> prop on <code>SheetContent</code>.
              </SheetDescription>
            </SheetHeader>
            <SheetFooter>
              <SheetClose asChild>
                <Button variant="outline">Close</Button>
              </SheetClose>
            </SheetFooter>
          </SheetContent>
        </Sheet>
      ))}
    </div>
  )
}
```

---

### Mobile navigation

A hamburger-triggered **left** sheet whose links close the menu on click — the canonical responsive nav drawer.

**Install:**

```bash
npx shadcn@latest add @designrevision/sheet-nav-01
```

**Dependencies:** lucide-react, sheet, button

```tsx
// components/ui/sheet-nav-01.tsx
import { MenuIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

const links = [
  { label: "Dashboard", href: "#" },
  { label: "Projects", href: "#" },
  { label: "Team", href: "#" },
  { label: "Settings", href: "#" },
]

export default function SheetNav01() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline" size="icon" aria-label="Open menu">
          <MenuIcon />
        </Button>
      </SheetTrigger>
      <SheetContent side="left" className="w-72">
        <SheetHeader>
          <SheetTitle>Acme Inc.</SheetTitle>
        </SheetHeader>
        <nav className="grid gap-1 px-2">
          {links.map((link) => (
            <SheetClose asChild key={link.label}>
              <a
                href={link.href}
                className="rounded-md px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
              >
                {link.label}
              </a>
            </SheetClose>
          ))}
        </nav>
        <SheetFooter>
          <Button>Upgrade plan</Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}
```

---

### With a form

A **controlled** sheet holding an edit form that closes itself on submit via `setOpen(false)`.

**Install:**

```bash
npx shadcn@latest add @designrevision/sheet-form-01
```

**Dependencies:** sheet, button, input, label

```tsx
// components/ui/sheet-form-01.tsx
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export default function SheetForm01() {
  const [open, setOpen] = React.useState(false)

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild>
        <Button variant="outline">Edit profile</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here. Click save when you&apos;re done.
          </SheetDescription>
        </SheetHeader>
        <form
          onSubmit={(event) => {
            event.preventDefault()
            setOpen(false)
          }}
          className="flex flex-1 flex-col gap-4 px-4"
        >
          <div className="grid gap-2">
            <Label htmlFor="sheet-name">Name</Label>
            <Input id="sheet-name" defaultValue="Ada Lovelace" />
          </div>
          <div className="grid gap-2">
            <Label htmlFor="sheet-username">Username</Label>
            <Input id="sheet-username" defaultValue="@ada" />
          </div>
          <div className="mt-auto flex flex-col gap-2 pb-4">
            <Button type="submit">Save changes</Button>
            <SheetClose asChild>
              <Button type="button" variant="outline">
                Cancel
              </Button>
            </SheetClose>
          </div>
        </form>
      </SheetContent>
    </Sheet>
  )
}
```

---

### Widths

Resize the panel with a `max-width` utility on `SheetContent` — `sm:max-w-md`, `sm:max-w-lg`, or a full `w-[90vw]`.

**Install:**

```bash
npx shadcn@latest add @designrevision/sheet-sizes-01
```

**Dependencies:** sheet, button

```tsx
// components/ui/sheet-sizes-01.tsx
import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

const sizes = [
  { label: "Small", className: "sm:max-w-sm" },
  { label: "Medium", className: "sm:max-w-md" },
  { label: "Large", className: "sm:max-w-lg" },
  { label: "Wide", className: "w-[90vw] sm:max-w-3xl" },
]

export default function SheetSizes01() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {sizes.map((size) => (
        <Sheet key={size.label}>
          <SheetTrigger asChild>
            <Button variant="outline">{size.label}</Button>
          </SheetTrigger>
          <SheetContent className={size.className}>
            <SheetHeader>
              <SheetTitle>{size.label} sheet</SheetTitle>
              <SheetDescription>
                The default is <code>sm:max-w-sm</code>. Override the width with a
                utility class on <code>SheetContent</code> — this one uses{" "}
                <code>{size.className}</code>.
              </SheetDescription>
            </SheetHeader>
            <SheetFooter>
              <SheetClose asChild>
                <Button>Close</Button>
              </SheetClose>
            </SheetFooter>
          </SheetContent>
        </Sheet>
      ))}
    </div>
  )
}
```

---

### Scrollable

A sticky header and footer with a scrollable body — `flex-1 overflow-y-auto` on the middle region for long content.

**Install:**

```bash
npx shadcn@latest add @designrevision/sheet-scroll-01
```

**Dependencies:** sheet, button

```tsx
// components/ui/sheet-scroll-01.tsx
import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

const events = Array.from({ length: 20 }, (_, i) => i + 1)

export default function SheetScroll01() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">View activity</Button>
      </SheetTrigger>
      <SheetContent className="gap-0 p-0">
        <SheetHeader className="border-b">
          <SheetTitle>Activity</SheetTitle>
        </SheetHeader>
        <div className="flex-1 overflow-y-auto p-4">
          <div className="grid gap-3">
            {events.map((n) => (
              <div
                key={n}
                className="rounded-md border border-border p-3 text-sm"
              >
                <p className="font-medium">Event #{n}</p>
                <p className="text-muted-foreground">
                  Something happened a little while ago.
                </p>
              </div>
            ))}
          </div>
        </div>
        <SheetFooter className="border-t">
          <SheetClose asChild>
            <Button>Close</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}
```

---

### Shopping cart

A right-side cart drawer with line items and a sticky checkout footer — the e-commerce mini-cart pattern.

**Install:**

```bash
npx shadcn@latest add @designrevision/sheet-cart-01
```

**Dependencies:** lucide-react, sheet, button

```tsx
// components/ui/sheet-cart-01.tsx
import { ShoppingCartIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

const cart = [
  { name: "Wireless headphones", price: 199, qty: 1 },
  { name: "USB-C cable", price: 19, qty: 2 },
  { name: "Laptop stand", price: 49, qty: 1 },
]

export default function SheetCart01() {
  const total = cart.reduce((sum, item) => sum + item.price * item.qty, 0)

  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">
          <ShoppingCartIcon />
          Cart ({cart.length})
        </Button>
      </SheetTrigger>
      <SheetContent className="gap-0 p-0">
        <SheetHeader className="border-b">
          <SheetTitle>Your cart</SheetTitle>
        </SheetHeader>
        <div className="flex-1 overflow-y-auto p-4">
          <ul className="grid gap-4">
            {cart.map((item) => (
              <li
                key={item.name}
                className="flex items-center justify-between gap-3 text-sm"
              >
                <div>
                  <p className="font-medium">{item.name}</p>
                  <p className="text-muted-foreground">Qty {item.qty}</p>
                </div>
                <span className="font-medium tabular-nums">
                  ${item.price * item.qty}
                </span>
              </li>
            ))}
          </ul>
        </div>
        <SheetFooter className="border-t">
          <div className="flex items-center justify-between text-sm font-medium">
            <span>Total</span>
            <span className="tabular-nums">${total}</span>
          </div>
          <Button>Checkout</Button>
          <SheetClose asChild>
            <Button variant="outline">Continue shopping</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}
```

---

# Shadcn Sidebar

> Free shadcn/ui sidebar component for React — a composable app-shell navigation with collapse-to-icon, sub-menus, floating & inset variants, right-side placement, cookie-persisted state, ⌘B shortcut, and a built-in mobile Sheet.

Source: https://designrevision.com/components/sidebar

The **Shadcn Sidebar** is the composable application-shell navigation from shadcn/ui — not a single component but a kit of **25 parts** you assemble into a layout. It handles the hard parts for you: a collapsible rail, a cookie that remembers its state, a `⌘B` shortcut, a mobile drawer, and its own theme tokens. The examples below cover the basic shell, collapse-to-icon, sub-menus, the inset and floating variants, and a right-side panel.

## Anatomy

A sidebar is built from a small set of composable pieces:

- **`SidebarProvider`** — wraps your whole layout, owns the open/closed state, the cookie, and the keyboard shortcut.
- **`Sidebar`** — the panel itself (`side`, `variant`, and `collapsible` props live here).
- **`SidebarHeader`** / **`SidebarContent`** / **`SidebarFooter`** — the three stacked regions inside the panel.
- **`SidebarGroup`** with **`SidebarGroupLabel`** and **`SidebarGroupContent`** — a titled section of nav.
- **`SidebarMenu`** → **`SidebarMenuItem`** → **`SidebarMenuButton`** — the nav list. Add **`SidebarMenuAction`**, **`SidebarMenuBadge`**, or **`SidebarMenuSub`** for actions, counts, and nested items.
- **`SidebarInset`** — the main content area beside the sidebar.
- **`SidebarTrigger`** — the toggle button; **`SidebarRail`** — a thin drag handle on the panel edge.

A minimal shell looks like this:

```tsx
<SidebarProvider>
  <Sidebar>
    <SidebarContent>
      <SidebarGroup>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton isActive>
              <HomeIcon /> <span>Home</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
    {/* page content */}
  </SidebarInset>
</SidebarProvider>
```

## Collapsible modes

The `collapsible` prop on `<Sidebar>` controls what happens when the sidebar closes:

- **`offcanvas`** (default) — the panel slides off the screen edge.
- **`icon`** — the panel shrinks to a rail of icons. Give each `SidebarMenuButton` a `tooltip` prop so the label appears on hover (the Collapse to icons example).
- **`none`** — the panel is always visible and never collapses.

## Variants

The `variant` prop changes the panel's frame:

- **`sidebar`** (default) — flush against the edge with a divider border.
- **`floating`** — a detached, rounded, shadowed card with a gap around it.
- **`inset`** — the sidebar stays flush but your `SidebarInset` content floats in a rounded card beside it — the classic dashboard look (the Inset & floating variants example).

## State, persistence & the shortcut

`SidebarProvider` owns the open state. It writes a **`sidebar_state` cookie** on every toggle, so to avoid a flash of the wrong state on load, read that cookie on the server and pass `defaultOpen` from it:

```tsx
// app/layout.tsx
const cookieStore = await cookies()
const defaultOpen = cookieStore.get("sidebar_state")?.value === "true"

<SidebarProvider defaultOpen={defaultOpen}>{children}</SidebarProvider>
```

Press **`⌘B`** (or `Ctrl+B`) anywhere to toggle it, click any `<SidebarTrigger />`, or call `toggleSidebar()` from the `useSidebar()` hook. For full control, pass `open` and `onOpenChange` to the provider.

## Right side & secondary panels

Set `side="right"` and render the `<Sidebar>` after your `<SidebarInset>` to anchor it to the opposite edge — useful for a notifications feed, activity log, or details pane (the Right-side sidebar example). You can even run two sidebars, one per side.

## Mobile

Below the `md` breakpoint the sidebar renders inside a **`Sheet`** — a slide-in drawer — instead of sitting in the layout, and `SidebarTrigger` opens it. The switch is automatic via the `useIsMobile` hook, so the same markup is responsive with no extra work.

## Theming

The sidebar has its **own set of color tokens**, separate from the rest of your UI, so you can tint navigation independently: `--sidebar`, `--sidebar-foreground`, `--sidebar-primary`, `--sidebar-accent`, `--sidebar-border`, and `--sidebar-ring` (each with a dark-mode value). `shadcn init` adds them to your `globals.css`. If those variables are missing, utilities like `bg-sidebar` generate nothing and the panel renders blank — add the tokens and it themes correctly, dark mode included.

## Accessibility

The active item is marked with `isActive` (which sets `data-active`), the trigger has an accessible label, and the mobile Sheet manages focus and keyboard dismissal. Use real links inside `SidebarMenuButton asChild` so navigation works with the keyboard and screen readers, and keep `SidebarGroupLabel` text meaningful so each section is announced.

## Installation

### sidebar

**Install:**

```bash
npx shadcn@latest add @designrevision/sidebar
```

**Dependencies:** @radix-ui/react-slot, class-variance-authority, utils, button, input, separator, sheet, skeleton, tooltip

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| defaultOpen | boolean | true | Initial open state (on SidebarProvider). Persisted to a cookie. |
| collapsible | "offcanvas" \| "icon" \| "none" | "offcanvas" | How the sidebar collapses (on Sidebar) — slide away, shrink to icons, or never. |
| variant | "sidebar" \| "floating" \| "inset" | "sidebar" | Visual style (on Sidebar) — flush, floating card, or inset panel. |
| side | "left" \| "right" | "left" | Which edge the sidebar sits on (on Sidebar). |

**Usage & accessibility:** A full application sidebar — 25 composable parts. Wrap your layout in SidebarProvider, put nav in <Sidebar> (SidebarHeader / SidebarContent with SidebarGroup + SidebarMenu / SidebarFooter), and your page in SidebarInset; SidebarTrigger toggles it (also ⌘/Ctrl+B), with the open state persisted to a cookie. It uses Sheet on mobile and Tooltip when collapsed to icons. Requires the --sidebar* CSS tokens in your globals.css (added by shadcn init) or it renders unstyled.

```tsx
// components/ui/sidebar.tsx
"use client"

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, VariantProps } from "class-variance-authority"
import { PanelLeftIcon } from "lucide-react"

import { useIsMobile } from "@/hooks/use-mobile"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"
import { Skeleton } from "@/components/ui/skeleton"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

const SIDEBAR_COOKIE_NAME = "sidebar_state"
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = "16rem"
const SIDEBAR_WIDTH_MOBILE = "18rem"
const SIDEBAR_WIDTH_ICON = "3rem"
const SIDEBAR_KEYBOARD_SHORTCUT = "b"

type SidebarContextProps = {
  state: "expanded" | "collapsed"
  open: boolean
  setOpen: (open: boolean) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContextProps | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error("useSidebar must be used within a SidebarProvider.")
  }

  return context
}

function SidebarProvider({
  defaultOpen = true,
  open: openProp,
  onOpenChange: setOpenProp,
  className,
  style,
  children,
  ...props
}: React.ComponentProps<"div"> & {
  defaultOpen?: boolean
  open?: boolean
  onOpenChange?: (open: boolean) => void
}) {
  const isMobile = useIsMobile()
  const [openMobile, setOpenMobile] = React.useState(false)

  // This is the internal state of the sidebar.
  // We use openProp and setOpenProp for control from outside the component.
  const [_open, _setOpen] = React.useState(defaultOpen)
  const open = openProp ?? _open
  const setOpen = React.useCallback(
    (value: boolean | ((value: boolean) => boolean)) => {
      const openState = typeof value === "function" ? value(open) : value
      if (setOpenProp) {
        setOpenProp(openState)
      } else {
        _setOpen(openState)
      }

      // This sets the cookie to keep the sidebar state.
      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
    },
    [setOpenProp, open]
  )

  // Helper to toggle the sidebar.
  const toggleSidebar = React.useCallback(() => {
    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
  }, [isMobile, setOpen, setOpenMobile])

  // Adds a keyboard shortcut to toggle the sidebar.
  React.useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (
        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
        (event.metaKey || event.ctrlKey)
      ) {
        event.preventDefault()
        toggleSidebar()
      }
    }

    window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [toggleSidebar])

  // We add a state so that we can do data-state="expanded" or "collapsed".
  // This makes it easier to style the sidebar with Tailwind classes.
  const state = open ? "expanded" : "collapsed"

  const contextValue = React.useMemo<SidebarContextProps>(
    () => ({
      state,
      open,
      setOpen,
      isMobile,
      openMobile,
      setOpenMobile,
      toggleSidebar,
    }),
    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
  )

  return (
    <SidebarContext.Provider value={contextValue}>
      <TooltipProvider delayDuration={0}>
        <div
          data-slot="sidebar-wrapper"
          style={
            {
              "--sidebar-width": SIDEBAR_WIDTH,
              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
              ...style,
            } as React.CSSProperties
          }
          className={cn(
            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
            className
          )}
          {...props}
        >
          {children}
        </div>
      </TooltipProvider>
    </SidebarContext.Provider>
  )
}

function Sidebar({
  side = "left",
  variant = "sidebar",
  collapsible = "offcanvas",
  className,
  children,
  ...props
}: React.ComponentProps<"div"> & {
  side?: "left" | "right"
  variant?: "sidebar" | "floating" | "inset"
  collapsible?: "offcanvas" | "icon" | "none"
}) {
  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

  if (collapsible === "none") {
    return (
      <div
        data-slot="sidebar"
        className={cn(
          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
          className
        )}
        {...props}
      >
        {children}
      </div>
    )
  }

  if (isMobile) {
    return (
      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
        <SheetContent
          data-sidebar="sidebar"
          data-slot="sidebar"
          data-mobile="true"
          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
          style={
            {
              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
            } as React.CSSProperties
          }
          side={side}
        >
          <SheetHeader className="sr-only">
            <SheetTitle>Sidebar</SheetTitle>
            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
          </SheetHeader>
          <div className="flex h-full w-full flex-col">{children}</div>
        </SheetContent>
      </Sheet>
    )
  }

  return (
    <div
      className="group peer text-sidebar-foreground hidden md:block"
      data-state={state}
      data-collapsible={state === "collapsed" ? collapsible : ""}
      data-variant={variant}
      data-side={side}
      data-slot="sidebar"
    >
      {/* This is what handles the sidebar gap on desktop */}
      <div
        data-slot="sidebar-gap"
        className={cn(
          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
          "group-data-[collapsible=offcanvas]:w-0",
          "group-data-[side=right]:rotate-180",
          variant === "floating" || variant === "inset"
            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
        )}
      />
      <div
        data-slot="sidebar-container"
        className={cn(
          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
          side === "left"
            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
          // Adjust the padding for floating and inset variants.
          variant === "floating" || variant === "inset"
            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
          className
        )}
        {...props}
      >
        <div
          data-sidebar="sidebar"
          data-slot="sidebar-inner"
          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
        >
          {children}
        </div>
      </div>
    </div>
  )
}

function SidebarTrigger({
  className,
  onClick,
  ...props
}: React.ComponentProps<typeof Button>) {
  const { toggleSidebar } = useSidebar()

  return (
    <Button
      data-sidebar="trigger"
      data-slot="sidebar-trigger"
      variant="ghost"
      size="icon"
      className={cn("size-7", className)}
      onClick={(event) => {
        onClick?.(event)
        toggleSidebar()
      }}
      {...props}
    >
      <PanelLeftIcon />
      <span className="sr-only">Toggle Sidebar</span>
    </Button>
  )
}

function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
  const { toggleSidebar } = useSidebar()

  return (
    <button
      data-sidebar="rail"
      data-slot="sidebar-rail"
      aria-label="Toggle Sidebar"
      tabIndex={-1}
      onClick={toggleSidebar}
      title="Toggle Sidebar"
      className={cn(
        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
        className
      )}
      {...props}
    />
  )
}

function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
  return (
    <main
      data-slot="sidebar-inset"
      className={cn(
        "bg-background relative flex w-full flex-1 flex-col",
        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
        className
      )}
      {...props}
    />
  )
}

function SidebarInput({
  className,
  ...props
}: React.ComponentProps<typeof Input>) {
  return (
    <Input
      data-slot="sidebar-input"
      data-sidebar="input"
      className={cn("bg-background h-8 w-full shadow-none", className)}
      {...props}
    />
  )
}

function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sidebar-header"
      data-sidebar="header"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
  )
}

function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sidebar-footer"
      data-sidebar="footer"
      className={cn("flex flex-col gap-2 p-2", className)}
      {...props}
    />
  )
}

function SidebarSeparator({
  className,
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="sidebar-separator"
      data-sidebar="separator"
      className={cn("bg-sidebar-border mx-2 w-auto", className)}
      {...props}
    />
  )
}

function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sidebar-content"
      data-sidebar="content"
      className={cn(
        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
        className
      )}
      {...props}
    />
  )
}

function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sidebar-group"
      data-sidebar="group"
      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
      {...props}
    />
  )
}

function SidebarGroupLabel({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<"div"> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : "div"

  return (
    <Comp
      data-slot="sidebar-group-label"
      data-sidebar="group-label"
      className={cn(
        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
        className
      )}
      {...props}
    />
  )
}

function SidebarGroupAction({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<"button"> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : "button"

  return (
    <Comp
      data-slot="sidebar-group-action"
      data-sidebar="group-action"
      className={cn(
        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 md:after:hidden",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props}
    />
  )
}

function SidebarGroupContent({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sidebar-group-content"
      data-sidebar="group-content"
      className={cn("w-full text-sm", className)}
      {...props}
    />
  )
}

function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
  return (
    <ul
      data-slot="sidebar-menu"
      data-sidebar="menu"
      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
      {...props}
    />
  )
}

function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="sidebar-menu-item"
      data-sidebar="menu-item"
      className={cn("group/menu-item relative", className)}
      {...props}
    />
  )
}

const sidebarMenuButtonVariants = cva(
  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
        outline:
          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
      },
      size: {
        default: "h-8 text-sm",
        sm: "h-7 text-xs",
        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function SidebarMenuButton({
  asChild = false,
  isActive = false,
  variant = "default",
  size = "default",
  tooltip,
  className,
  ...props
}: React.ComponentProps<"button"> & {
  asChild?: boolean
  isActive?: boolean
  tooltip?: string | React.ComponentProps<typeof TooltipContent>
} & VariantProps<typeof sidebarMenuButtonVariants>) {
  const Comp = asChild ? Slot : "button"
  const { isMobile, state } = useSidebar()

  const button = (
    <Comp
      data-slot="sidebar-menu-button"
      data-sidebar="menu-button"
      data-size={size}
      data-active={isActive}
      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
      {...props}
    />
  )

  if (!tooltip) {
    return button
  }

  if (typeof tooltip === "string") {
    tooltip = {
      children: tooltip,
    }
  }

  return (
    <Tooltip>
      <TooltipTrigger asChild>{button}</TooltipTrigger>
      <TooltipContent
        side="right"
        align="center"
        hidden={state !== "collapsed" || isMobile}
        {...tooltip}
      />
    </Tooltip>
  )
}

function SidebarMenuAction({
  className,
  asChild = false,
  showOnHover = false,
  ...props
}: React.ComponentProps<"button"> & {
  asChild?: boolean
  showOnHover?: boolean
}) {
  const Comp = asChild ? Slot : "button"

  return (
    <Comp
      data-slot="sidebar-menu-action"
      data-sidebar="menu-action"
      className={cn(
        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
        // Increases the hit area of the button on mobile.
        "after:absolute after:-inset-2 md:after:hidden",
        "peer-data-[size=sm]/menu-button:top-1",
        "peer-data-[size=default]/menu-button:top-1.5",
        "peer-data-[size=lg]/menu-button:top-2.5",
        "group-data-[collapsible=icon]:hidden",
        showOnHover &&
          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
        className
      )}
      {...props}
    />
  )
}

function SidebarMenuBadge({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sidebar-menu-badge"
      data-sidebar="menu-badge"
      className={cn(
        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
        "peer-data-[size=sm]/menu-button:top-1",
        "peer-data-[size=default]/menu-button:top-1.5",
        "peer-data-[size=lg]/menu-button:top-2.5",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props}
    />
  )
}

function SidebarMenuSkeleton({
  className,
  showIcon = false,
  ...props
}: React.ComponentProps<"div"> & {
  showIcon?: boolean
}) {
  // Random width between 50 to 90%.
  const width = React.useMemo(() => {
    return `${Math.floor(Math.random() * 40) + 50}%`
  }, [])

  return (
    <div
      data-slot="sidebar-menu-skeleton"
      data-sidebar="menu-skeleton"
      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
      {...props}
    >
      {showIcon && (
        <Skeleton
          className="size-4 rounded-md"
          data-sidebar="menu-skeleton-icon"
        />
      )}
      <Skeleton
        className="h-4 max-w-(--skeleton-width) flex-1"
        data-sidebar="menu-skeleton-text"
        style={
          {
            "--skeleton-width": width,
          } as React.CSSProperties
        }
      />
    </div>
  )
}

function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
  return (
    <ul
      data-slot="sidebar-menu-sub"
      data-sidebar="menu-sub"
      className={cn(
        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props}
    />
  )
}

function SidebarMenuSubItem({
  className,
  ...props
}: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="sidebar-menu-sub-item"
      data-sidebar="menu-sub-item"
      className={cn("group/menu-sub-item relative", className)}
      {...props}
    />
  )
}

function SidebarMenuSubButton({
  asChild = false,
  size = "md",
  isActive = false,
  className,
  ...props
}: React.ComponentProps<"a"> & {
  asChild?: boolean
  size?: "sm" | "md"
  isActive?: boolean
}) {
  const Comp = asChild ? Slot : "a"

  return (
    <Comp
      data-slot="sidebar-menu-sub-button"
      data-sidebar="menu-sub-button"
      data-size={size}
      data-active={isActive}
      className={cn(
        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
        size === "sm" && "text-xs",
        size === "md" && "text-sm",
        "group-data-[collapsible=icon]:hidden",
        className
      )}
      {...props}
    />
  )
}

export {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  useSidebar,
}
```

```typescript
// hooks/use-mobile.ts
import * as React from "react"

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener("change", onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener("change", onChange)
  }, [])

  return !!isMobile
}
```

## Examples

### Application sidebar

A full app shell — branded header, a grouped nav menu, a user footer, and a `SidebarInset` content area with a toggle.

**Install:**

```bash
npx shadcn@latest add @designrevision/sidebar-demo-01
```

**Dependencies:** lucide-react, sidebar, avatar

```tsx
// components/ui/sidebar-demo-01.tsx
import {
  CalendarIcon,
  HomeIcon,
  InboxIcon,
  SearchIcon,
  Settings2Icon,
} from "lucide-react"

import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"

const items = [
  { title: "Home", icon: HomeIcon, active: true },
  { title: "Inbox", icon: InboxIcon },
  { title: "Calendar", icon: CalendarIcon },
  { title: "Search", icon: SearchIcon },
  { title: "Settings", icon: Settings2Icon },
]

export default function SidebarDemo01() {
  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarHeader>
          <div className="flex items-center gap-2 px-2 py-1.5">
            <div className="bg-sidebar-primary text-sidebar-primary-foreground flex size-8 items-center justify-center rounded-md text-sm font-semibold">
              A
            </div>
            <div className="grid text-sm leading-tight">
              <span className="font-semibold">Acme Inc</span>
              <span className="text-muted-foreground text-xs">Free plan</span>
            </div>
          </div>
        </SidebarHeader>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Platform</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {items.map((item) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton isActive={item.active}>
                      <item.icon />
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
        <SidebarFooter>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton size="lg">
                <Avatar className="size-8">
                  <AvatarFallback>AL</AvatarFallback>
                </Avatar>
                <div className="grid text-sm leading-tight">
                  <span className="font-medium">Ada Lovelace</span>
                  <span className="text-muted-foreground text-xs">
                    ada@example.com
                  </span>
                </div>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarFooter>
      </Sidebar>
      <SidebarInset>
        <header className="flex h-12 items-center gap-2 border-b px-4">
          <SidebarTrigger className="-ml-1" />
          <span className="text-sm font-medium">Dashboard</span>
        </header>
        <div className="flex flex-1 flex-col gap-4 p-4">
          <div className="bg-muted/50 aspect-video rounded-xl" />
          <p className="text-muted-foreground text-sm">
            Your main content goes here.
          </p>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}
```

---

### Collapse to icons

`collapsible="icon"` shrinks the rail to icons; each `SidebarMenuButton` shows a tooltip on hover when collapsed.

**Install:**

```bash
npx shadcn@latest add @designrevision/sidebar-icon-01
```

**Dependencies:** lucide-react, sidebar

```tsx
// components/ui/sidebar-icon-01.tsx
import {
  CalendarIcon,
  GalleryVerticalEndIcon,
  HomeIcon,
  InboxIcon,
  SearchIcon,
  Settings2Icon,
} from "lucide-react"

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"

const items = [
  { title: "Home", icon: HomeIcon, active: true },
  { title: "Inbox", icon: InboxIcon },
  { title: "Calendar", icon: CalendarIcon },
  { title: "Search", icon: SearchIcon },
  { title: "Settings", icon: Settings2Icon },
]

export default function SidebarIcon01() {
  return (
    <SidebarProvider defaultOpen={false}>
      <Sidebar collapsible="icon">
        <SidebarHeader>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton size="lg" tooltip="Acme Inc">
                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
                  <GalleryVerticalEndIcon className="size-4" />
                </div>
                <div className="grid text-sm leading-tight">
                  <span className="font-semibold">Acme Inc</span>
                  <span className="text-muted-foreground text-xs">Enterprise</span>
                </div>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarHeader>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Platform</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {items.map((item) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton tooltip={item.title} isActive={item.active}>
                      <item.icon />
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <header className="flex h-12 items-center gap-2 border-b px-4">
          <SidebarTrigger className="-ml-1" />
          <span className="text-sm font-medium">
            Collapsed to icons — hover a button for its tooltip, or toggle to expand.
          </span>
        </header>
        <div className="flex flex-1 flex-col gap-4 p-4">
          <div className="bg-muted/50 aspect-video rounded-xl" />
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}
```

---

### Nested sub-menus

Expandable groups built from `SidebarMenuSub`, toggled by a `SidebarMenuAction` chevron.

**Install:**

```bash
npx shadcn@latest add @designrevision/sidebar-submenu-01
```

**Dependencies:** lucide-react, sidebar

```tsx
// components/ui/sidebar-submenu-01.tsx
"use client"

import * as React from "react"
import { ChevronRightIcon, FrameIcon, MapIcon, PieChartIcon } from "lucide-react"

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"

const nav = [
  {
    title: "Design Engineering",
    icon: FrameIcon,
    items: ["Overview", "Components", "Tokens"],
  },
  {
    title: "Sales & Marketing",
    icon: PieChartIcon,
    items: ["Campaigns", "Pipeline", "Reports"],
  },
  {
    title: "Travel",
    icon: MapIcon,
    items: ["Trips", "Expenses"],
  },
]

export default function SidebarSubmenu01() {
  const [open, setOpen] = React.useState<string | null>("Design Engineering")

  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Projects</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {nav.map((group) => {
                  const isOpen = open === group.title
                  return (
                    <SidebarMenuItem key={group.title}>
                      <SidebarMenuButton
                        onClick={() => setOpen(isOpen ? null : group.title)}
                      >
                        <group.icon />
                        <span>{group.title}</span>
                      </SidebarMenuButton>
                      <SidebarMenuAction
                        onClick={() => setOpen(isOpen ? null : group.title)}
                        data-state={isOpen ? "open" : "closed"}
                        className="transition-transform data-[state=open]:rotate-90"
                      >
                        <ChevronRightIcon />
                        <span className="sr-only">Toggle {group.title}</span>
                      </SidebarMenuAction>
                      {isOpen && (
                        <SidebarMenuSub>
                          {group.items.map((item) => (
                            <SidebarMenuSubItem key={item}>
                              <SidebarMenuSubButton href="#">
                                <span>{item}</span>
                              </SidebarMenuSubButton>
                            </SidebarMenuSubItem>
                          ))}
                        </SidebarMenuSub>
                      )}
                    </SidebarMenuItem>
                  )
                })}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <header className="flex h-12 items-center gap-2 border-b px-4">
          <SidebarTrigger className="-ml-1" />
          <span className="text-sm font-medium">Projects</span>
        </header>
        <div className="flex flex-1 flex-col gap-4 p-4">
          <div className="bg-muted/50 aspect-video rounded-xl" />
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}
```

---

### Inset & floating variants

`variant="inset"` floats the content in a rounded card; a `SidebarRail` lets you drag-toggle. One prop away from floating.

**Install:**

```bash
npx shadcn@latest add @designrevision/sidebar-variants-01
```

**Dependencies:** lucide-react, sidebar

```tsx
// components/ui/sidebar-variants-01.tsx
import {
  CalendarIcon,
  GalleryVerticalEndIcon,
  HomeIcon,
  InboxIcon,
  SearchIcon,
  Settings2Icon,
} from "lucide-react"

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
} from "@/components/ui/sidebar"

const items = [
  { title: "Home", icon: HomeIcon, active: true },
  { title: "Inbox", icon: InboxIcon },
  { title: "Calendar", icon: CalendarIcon },
  { title: "Search", icon: SearchIcon },
  { title: "Settings", icon: Settings2Icon },
]

export default function SidebarVariants01() {
  return (
    <SidebarProvider>
      <Sidebar variant="inset">
        <SidebarHeader>
          <div className="flex items-center gap-2 px-2 py-1.5">
            <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
              <GalleryVerticalEndIcon className="size-4" />
            </div>
            <div className="grid text-sm leading-tight">
              <span className="font-semibold">Acme Inc</span>
              <span className="text-muted-foreground text-xs">Enterprise</span>
            </div>
          </div>
        </SidebarHeader>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Platform</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {items.map((item) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton isActive={item.active}>
                      <item.icon />
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
        <SidebarRail />
      </Sidebar>
      <SidebarInset>
        <header className="flex h-12 items-center gap-2 px-4">
          <SidebarTrigger className="-ml-1" />
          <span className="text-sm font-medium">
            Inset variant — swap to variant=&quot;floating&quot; for a detached card.
          </span>
        </header>
        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
          <div className="bg-muted/50 min-h-[200px] flex-1 rounded-xl" />
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}
```

---

### Right-side sidebar

`side="right"` anchors the sidebar to the opposite edge — a secondary panel like notifications, with badge counts.

**Install:**

```bash
npx shadcn@latest add @designrevision/sidebar-right-01
```

**Dependencies:** lucide-react, sidebar

```tsx
// components/ui/sidebar-right-01.tsx
import {
  BellIcon,
  GitPullRequestIcon,
  HeartIcon,
  MessageSquareIcon,
  UserPlusIcon,
} from "lucide-react"

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"

const items = [
  { title: "Mentions", icon: BellIcon, count: "3" },
  { title: "Replies", icon: MessageSquareIcon, count: "8" },
  { title: "Pull requests", icon: GitPullRequestIcon, count: "2" },
  { title: "New followers", icon: UserPlusIcon },
  { title: "Reactions", icon: HeartIcon },
]

export default function SidebarRight01() {
  return (
    <SidebarProvider>
      <SidebarInset>
        <header className="flex h-12 items-center justify-between border-b px-4">
          <span className="text-sm font-medium">Main content</span>
          <SidebarTrigger className="-mr-1 rotate-180" />
        </header>
        <div className="flex flex-1 flex-col gap-4 p-4">
          <div className="bg-muted/50 aspect-video rounded-xl" />
        </div>
      </SidebarInset>
      <Sidebar side="right">
        <SidebarHeader className="border-b">
          <div className="px-2 py-1.5 text-sm font-semibold">Notifications</div>
        </SidebarHeader>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupContent>
              <SidebarMenu>
                {items.map((item) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton>
                      <item.icon />
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                    {item.count && <SidebarMenuBadge>{item.count}</SidebarMenuBadge>}
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
    </SidebarProvider>
  )
}
```

---

# Shadcn Skeleton

> Free shadcn/ui skeleton loader for React — build any loading skeleton (card, list, table, article, dashboard, form, profile) from one primitive, with no extra dependency. Default pulse plus a shimmer variant.

Source: https://designrevision.com/components/skeleton

The **Shadcn Skeleton** is the simplest component on the site and one of the most useful: a single `<div>` placeholder you compose into any **loading skeleton** — card, list, table, article, dashboard, form, or profile. There is **no dependency** (you do not need `react-loading-skeleton`), and you control every piece with Tailwind. The examples below are drop-in loading states for the layouts you build most.

## What is a skeleton screen?

A **skeleton screen** shows the *shape* of your content — boxes where images go, bars where text goes — while the real data loads. Compared with a blank page or a spinner, it:

- sets the **layout immediately**, so nothing jumps when content arrives,
- communicates *what* is loading, not just *that* something is,
- makes the wait feel shorter.

## One primitive, every layout

The component itself is trivial:

```tsx
function Skeleton({ className, ...props }) {
  return (
    <div
      className={cn("bg-accent animate-pulse rounded-md", className)}
      {...props}
    />
  )
}
```

You build everything by **sizing and shaping** that div with a `className`:

```tsx
<div className="flex items-center space-x-4">
  <Skeleton className="size-12 rounded-full" />   {/* avatar */}
  <div className="space-y-2">
    <Skeleton className="h-4 w-[250px]" />          {/* line */}
    <Skeleton className="h-4 w-[200px]" />          {/* line */}
  </div>
</div>
```

`rounded-full` for avatars, `rounded-md` for bars and blocks; `h-*`/`w-*`/`size-*` to match the real element. That is the whole technique — the nine examples here just apply it at different scales.

## Show it while loading

Render the skeleton until your data is ready, then swap in the real UI:

```tsx
{isLoading ? <CardSkeleton /> : <Card data={data} />}
```

The key to a skeleton that doesn't cause layout shift: **mirror the real layout** — the same spacing, the same number of lines, the same image aspect ratio — so the placeholder and the final content occupy the same space.

## No extra dependency

`react-loading-skeleton` is a popular package, but you don't need it here. The shadcn Skeleton is one div you already have after adding the component — zero dependencies, full Tailwind control, and it themes with your tokens. If you want that library's signature **shimmer**, use the variant below.

## Pulse vs shimmer

The default animation is **`animate-pulse`** — a gentle fade. For a **shimmer** (a highlight that sweeps across), swap the pulse for a moving gradient. This page adds a small utility:

```css
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-shimmer {
  background-image: linear-gradient(90deg, var(--muted) 25%, var(--accent) 37%, var(--muted) 63%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}
```

Apply `skeleton-shimmer` to a sized div instead of the pulse Skeleton — the Shimmer variant example shows it on a card.

## Skeleton vs spinner

Reach for a **skeleton** when you know the shape of what's loading (cards, lists, tables) — it reserves the layout and reads as faster. Reach for a **spinner** for short, shapeless waits (a submit, a quick toggle). For content-heavy pages, skeleton screens are the better default.

## Accessibility

A skeleton is decorative, so announce loading at the **region** level rather than per bar: set `aria-busy="true"` on the loading container, and use `aria-live="polite"` if it's a live region so the change to real content is announced. The placeholder bars carry no text and should not be read out individually.

## Installation

### skeleton

**Install:**

```bash
npx shadcn@latest add @designrevision/skeleton
```

**Dependencies:** utils

**Usage & accessibility:** A loading placeholder — a div with bg-accent animate-pulse rounded-md, no dependency. Size it with a className (h-4 w-32, size-10, etc.) to stand in for the content while it loads.

```tsx
// components/ui/skeleton.tsx
import { cn } from "@/lib/utils"

function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="skeleton"
      className={cn("bg-accent animate-pulse rounded-md", className)}
      {...props}
    />
  )
}

export { Skeleton }
```

## Examples

### Card skeleton

The canonical skeleton — a circular avatar placeholder beside two text lines.

**Install:**

```bash
npx shadcn@latest add @designrevision/skeleton-demo-01
```

**Dependencies:** skeleton

```tsx
// components/ui/skeleton-demo-01.tsx
import { Skeleton } from "@/components/ui/skeleton"

export default function SkeletonDemo01() {
  return (
    <div className="flex items-center space-x-4">
      <Skeleton className="size-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}
```

---

### Content card

A media card placeholder — image block, title and body lines, and a footer with a button and avatar.

**Install:**

```bash
npx shadcn@latest add @designrevision/skeleton-card-01
```

**Dependencies:** skeleton

```tsx
// components/ui/skeleton-card-01.tsx
import { Skeleton } from "@/components/ui/skeleton"

export default function SkeletonCard01() {
  return (
    <div className="w-full max-w-sm rounded-lg border p-4">
      <Skeleton className="aspect-video w-full rounded-md" />
      <div className="mt-4 space-y-2">
        <Skeleton className="h-4 w-3/4" />
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-2/3" />
      </div>
      <div className="mt-4 flex items-center justify-between">
        <Skeleton className="h-8 w-20 rounded-md" />
        <Skeleton className="size-8 rounded-full" />
      </div>
    </div>
  )
}
```

---

### List / feed

A repeating row placeholder — avatar plus two lines — the loading state for feeds and comment lists.

**Install:**

```bash
npx shadcn@latest add @designrevision/skeleton-list-01
```

**Dependencies:** skeleton

```tsx
// components/ui/skeleton-list-01.tsx
import { Skeleton } from "@/components/ui/skeleton"

export default function SkeletonList01() {
  return (
    <div className="w-full max-w-sm space-y-4">
      {Array.from({ length: 5 }).map((_, i) => (
        <div key={i} className="flex items-center gap-3">
          <Skeleton className="size-10 shrink-0 rounded-full" />
          <div className="flex-1 space-y-2">
            <Skeleton className="h-3.5 w-1/2" />
            <Skeleton className="h-3.5 w-4/5" />
          </div>
        </div>
      ))}
    </div>
  )
}
```

---

### Table

A table placeholder — a header row and a grid of cell bars from rows × columns.

**Install:**

```bash
npx shadcn@latest add @designrevision/skeleton-table-01
```

**Dependencies:** skeleton

```tsx
// components/ui/skeleton-table-01.tsx
import { Skeleton } from "@/components/ui/skeleton"

const ROWS = 5
const COLS = 4

export default function SkeletonTable01() {
  return (
    <div className="w-full max-w-md overflow-hidden rounded-md border">
      <div className="bg-muted/50 flex gap-4 border-b px-4 py-3">
        {Array.from({ length: COLS }).map((_, i) => (
          <Skeleton key={i} className="h-4 flex-1" />
        ))}
      </div>
      <div className="divide-y">
        {Array.from({ length: ROWS }).map((_, r) => (
          <div key={r} className="flex gap-4 px-4 py-3">
            {Array.from({ length: COLS }).map((_, c) => (
              <Skeleton key={c} className="h-4 flex-1" />
            ))}
          </div>
        ))}
      </div>
    </div>
  )
}
```

---

### Article

A long-form placeholder — heading, byline, paragraph lines, and an inline image block.

**Install:**

```bash
npx shadcn@latest add @designrevision/skeleton-article-01
```

**Dependencies:** skeleton

```tsx
// components/ui/skeleton-article-01.tsx
import { Skeleton } from "@/components/ui/skeleton"

export default function SkeletonArticle01() {
  return (
    <div className="w-full max-w-md space-y-4">
      <Skeleton className="h-8 w-3/4" />
      <div className="flex items-center gap-2">
        <Skeleton className="size-6 rounded-full" />
        <Skeleton className="h-3 w-28" />
      </div>
      <div className="space-y-2">
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-5/6" />
      </div>
      <Skeleton className="aspect-video w-full rounded-lg" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-11/12" />
        <Skeleton className="h-4 w-2/3" />
      </div>
    </div>
  )
}
```

---

### Dashboard

A dashboard placeholder — a grid of stat cards above a chart block.

**Install:**

```bash
npx shadcn@latest add @designrevision/skeleton-dashboard-01
```

**Dependencies:** skeleton

```tsx
// components/ui/skeleton-dashboard-01.tsx
import { Skeleton } from "@/components/ui/skeleton"

export default function SkeletonDashboard01() {
  return (
    <div className="w-full max-w-md space-y-4">
      <div className="grid grid-cols-2 gap-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <div key={i} className="space-y-2 rounded-lg border p-4">
            <Skeleton className="h-3 w-20" />
            <Skeleton className="h-7 w-24" />
            <Skeleton className="h-3 w-16" />
          </div>
        ))}
      </div>
      <div className="rounded-lg border p-4">
        <Skeleton className="h-3 w-28" />
        <Skeleton className="mt-4 h-40 w-full rounded-md" />
      </div>
    </div>
  )
}
```

---

### Form

A form placeholder — repeated label-and-input pairs plus a submit button.

**Install:**

```bash
npx shadcn@latest add @designrevision/skeleton-form-01
```

**Dependencies:** skeleton

```tsx
// components/ui/skeleton-form-01.tsx
import { Skeleton } from "@/components/ui/skeleton"

export default function SkeletonForm01() {
  return (
    <div className="w-full max-w-sm space-y-6">
      {Array.from({ length: 3 }).map((_, i) => (
        <div key={i} className="space-y-2">
          <Skeleton className="h-3.5 w-24" />
          <Skeleton className="h-9 w-full rounded-md" />
        </div>
      ))}
      <Skeleton className="h-9 w-full rounded-md" />
    </div>
  )
}
```

---

### Profile header

A profile header placeholder — large avatar with name and meta, a row of stat counters, and an action button.

**Install:**

```bash
npx shadcn@latest add @designrevision/skeleton-profile-01
```

**Dependencies:** skeleton

```tsx
// components/ui/skeleton-profile-01.tsx
import { Skeleton } from "@/components/ui/skeleton"

export default function SkeletonProfile01() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="flex items-center gap-4">
        <Skeleton className="size-16 shrink-0 rounded-full" />
        <div className="flex-1 space-y-2">
          <Skeleton className="h-5 w-32" />
          <Skeleton className="h-3.5 w-40" />
        </div>
      </div>
      <div className="flex gap-6">
        {Array.from({ length: 3 }).map((_, i) => (
          <div key={i} className="space-y-1.5">
            <Skeleton className="h-5 w-12" />
            <Skeleton className="h-3 w-14" />
          </div>
        ))}
      </div>
      <Skeleton className="h-9 w-full rounded-md" />
    </div>
  )
}
```

---

### Shimmer variant

Swaps the default `animate-pulse` for a gradient sweep via a small `.skeleton-shimmer` utility.

**Install:**

```bash
npx shadcn@latest add @designrevision/skeleton-shimmer-01
```

**Dependencies:** skeleton

```tsx
// components/ui/skeleton-shimmer-01.tsx
import { cn } from "@/lib/utils"

// A shimmer skeleton swaps the default `animate-pulse` for a gradient sweep.
// The `.skeleton-shimmer` utility lives in globals.css.
function Shimmer({ className }: { className?: string }) {
  return <div className={cn("skeleton-shimmer rounded-md", className)} />
}

export default function SkeletonShimmer01() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <Shimmer className="aspect-video w-full" />
      <div className="flex items-center space-x-4">
        <Shimmer className="size-12 rounded-full" />
        <div className="flex-1 space-y-2">
          <Shimmer className="h-4 w-3/4" />
          <Shimmer className="h-4 w-1/2" />
        </div>
      </div>
    </div>
  )
}
```

---

# Shadcn Slider

> Free shadcn/ui slider component for React — built on Radix. A draggable range input: a single thumb, a two-thumb range, a value label, stepped ticks, and a volume control.

Source: https://designrevision.com/components/slider

The **Shadcn Slider** is a draggable **range input** for React, built on <a href="https://www.radix-ui.com/primitives/docs/components/slider" rel="nofollow">Radix</a>. Drag a thumb along the track to pick a value — or add a second thumb for a min/max range. Radix handles the dragging, keyboard, and ARIA; the shadcn styling gives you the track, range, and thumb. The examples below cover a basic slider, a price range, a value label, a stepped scale, and a volume control.

## The shape

```tsx
<Slider defaultValue={[50]} min={0} max={100} step={1} />
```

The value is always an **array** — one entry per thumb. A single-element array is a normal slider; a two-element array is a range.

## Range slider

Pass two values and Radix renders two thumbs:

```tsx
<Slider defaultValue={[200, 800]} min={0} max={1000} step={10} />
```

Read both ends back from `onValueChange`, which fires with the full array on every drag.

## Reading the value

Control it to show or sync the value:

```tsx
const [value, setValue] = React.useState([50])

<Slider value={value} onValueChange={setValue} />
<span>{value[0]}</span>
```

For a form that only needs the value on submit, use `defaultValue` and read it from the field instead.

## Steps and scale

`step` snaps the thumb; `min` and `max` bound it:

```tsx
<Slider min={0} max={100} step={20} />
```

For a labelled scale, render your own tick marks below the track and space them to line up with the steps — the **Stepped with ticks** example shows the pattern.

## Common patterns

- **Price range** — a two-thumb range with a `$min – $max` readout (the Range example).
- **Brightness / opacity** — a single value with a live percentage (the Value label example).
- **Volume** — a slider between mute and volume icons (the Volume control example).

## Accessibility

Each thumb is focusable and driven by the keyboard: Arrow keys step, Page Up / Page Down jump, and Home / End snap to min / max. Radix sets `role="slider"` with `aria-valuemin`, `aria-valuemax`, and `aria-valuenow`, so the value is announced. Add an `aria-label` (or a visible `<Label>`) so the control's purpose is clear.

## Installation

### slider

**Install:**

```bash
npx shadcn@latest add @designrevision/slider
```

**Dependencies:** @radix-ui/react-slider, utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| defaultValue / value | number[] | [min, max] | Thumb positions. One number = one thumb; two = a range slider. |
| min / max / step | number | 0 / 100 / 1 | Range bounds and increment. |
| orientation | "horizontal" \| "vertical" | "horizontal" | Slider direction. |

**Usage & accessibility:** A Radix slider. Pass an array to value / defaultValue — one number renders a single thumb, two render a range slider. Set min, max, step for the scale and onValueChange to read it. Works horizontally or vertically (orientation="vertical" needs a height).

```tsx
// components/ui/slider.tsx
"use client"

import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"

import { cn } from "@/lib/utils"

function Slider({
  className,
  defaultValue,
  value,
  min = 0,
  max = 100,
  ...props
}: React.ComponentProps<typeof SliderPrimitive.Root>) {
  const _values = React.useMemo(
    () =>
      Array.isArray(value)
        ? value
        : Array.isArray(defaultValue)
          ? defaultValue
          : [min, max],
    [value, defaultValue, min, max]
  )

  return (
    <SliderPrimitive.Root
      data-slot="slider"
      defaultValue={defaultValue}
      value={value}
      min={min}
      max={max}
      className={cn(
        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
        className
      )}
      {...props}
    >
      <SliderPrimitive.Track
        data-slot="slider-track"
        className={cn(
          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
        )}
      >
        <SliderPrimitive.Range
          data-slot="slider-range"
          className={cn(
            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
          )}
        />
      </SliderPrimitive.Track>
      {Array.from({ length: _values.length }, (_, index) => (
        <SliderPrimitive.Thumb
          data-slot="slider-thumb"
          key={index}
          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
        />
      ))}
    </SliderPrimitive.Root>
  )
}

export { Slider }
```

## Examples

### Basic

The canonical single-thumb slider — drag to pick one value.

**Install:**

```bash
npx shadcn@latest add @designrevision/slider-demo-01
```

**Dependencies:** slider

```tsx
// components/ui/slider-demo-01.tsx
import { Slider } from "@/components/ui/slider"

export default function SliderDemo01() {
  return (
    <Slider
      defaultValue={[50]}
      max={100}
      step={1}
      className="w-full max-w-sm"
    />
  )
}
```

---

### Range

Two thumbs select a min and max, with a live price readout.

**Install:**

```bash
npx shadcn@latest add @designrevision/slider-range-01
```

**Dependencies:** slider

```tsx
// components/ui/slider-range-01.tsx
"use client"

import * as React from "react"

import { Slider } from "@/components/ui/slider"

export default function SliderRange01() {
  const [value, setValue] = React.useState([200, 800])

  return (
    <div className="w-full max-w-sm space-y-3">
      <div className="flex items-center justify-between text-sm">
        <span className="text-muted-foreground">Price range</span>
        <span className="font-medium tabular-nums">
          ${value[0]} – ${value[1]}
        </span>
      </div>
      <Slider
        value={value}
        onValueChange={setValue}
        min={0}
        max={1000}
        step={10}
      />
    </div>
  )
}
```

---

### With value label

A controlled slider that shows its current value beside a label.

**Install:**

```bash
npx shadcn@latest add @designrevision/slider-value-01
```

**Dependencies:** slider, label

```tsx
// components/ui/slider-value-01.tsx
"use client"

import * as React from "react"

import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"

export default function SliderValue01() {
  const [value, setValue] = React.useState([33])

  return (
    <div className="w-full max-w-sm space-y-3">
      <div className="flex items-center justify-between">
        <Label>Brightness</Label>
        <span className="text-sm font-medium tabular-nums">{value[0]}%</span>
      </div>
      <Slider value={value} onValueChange={setValue} max={100} step={1} />
    </div>
  )
}
```

---

### Stepped with ticks

Snaps to fixed steps, with tick labels marked below the track.

**Install:**

```bash
npx shadcn@latest add @designrevision/slider-steps-01
```

**Dependencies:** slider

```tsx
// components/ui/slider-steps-01.tsx
import { Slider } from "@/components/ui/slider"

const ticks = [0, 20, 40, 60, 80, 100]

export default function SliderSteps01() {
  return (
    <div className="w-full max-w-sm space-y-3">
      <Slider defaultValue={[40]} max={100} step={20} />
      <div className="text-muted-foreground flex justify-between text-xs tabular-nums">
        {ticks.map((tick) => (
          <span key={tick}>{tick}</span>
        ))}
      </div>
    </div>
  )
}
```

---

### Volume control

A slider flanked by mute and volume icons — the media-control pattern.

**Install:**

```bash
npx shadcn@latest add @designrevision/slider-volume-01
```

**Dependencies:** lucide-react, slider

```tsx
// components/ui/slider-volume-01.tsx
"use client"

import * as React from "react"
import { Volume2, VolumeX } from "lucide-react"

import { Slider } from "@/components/ui/slider"

export default function SliderVolume01() {
  const [volume, setVolume] = React.useState([60])

  return (
    <div className="flex w-full max-w-sm items-center gap-3">
      <VolumeX className="text-muted-foreground size-4 shrink-0" />
      <Slider
        value={volume}
        onValueChange={setVolume}
        max={100}
        step={1}
        aria-label="Volume"
      />
      <Volume2 className="text-muted-foreground size-4 shrink-0" />
    </div>
  )
}
```

---

# Shadcn Sonner (Toast)

> Free shadcn/ui toast component for React — built on Sonner. Success/error/info/warning, descriptions, action buttons, promise (loading→success/error), rich colors, and fully custom toasts. The toast that replaced the deprecated shadcn Toast.

Source: https://designrevision.com/components/sonner

The **Shadcn Sonner** is the toast — built on <a href="https://sonner.emilkowal.ski/" rel="nofollow">**Sonner**</a>, the toast library by Emil Kowalski. shadcn **deprecated its old Toast** component in favour of Sonner, so this is the current, recommended way to show toasts. The examples below cover the whole `toast()` API: types, descriptions, actions, promises, rich colors, and custom toasts.

## Built on Sonner

The shadcn layer is a thin `<Toaster />` wrapper over <a href="https://sonner.emilkowal.ski/" rel="nofollow">Sonner</a> that themes it to your design tokens (via CSS variables) and follows your light/dark theme. Install it:

```bash
npm install sonner
```

(The shadcn component also pulls in `next-themes` for theme detection; it falls back to the system theme if you don't use a theme provider.)

## Mount the Toaster once

Sonner is **API-driven**: you mount one `<Toaster />` near the **root** of your app — typically in `app/layout.tsx` — and then call `toast()` from anywhere:

```tsx
// app/layout.tsx
<body>
  {children}
  <Toaster />
</body>
```

The examples on this page each render their own `Toaster` so they work standalone, but your app needs only one.

## The toast() API

Call `toast` from `"sonner"`:

- **Basic** — `toast("Event has been created", { description: "…" })`.
- **Types** — `toast.success(...)`, `toast.error(...)`, `toast.info(...)`, `toast.warning(...)` (the Types example).
- **Action** — `toast("Moved to trash", { action: { label: "Undo", onClick } })` (the With action example).
- **Promise** — `toast.promise(p, { loading, success, error })` swaps a loading toast for success or error when the promise settles (the Promise example).
- **Custom** — `toast.custom((id) => <YourJSX />)` for a fully custom toast (the Custom JSX example).

## Configuring the Toaster

Options that affect the **whole stack** go on `<Toaster />`, not individual toasts:

```tsx
<Toaster position="top-center" richColors closeButton duration={4000} />
```

`position` moves the stack, `richColors` gives each type a colored surface, `closeButton` adds an X, and `duration` controls how long toasts persist. The Rich colors & close example shows `richColors` + `closeButton`.

## Migrating from the old Toast

If you used shadcn's old `useToast()` / `<Toast>` API, Sonner replaces it: drop the `<ToastProvider>` and `<Toaster />` from `@/components/ui/toast`, mount the Sonner `<Toaster />`, and replace `toast({ title, description })` calls with `toast(title, { description })`. It's less boilerplate and the same idea.

## Accessibility & theming

Sonner manages focus, screen-reader announcements (toasts are announced politely), and keyboard dismissal. Because it's a notification surface, keep messages short and don't put the only copy of critical information in a toast. The toast reads your design tokens — the wrapper maps Sonner's `--normal-bg` / `--normal-text` / `--normal-border` to `--popover` / `--popover-foreground` / `--border` — so it follows your theme, including dark mode, with no overrides.

## Installation

### sonner

**Install:**

```bash
npx shadcn@latest add @designrevision/sonner
```

**Dependencies:** sonner, next-themes, utils

**Usage & accessibility:** The shadcn toast — a <Toaster /> wrapper over Sonner (the toast library by emilkowalski), themed to your design tokens via CSS vars. It is API-driven: mount <Toaster /> once near the root of your app, then call toast(), toast.success(), toast.error(), toast.promise(), or toast.custom() from anywhere. Toaster props (position, richColors, closeButton, duration) configure the stack. Needs next-themes for theme detection; it falls back to "system" without a ThemeProvider.

```tsx
// components/ui/sonner.tsx
"use client"

import { useTheme } from "next-themes"
import { Toaster as Sonner, ToasterProps } from "sonner"

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

  return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      style={
        {
          "--normal-bg": "var(--popover)",
          "--normal-text": "var(--popover-foreground)",
          "--normal-border": "var(--border)",
        } as React.CSSProperties
      }
      {...props}
    />
  )
}

export { Toaster }
```

## Examples

### Sonner

The canonical toast — a button that calls `toast()` with a title and a description.

**Install:**

```bash
npx shadcn@latest add @designrevision/sonner-demo-01
```

**Dependencies:** sonner, button

```tsx
// components/ui/sonner-demo-01.tsx
"use client"

import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import { Toaster } from "@/components/ui/sonner"

export default function SonnerDemo01() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button
        variant="outline"
        onClick={() =>
          toast("Event has been created", {
            description: "Sunday, December 3, 2025 at 9:00 AM",
          })
        }
      >
        Show toast
      </Button>
      {/* Mount <Toaster /> once near the root of your app — shown here per example. */}
      <Toaster />
    </div>
  )
}
```

---

### Types

Success, error, info, and warning toasts via `toast.success` / `.error` / `.info` / `.warning`.

**Install:**

```bash
npx shadcn@latest add @designrevision/sonner-types-01
```

**Dependencies:** sonner, button

```tsx
// components/ui/sonner-types-01.tsx
"use client"

import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import { Toaster } from "@/components/ui/sonner"

export default function SonnerTypes01() {
  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Button
          variant="outline"
          size="sm"
          onClick={() => toast.success("Changes saved")}
        >
          Success
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => toast.error("Something went wrong")}
        >
          Error
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => toast.info("A new update is available")}
        >
          Info
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => toast.warning("Your trial ends in 3 days")}
        >
          Warning
        </Button>
      </div>
      <Toaster />
    </div>
  )
}
```

---

### With description

A toast with a title and a secondary description line.

**Install:**

```bash
npx shadcn@latest add @designrevision/sonner-description-01
```

**Dependencies:** sonner, button

```tsx
// components/ui/sonner-description-01.tsx
"use client"

import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import { Toaster } from "@/components/ui/sonner"

export default function SonnerDescription01() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button
        variant="outline"
        onClick={() =>
          toast.success("Payment received", {
            description: "We've emailed a receipt to ada@example.com.",
          })
        }
      >
        Show toast
      </Button>
      <Toaster />
    </div>
  )
}
```

---

### With action

A toast with an **Undo** action button and a dismiss — the classic undo pattern.

**Install:**

```bash
npx shadcn@latest add @designrevision/sonner-action-01
```

**Dependencies:** sonner, button

```tsx
// components/ui/sonner-action-01.tsx
"use client"

import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import { Toaster } from "@/components/ui/sonner"

export default function SonnerAction01() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button
        variant="outline"
        onClick={() =>
          toast("File moved to trash", {
            action: {
              label: "Undo",
              onClick: () => toast.success("File restored"),
            },
            cancel: {
              label: "Dismiss",
              onClick: () => {},
            },
          })
        }
      >
        Show toast
      </Button>
      <Toaster />
    </div>
  )
}
```

---

### Promise

`toast.promise` ties a toast to an async request — loading, then success or error.

**Install:**

```bash
npx shadcn@latest add @designrevision/sonner-promise-01
```

**Dependencies:** sonner, button

```tsx
// components/ui/sonner-promise-01.tsx
"use client"

import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import { Toaster } from "@/components/ui/sonner"

function uploadFile() {
  return new Promise<{ name: string }>((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.3) {
        resolve({ name: "report.pdf" })
      } else {
        reject(new Error("Network error"))
      }
    }, 1500)
  })
}

export default function SonnerPromise01() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button
        variant="outline"
        onClick={() =>
          toast.promise(uploadFile(), {
            loading: "Uploading…",
            success: (data) => `${data.name} uploaded`,
            error: "Upload failed — please try again",
          })
        }
      >
        Show toast
      </Button>
      <Toaster />
    </div>
  )
}
```

---

### Rich colors & close

A `<Toaster richColors closeButton>` — colored type surfaces with a close button.

**Install:**

```bash
npx shadcn@latest add @designrevision/sonner-rich-01
```

**Dependencies:** sonner, button

```tsx
// components/ui/sonner-rich-01.tsx
"use client"

import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import { Toaster } from "@/components/ui/sonner"

export default function SonnerRich01() {
  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Button
          variant="outline"
          size="sm"
          onClick={() => toast.success("Profile updated")}
        >
          Success
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => toast.error("Card declined")}
        >
          Error
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => toast.warning("Storage almost full")}
        >
          Warning
        </Button>
      </div>
      {/* richColors gives each type a colored surface; closeButton adds an X. */}
      <Toaster richColors closeButton />
    </div>
  )
}
```

---

### Custom JSX

`toast.custom` renders fully custom content — your own icon, layout, and dismiss button.

**Install:**

```bash
npx shadcn@latest add @designrevision/sonner-custom-01
```

**Dependencies:** lucide-react, sonner, button

```tsx
// components/ui/sonner-custom-01.tsx
"use client"

import { CheckCircle2Icon } from "lucide-react"
import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import { Toaster } from "@/components/ui/sonner"

export default function SonnerCustom01() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button
        variant="outline"
        onClick={() =>
          toast.custom((id) => (
            <div className="bg-popover text-popover-foreground flex w-[340px] items-center gap-3 rounded-md border p-4 shadow-lg">
              <CheckCircle2Icon className="size-5 shrink-0 text-emerald-500" />
              <div className="flex-1">
                <p className="text-sm font-medium">Backup complete</p>
                <p className="text-muted-foreground text-xs">
                  Your workspace was backed up to the cloud.
                </p>
              </div>
              <Button
                variant="ghost"
                size="sm"
                className="-mr-1 h-7"
                onClick={() => toast.dismiss(id)}
              >
                Close
              </Button>
            </div>
          ))
        }
      >
        Show toast
      </Button>
      <Toaster />
    </div>
  )
}
```

---

# Shadcn Sparkline

> Free shadcn/ui sparkline for React — tiny inline charts for KPI cards and tables, built on Recharts and themed with CSS variables. Line, area, and bar sparklines, a stat-card grid, table-embedded trends, an interactive tooltip, plus loading and accessible variants.

Source: https://designrevision.com/components/sparkline

A **Shadcn Sparkline** is a tiny, axis-free chart shown **inline** — inside a KPI card, beside a metric, or in a table cell — to show a trend at a glance. It's built on the same [chart](/components/chart) primitive (Recharts + the `--chart` CSS variables), just stripped down: no grid, no axes, no legend. Sparklines are everywhere in dashboards yet under-served by component libraries — these are native-shadcn and dark-mode-ready.

## A sparkline is a minimal chart

Take any chart, drop the grid and axes, hide the dots, and shrink it:

```tsx
const chartConfig = {
  value: { label: "Revenue", color: "var(--chart-1)" },
} satisfies ChartConfig

<ChartContainer config={chartConfig} className="h-[60px] w-full">
  <LineChart data={chartData} margin={{ top: 4, right: 0, left: 0, bottom: 0 }}>
    <Line dataKey="value" type="monotone" stroke="var(--color-value)" strokeWidth={2} dot={false} />
  </LineChart>
</ChartContainer>
```

Swap `LineChart`/`Line` for `AreaChart`/`Area` (add a gradient) or `BarChart`/`Bar` for the area and bar variants.

## In a KPI card

The most common use — a label, a big number, a trend, and the sparkline:

```tsx
<Card>
  <CardHeader>
    <CardDescription>Revenue</CardDescription>
    <CardTitle className="text-3xl tabular-nums">$45,231</CardTitle>
    <div className="text-emerald-600 text-xs">+20.1% this month</div>
  </CardHeader>
  <CardContent>{/* sparkline */}</CardContent>
</Card>
```

The **Stat-card grid** example tiles four of these for a dashboard overview.

## In a table

Drop a small `ChartContainer` (`h-[32px] w-[100px]`) into a cell for a **trend column** — one dot-less line per row. The **In a table** example pairs it with revenue and change columns.

## Interactive

Sparklines are usually static, but you can add a hidden `XAxis` and a `ChartTooltip` so hovering reveals per-point values without growing the chart (the **Interactive** example).

## Accessibility

A sparkline is **decorative** — the number and trend text carry the meaning. Mark the chart `aria-hidden="true"` and make sure the value and a short trend sentence are real, readable text (the **Accessible** example).

See **[Shadcn Charts](/components/chart)** for the full charting system and the standalone chart types.

## Installation

### chart

**Install:**

```bash
npx shadcn@latest add @designrevision/chart
```

**Dependencies:** recharts, utils, card

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| config * | ChartConfig | — | Maps each data key to { label, icon?, color }. Colors become --color-<key> CSS vars. |
| children * | React.ReactElement (a Recharts chart) | — | A single Recharts chart (BarChart, LineChart, …) — ChartContainer wraps it in a ResponsiveContainer. |

`*` required.

**Usage & accessibility:** A Recharts wrapper themed with CSS variables. Pass a `config` (ChartConfig: each data key → { label, icon?, color }) to <ChartContainer>; it injects --color-<key> vars (scoped per light/dark theme) that your Recharts series reference as fill="var(--color-desktop)". Use <ChartTooltip content={<ChartTooltipContent />}> and <ChartLegend content={<ChartLegendContent />}> for themed tooltips/legends. Colors default to the --chart-1..5 tokens, which re-theme automatically in dark mode. The container needs a height — keep aspect-video / min-h-* or ResponsiveContainer measures 0. This is the base primitive; the Bar/Line/Area/Pie/Radar/Radial chart pages compose it.

```tsx
// components/ui/chart.tsx
"use client"

import * as React from "react"
import * as RechartsPrimitive from "recharts"

import { cn } from "@/lib/utils"

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

  if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

  return context
}

function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
}: React.ComponentProps<"div"> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >["children"]
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`

  return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <RechartsPrimitive.ResponsiveContainer>
          {children}
        </RechartsPrimitive.ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme || config.color
  )

  if (!colorConfig.length) {
    return null
  }

  return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .map(
            ([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
  .map(([key, itemConfig]) => {
    const color =
      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
      itemConfig.color
    return color ? `  --color-${key}: ${color};` : null
  })
  .join("\n")}
}
`
          )
          .join("\n"),
      }}
    />
  )
}

const ChartTooltip = RechartsPrimitive.Tooltip

function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = "dot",
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<"div"> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    indicator?: "line" | "dot" | "dashed"
    nameKey?: string
    labelKey?: string
  }) {
  const { config } = useChart()

  const tooltipLabel = React.useMemo(() => {
    if (hideLabel || !payload?.length) {
      return null
    }

    const [item] = payload
    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
    const itemConfig = getPayloadConfigFromPayload(config, item, key)
    const value =
      !labelKey && typeof label === "string"
        ? config[label as keyof typeof config]?.label || label
        : itemConfig?.label

    if (labelFormatter) {
      return (
        <div className={cn("font-medium", labelClassName)}>
          {labelFormatter(value, payload)}
        </div>
      )
    }

    if (!value) {
      return null
    }

    return <div className={cn("font-medium", labelClassName)}>{value}</div>
  }, [
    label,
    labelFormatter,
    payload,
    hideLabel,
    labelClassName,
    config,
    labelKey,
  ])

  if (!active || !payload?.length) {
    return null
  }

  const nestLabel = payload.length === 1 && indicator !== "dot"

  return (
    <div
      className={cn(
        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
        className
      )}
    >
      {!nestLabel ? tooltipLabel : null}
      <div className="grid gap-1.5">
        {payload
          .filter((item) => item.type !== "none")
          .map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

            return (
              <div
                key={item.dataKey}
                className={cn(
                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                            {
                              "h-2.5 w-2.5": indicator === "dot",
                              "w-1": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? tooltipLabel : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="text-foreground font-mono font-medium tabular-nums">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
      </div>
    </div>
  )
}

const ChartLegend = RechartsPrimitive.Legend

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = "bottom",
  nameKey,
}: React.ComponentProps<"div"> &
  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
    hideIcon?: boolean
    nameKey?: string
  }) {
  const { config } = useChart()

  if (!payload?.length) {
    return null
  }

  return (
    <div
      className={cn(
        "flex items-center justify-center gap-4",
        verticalAlign === "top" ? "pb-3" : "pt-3",
        className
      )}
    >
      {payload
        .filter((item) => item.type !== "none")
        .map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

          return (
            <div
              key={item.value}
              className={cn(
                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
              )}
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="h-2 w-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
    </div>
  )
}

// Helper to extract item config from a payload.
function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

  const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

  let configLabelKey: string = key

  if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

  return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}
```

## Examples

### Line sparkline

A KPI card with an inline line sparkline — a metric, trend, and axis-free micro-chart.

**Install:**

```bash
npx shadcn@latest add @designrevision/sparkline-demo-01
```

**Dependencies:** recharts, lucide-react, chart, card

```tsx
// components/ui/sparkline-demo-01.tsx
"use client"

import { TrendingUp } from "lucide-react"
import { Line, LineChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { type ChartConfig, ChartContainer } from "@/components/ui/chart"

const chartData = [
  { i: 1, value: 220 },
  { i: 2, value: 260 },
  { i: 3, value: 240 },
  { i: 4, value: 310 },
  { i: 5, value: 280 },
  { i: 6, value: 360 },
  { i: 7, value: 330 },
  { i: 8, value: 400 },
  { i: 9, value: 380 },
  { i: 10, value: 460 },
  { i: 11, value: 440 },
  { i: 12, value: 520 },
]

const chartConfig = {
  value: { label: "Revenue", color: "var(--chart-1)" },
} satisfies ChartConfig

export default function SparklineDemo01() {
  return (
    <Card className="w-full max-w-xs">
      <CardHeader>
        <CardDescription>Revenue</CardDescription>
        <CardTitle className="text-3xl tabular-nums">$45,231</CardTitle>
        <div className="flex items-center gap-1 text-xs font-medium text-emerald-600 dark:text-emerald-400">
          <TrendingUp className="size-3.5" />
          +20.1% this month
        </div>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig} className="h-[60px] w-full">
          <LineChart
            data={chartData}
            margin={{ top: 4, right: 0, left: 0, bottom: 0 }}
          >
            <Line
              dataKey="value"
              type="monotone"
              stroke="var(--color-value)"
              strokeWidth={2}
              dot={false}
            />
          </LineChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Area sparkline

A KPI card with a gradient-filled area sparkline.

**Install:**

```bash
npx shadcn@latest add @designrevision/sparkline-area-01
```

**Dependencies:** recharts, lucide-react, chart, card

```tsx
// components/ui/sparkline-area-01.tsx
"use client"

import { TrendingDown } from "lucide-react"
import { Area, AreaChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { type ChartConfig, ChartContainer } from "@/components/ui/chart"

const chartData = [
  { i: 1, value: 520 },
  { i: 2, value: 480 },
  { i: 3, value: 500 },
  { i: 4, value: 430 },
  { i: 5, value: 450 },
  { i: 6, value: 390 },
  { i: 7, value: 410 },
  { i: 8, value: 350 },
  { i: 9, value: 360 },
  { i: 10, value: 300 },
  { i: 11, value: 320 },
  { i: 12, value: 280 },
]

const chartConfig = {
  value: { label: "Bounce rate", color: "var(--chart-2)" },
} satisfies ChartConfig

export default function SparklineArea01() {
  return (
    <Card className="w-full max-w-xs">
      <CardHeader>
        <CardDescription>Bounce rate</CardDescription>
        <CardTitle className="text-3xl tabular-nums">38.2%</CardTitle>
        <div className="flex items-center gap-1 text-xs font-medium text-emerald-600 dark:text-emerald-400">
          <TrendingDown className="size-3.5" />
          -4.6% this month
        </div>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig} className="h-[60px] w-full">
          <AreaChart
            data={chartData}
            margin={{ top: 4, right: 0, left: 0, bottom: 0 }}
          >
            <defs>
              <linearGradient id="fillSparkArea" x1="0" y1="0" x2="0" y2="1">
                <stop
                  offset="5%"
                  stopColor="var(--color-value)"
                  stopOpacity={0.6}
                />
                <stop
                  offset="95%"
                  stopColor="var(--color-value)"
                  stopOpacity={0.05}
                />
              </linearGradient>
            </defs>
            <Area
              dataKey="value"
              type="monotone"
              stroke="var(--color-value)"
              strokeWidth={2}
              fill="url(#fillSparkArea)"
            />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Bar sparkline

A KPI card with an inline bar sparkline.

**Install:**

```bash
npx shadcn@latest add @designrevision/sparkline-bar-01
```

**Dependencies:** recharts, lucide-react, chart, card

```tsx
// components/ui/sparkline-bar-01.tsx
"use client"

import { TrendingUp } from "lucide-react"
import { Bar, BarChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { type ChartConfig, ChartContainer } from "@/components/ui/chart"

const chartData = [
  { i: 1, value: 12 },
  { i: 2, value: 18 },
  { i: 3, value: 14 },
  { i: 4, value: 22 },
  { i: 5, value: 17 },
  { i: 6, value: 25 },
  { i: 7, value: 20 },
  { i: 8, value: 28 },
  { i: 9, value: 24 },
  { i: 10, value: 32 },
  { i: 11, value: 29 },
  { i: 12, value: 36 },
]

const chartConfig = {
  value: { label: "Sales", color: "var(--chart-1)" },
} satisfies ChartConfig

export default function SparklineBar01() {
  return (
    <Card className="w-full max-w-xs">
      <CardHeader>
        <CardDescription>Sales</CardDescription>
        <CardTitle className="text-3xl tabular-nums">1,284</CardTitle>
        <div className="flex items-center gap-1 text-xs font-medium text-emerald-600 dark:text-emerald-400">
          <TrendingUp className="size-3.5" />
          +12.4% this month
        </div>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig} className="h-[60px] w-full">
          <BarChart
            data={chartData}
            margin={{ top: 4, right: 0, left: 0, bottom: 0 }}
          >
            <Bar dataKey="value" fill="var(--color-value)" radius={2} />
          </BarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Stat-card grid

A dashboard grid of metric cards, each with its own sparkline.

**Install:**

```bash
npx shadcn@latest add @designrevision/sparkline-group-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/sparkline-group-01.tsx
"use client"

import { Area, AreaChart } from "recharts"

import { cn } from "@/lib/utils"
import { Card, CardContent } from "@/components/ui/card"
import { ChartContainer } from "@/components/ui/chart"

const metrics = [
  {
    key: "revenue",
    label: "Revenue",
    value: "$45.2k",
    trend: "+20.1%",
    up: true,
    color: "var(--chart-1)",
    data: [320, 300, 360, 340, 410, 390, 460, 520],
  },
  {
    key: "users",
    label: "Active users",
    value: "2,340",
    trend: "+8.2%",
    up: true,
    color: "var(--chart-2)",
    data: [180, 210, 200, 240, 230, 270, 290, 320],
  },
  {
    key: "orders",
    label: "Orders",
    value: "1,284",
    trend: "+12.4%",
    up: true,
    color: "var(--chart-3)",
    data: [60, 72, 68, 80, 76, 88, 92, 104],
  },
  {
    key: "churn",
    label: "Churn",
    value: "1.8%",
    trend: "-0.4%",
    up: true,
    color: "var(--chart-4)",
    data: [42, 40, 38, 36, 34, 33, 31, 28],
  },
]

export default function SparklineGroup01() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-2">
      {metrics.map((metric) => (
        <Card key={metric.key}>
          <CardContent className="space-y-1">
            <div className="flex items-center justify-between">
              <span className="text-muted-foreground text-sm">
                {metric.label}
              </span>
              <span
                className={cn(
                  "text-xs font-medium",
                  metric.up
                    ? "text-emerald-600 dark:text-emerald-400"
                    : "text-rose-600 dark:text-rose-400"
                )}
              >
                {metric.trend}
              </span>
            </div>
            <div className="text-2xl font-bold tabular-nums">
              {metric.value}
            </div>
            <ChartContainer
              config={{ value: { label: metric.label, color: metric.color } }}
              className="h-[40px] w-full"
            >
              <AreaChart
                data={metric.data.map((value, i) => ({ i, value }))}
                margin={{ top: 2, right: 0, left: 0, bottom: 0 }}
              >
                <defs>
                  <linearGradient
                    id={`fill-${metric.key}`}
                    x1="0"
                    y1="0"
                    x2="0"
                    y2="1"
                  >
                    <stop
                      offset="5%"
                      stopColor="var(--color-value)"
                      stopOpacity={0.5}
                    />
                    <stop
                      offset="95%"
                      stopColor="var(--color-value)"
                      stopOpacity={0.05}
                    />
                  </linearGradient>
                </defs>
                <Area
                  dataKey="value"
                  type="monotone"
                  stroke="var(--color-value)"
                  strokeWidth={1.5}
                  fill={`url(#fill-${metric.key})`}
                />
              </AreaChart>
            </ChartContainer>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}
```

---

### In a table

Sparklines embedded as a trend column inside table rows.

**Install:**

```bash
npx shadcn@latest add @designrevision/sparkline-table-01
```

**Dependencies:** recharts, chart, card, table

```tsx
// components/ui/sparkline-table-01.tsx
"use client"

import { Line, LineChart } from "recharts"

import { cn } from "@/lib/utils"
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { ChartContainer } from "@/components/ui/chart"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

const rows = [
  {
    name: "Acme Inc",
    revenue: "$12,400",
    change: "+8.1%",
    up: true,
    color: "var(--chart-1)",
    data: [20, 24, 22, 28, 26, 32, 30, 36],
  },
  {
    name: "Globex",
    revenue: "$9,150",
    change: "+3.4%",
    up: true,
    color: "var(--chart-2)",
    data: [30, 28, 31, 29, 33, 30, 34, 35],
  },
  {
    name: "Initech",
    revenue: "$7,820",
    change: "-2.7%",
    up: false,
    color: "var(--chart-4)",
    data: [38, 36, 37, 33, 34, 30, 31, 28],
  },
  {
    name: "Umbrella",
    revenue: "$6,540",
    change: "+11.9%",
    up: true,
    color: "var(--chart-3)",
    data: [12, 16, 14, 20, 18, 26, 24, 32],
  },
]

export default function SparklineTable01() {
  return (
    <Card className="w-full max-w-2xl">
      <CardHeader>
        <CardTitle>Top accounts</CardTitle>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Account</TableHead>
              <TableHead>Revenue</TableHead>
              <TableHead className="w-[120px]">Trend</TableHead>
              <TableHead className="text-right">Change</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.map((row) => (
              <TableRow key={row.name}>
                <TableCell className="font-medium">{row.name}</TableCell>
                <TableCell className="tabular-nums">{row.revenue}</TableCell>
                <TableCell>
                  <ChartContainer
                    config={{ value: { color: row.color } }}
                    className="h-[32px] w-[100px]"
                  >
                    <LineChart
                      data={row.data.map((value, i) => ({ i, value }))}
                      margin={{ top: 2, right: 0, left: 0, bottom: 2 }}
                    >
                      <Line
                        dataKey="value"
                        type="monotone"
                        stroke="var(--color-value)"
                        strokeWidth={1.5}
                        dot={false}
                      />
                    </LineChart>
                  </ChartContainer>
                </TableCell>
                <TableCell
                  className={cn(
                    "text-right text-sm font-medium tabular-nums",
                    row.up
                      ? "text-emerald-600 dark:text-emerald-400"
                      : "text-rose-600 dark:text-rose-400"
                  )}
                >
                  {row.change}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  )
}
```

---

### Interactive (tooltip)

A sparkline with a hover tooltip that reveals per-point values.

**Install:**

```bash
npx shadcn@latest add @designrevision/sparkline-tooltip-01
```

**Dependencies:** recharts, chart, card

```tsx
// components/ui/sparkline-tooltip-01.tsx
"use client"

import { Area, AreaChart, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { day: "Mon", value: 220 },
  { day: "Tue", value: 280 },
  { day: "Wed", value: 250 },
  { day: "Thu", value: 340 },
  { day: "Fri", value: 410 },
  { day: "Sat", value: 380 },
  { day: "Sun", value: 460 },
]

const chartConfig = {
  value: { label: "Visitors", color: "var(--chart-1)" },
} satisfies ChartConfig

export default function SparklineTooltip01() {
  return (
    <Card className="w-full max-w-xs">
      <CardHeader>
        <CardDescription>Visitors this week</CardDescription>
        <CardTitle className="text-3xl tabular-nums">2,340</CardTitle>
        <div className="text-muted-foreground text-xs">Hover the chart for daily values</div>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig} className="h-[80px] w-full">
          <AreaChart
            data={chartData}
            margin={{ top: 4, right: 0, left: 0, bottom: 0 }}
          >
            <XAxis dataKey="day" hide />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent className="w-[140px]" />}
            />
            <defs>
              <linearGradient id="fillSparkTooltip" x1="0" y1="0" x2="0" y2="1">
                <stop
                  offset="5%"
                  stopColor="var(--color-value)"
                  stopOpacity={0.6}
                />
                <stop
                  offset="95%"
                  stopColor="var(--color-value)"
                  stopOpacity={0.05}
                />
              </linearGradient>
            </defs>
            <Area
              dataKey="value"
              type="monotone"
              stroke="var(--color-value)"
              strokeWidth={2}
              fill="url(#fillSparkTooltip)"
            />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

### Loading state

A skeleton for a KPI sparkline card while data loads.

**Install:**

```bash
npx shadcn@latest add @designrevision/sparkline-loading-01
```

**Dependencies:** card, skeleton

```tsx
// components/ui/sparkline-loading-01.tsx
import {
  Card,
  CardContent,
  CardHeader,
} from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

// A loading state for a KPI sparkline card.
export default function SparklineLoading01() {
  return (
    <Card className="w-full max-w-xs">
      <CardHeader className="gap-2">
        <Skeleton className="h-4 w-20" />
        <Skeleton className="h-8 w-28" />
        <Skeleton className="h-3 w-24" />
      </CardHeader>
      <CardContent>
        <Skeleton className="h-[60px] w-full rounded-md" />
      </CardContent>
    </Card>
  )
}
```

---

### Accessible

The metric and trend live in text; the sparkline is marked aria-hidden as decorative.

**Install:**

```bash
npx shadcn@latest add @designrevision/sparkline-a11y-01
```

**Dependencies:** recharts, lucide-react, chart, card

```tsx
// components/ui/sparkline-a11y-01.tsx
"use client"

import { TrendingUp } from "lucide-react"
import { Line, LineChart } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { type ChartConfig, ChartContainer } from "@/components/ui/chart"

const chartData = [
  { i: 1, value: 220 },
  { i: 2, value: 260 },
  { i: 3, value: 240 },
  { i: 4, value: 310 },
  { i: 5, value: 280 },
  { i: 6, value: 360 },
  { i: 7, value: 330 },
  { i: 8, value: 400 },
  { i: 9, value: 380 },
  { i: 10, value: 460 },
  { i: 11, value: 440 },
  { i: 12, value: 520 },
]

const chartConfig = {
  value: { label: "Revenue", color: "var(--chart-1)" },
} satisfies ChartConfig

export default function SparklineA11y01() {
  return (
    <Card className="w-full max-w-xs">
      <CardHeader>
        <CardDescription>Revenue</CardDescription>
        <CardTitle className="text-3xl tabular-nums">$45,231</CardTitle>
        {/* The accessible value + trend live in text; the chart is decorative. */}
        <p className="flex items-center gap-1 text-xs font-medium text-emerald-600 dark:text-emerald-400">
          <TrendingUp className="size-3.5" />
          <span>Up 20.1% over the last 12 months</span>
        </p>
      </CardHeader>
      <CardContent>
        {/* aria-hidden: the sparkline is illustrative only; the number and trend
            above carry the meaning, so screen readers skip the decorative chart. */}
        <ChartContainer
          config={chartConfig}
          className="h-[60px] w-full"
          aria-hidden="true"
        >
          <LineChart
            data={chartData}
            margin={{ top: 4, right: 0, left: 0, bottom: 0 }}
          >
            <Line
              dataKey="value"
              type="monotone"
              stroke="var(--color-value)"
              strokeWidth={2}
              dot={false}
            />
          </LineChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

---

# Shadcn Spinner

> Free shadcn/ui spinner component for React — a Loader2 + animate-spin loading indicator. Size it, color it, drop it in a button, or center it as a loading state, plus bonus ring/dots/bars CSS styles.

Source: https://designrevision.com/components/spinner

The **Shadcn Spinner** is the simplest loading indicator: Lucide's `Loader2` icon with `animate-spin` and the right accessibility attributes. Because it is just an SVG, you **size it with `size-*`** and **color it with `text-*`** — and it slots straight into a button or a centered loading state. The examples below cover sizing, color, loading buttons, overlays, and a few bonus spinner styles.

## It's a Loader2 icon

The whole component is a wrapper:

```tsx
import { Loader2Icon } from "lucide-react"
import { cn } from "@/lib/utils"

function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <Loader2Icon
      role="status"
      aria-label="Loading"
      className={cn("size-4 animate-spin", className)}
      {...props}
    />
  )
}
```

The only dependency is `lucide-react`. Swap `Loader2Icon` for `LoaderIcon` or `LoaderCircleIcon` if you prefer a different look.

## Size and color

- **Size** with `size-*`: `<Spinner className="size-3" />` for inline, `size-8` for a page loader. Default is `size-4`.
- **Color** with `text-*`: the icon uses `currentColor`, so `<Spinner className="text-primary" />` (or `text-destructive`, `text-muted-foreground`) just works — and inside a button it inherits the button's color.

## The loading button

The most common use is a pending button — put the spinner before the label and disable it:

```tsx
<Button disabled>
  <Spinner />
  Please wait
</Button>
```

The Button already spaces and sizes SVG children, so no extra styling is needed.

## A centered loading state

For a section or card that is still fetching, center the spinner:

```tsx
<div className="flex h-48 items-center justify-center">
  <Spinner className="size-8 text-muted-foreground" />
</div>
```

This is also the ideal **`Suspense` fallback** or "while loading" branch.

## Bonus: ring, dots & bars

The canonical spinner is the Loader2 icon, but the **Spinner styles** example shows three more, all in plain CSS with your tokens:

- **Ring** — a bordered circle with one transparent edge and `animate-spin`.
- **Dots** — three dots with `animate-bounce` and staggered `animation-delay`.
- **Bars** — scaling bars driven by a small keyframe.

## Accessibility

The Spinner carries `role="status"` and `aria-label="Loading"`, so screen readers announce the loading state. Keep that for standalone loaders; when the spinner is inside a button or label that already names the action, the surrounding context describes it.

## Installation

### spinner

**Install:**

```bash
npx shadcn@latest add @designrevision/spinner
```

**Dependencies:** lucide-react, utils

**Usage & accessibility:** A loading spinner — Lucide's Loader2 icon with animate-spin, plus role="status" and aria-label="Loading" for accessibility. It is an <svg>, so size it with size-* (default size-4) and color it with text-* (it uses currentColor). Drop it inside a Button for a loading button, or center it for a page/section loading state.

```tsx
// components/ui/spinner.tsx
import { Loader2Icon } from "lucide-react"

import { cn } from "@/lib/utils"

function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <Loader2Icon
      role="status"
      aria-label="Loading"
      className={cn("size-4 animate-spin", className)}
      {...props}
    />
  )
}

export { Spinner }
```

## Examples

### Sizes

The spinner at four sizes — controlled with a single `size-*` utility.

**Install:**

```bash
npx shadcn@latest add @designrevision/spinner-demo-01
```

**Dependencies:** spinner

```tsx
// components/ui/spinner-demo-01.tsx
import { Spinner } from "@/components/ui/spinner"

export default function SpinnerDemo01() {
  return (
    <div className="flex items-center gap-6">
      <Spinner className="size-3" />
      <Spinner className="size-4" />
      <Spinner className="size-6" />
      <Spinner className="size-8" />
    </div>
  )
}
```

---

### Loading button

The #1 use — a Spinner inside a disabled Button for a pending action.

**Install:**

```bash
npx shadcn@latest add @designrevision/spinner-button-01
```

**Dependencies:** spinner, button

```tsx
// components/ui/spinner-button-01.tsx
import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"

export default function SpinnerButton01() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button disabled>
        <Spinner />
        Please wait
      </Button>
      <Button variant="outline" disabled>
        <Spinner />
        Saving
      </Button>
      <Button size="icon" disabled>
        <Spinner />
        <span className="sr-only">Loading</span>
      </Button>
    </div>
  )
}
```

---

### Colors

The spinner uses `currentColor` — tint it with any `text-*` utility.

**Install:**

```bash
npx shadcn@latest add @designrevision/spinner-colors-01
```

**Dependencies:** spinner

```tsx
// components/ui/spinner-colors-01.tsx
import { Spinner } from "@/components/ui/spinner"

export default function SpinnerColors01() {
  return (
    <div className="flex items-center gap-6">
      <Spinner className="size-6" />
      <Spinner className="size-6 text-primary" />
      <Spinner className="size-6 text-destructive" />
      <Spinner className="size-6 text-muted-foreground" />
      <Spinner className="size-6 text-green-600" />
    </div>
  )
}
```

---

### Loading state

A centered spinner with a label — a section or card loading state.

**Install:**

```bash
npx shadcn@latest add @designrevision/spinner-card-01
```

**Dependencies:** spinner

```tsx
// components/ui/spinner-card-01.tsx
import { Spinner } from "@/components/ui/spinner"

export default function SpinnerCard01() {
  return (
    <div className="flex h-48 w-full max-w-sm items-center justify-center rounded-lg border">
      <div className="flex flex-col items-center gap-3">
        <Spinner className="size-8 text-muted-foreground" />
        <p className="text-muted-foreground text-sm">Loading…</p>
      </div>
    </div>
  )
}
```

---

### Inline with text

A spinner inline with a status message — "Checking…" / "Uploading…".

**Install:**

```bash
npx shadcn@latest add @designrevision/spinner-inline-01
```

**Dependencies:** spinner

```tsx
// components/ui/spinner-inline-01.tsx
import { Spinner } from "@/components/ui/spinner"

export default function SpinnerInline01() {
  return (
    <div className="flex flex-col gap-3 text-sm">
      <span className="flex items-center gap-2">
        <Spinner className="size-4" />
        Checking availability…
      </span>
      <span className="text-muted-foreground flex items-center gap-2">
        <Spinner className="size-4" />
        Uploading files…
      </span>
    </div>
  )
}
```

---

### Spinner styles (ring / dots / bars)

Bonus spinner styles built with plain CSS — beyond the canonical Loader2.

**Install:**

```bash
npx shadcn@latest add @designrevision/spinner-styles-01
```

**Dependencies:** spinner

```tsx
// components/ui/spinner-styles-01.tsx
// Bonus spinner styles built with plain CSS — beyond the canonical Loader2 Spinner.
// The "bars" variant uses the .animate-spinner-bar keyframe from globals.css.
export default function SpinnerStyles01() {
  return (
    <div className="flex items-center gap-10">
      <div className="flex flex-col items-center gap-2">
        <div className="size-8 animate-spin rounded-full border-2 border-current border-t-transparent text-primary" />
        <span className="text-muted-foreground text-xs">Ring</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <div className="flex items-center gap-1">
          <div className="size-2 animate-bounce rounded-full bg-primary [animation-delay:-0.3s]" />
          <div className="size-2 animate-bounce rounded-full bg-primary [animation-delay:-0.15s]" />
          <div className="size-2 animate-bounce rounded-full bg-primary" />
        </div>
        <span className="text-muted-foreground text-xs">Dots</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <div className="flex h-8 items-end gap-1">
          <div className="animate-spinner-bar h-full w-1.5 origin-bottom rounded-full bg-primary [animation-delay:-0.4s]" />
          <div className="animate-spinner-bar h-full w-1.5 origin-bottom rounded-full bg-primary [animation-delay:-0.2s]" />
          <div className="animate-spinner-bar h-full w-1.5 origin-bottom rounded-full bg-primary" />
        </div>
        <span className="text-muted-foreground text-xs">Bars</span>
      </div>
    </div>
  )
}
```

---

# Shadcn Switch

> Free shadcn/ui switch (toggle) component for React — a working dark-mode theme toggle, settings list, React Hook Form, sizes and icon examples. Copy or install in one command.

Source: https://designrevision.com/components/switch

The **Shadcn Switch** is the control for instant on/off settings — the canonical <a href="https://ui.shadcn.com/docs/components/switch" rel="nofollow">shadcn/ui</a> switch built on <a href="https://www.radix-ui.com/primitives/docs/components/switch" rel="nofollow">Radix</a>, themed entirely with CSS variables. It pairs with a [Label](/components/label) for a complete setting, and the examples below cover what you actually build: a real theme toggle, settings lists, and validated forms.

## When to use — switch vs checkbox

Reach for a switch when toggling takes effect **immediately** — enabling a feature, flipping a setting, turning notifications on. It reads as a physical toggle, so users expect an instant result. For selecting items, or opting in as part of a form you **submit**, use a [checkbox](/components/checkbox). A quick test: if there's a Save button, a checkbox is usually clearer; if the change is live, use a switch.

## Settings lists

The most common real-world switch UI is a **settings panel** — a card of labelled toggles, each with a short description, separated by dividers. Bind every switch to its own [Label](/components/label) with `htmlFor`/`id`, keep the label and description on the left and the switch on the right, and you have the canonical notifications/preferences layout. The Settings list example is the drop-in version.

## Theme toggle

A switch makes a natural **light/dark toggle**. Track the theme in state and flip the `dark` class on the document root from `onCheckedChange` — `document.documentElement.classList.toggle("dark", isDark)` — flanked by sun and moon icons. Our Theme toggle example is fully working (it changes the preview's theme as you flip it); in a real app you'd persist the choice with `next-themes` or `localStorage`.

## React Hook Form

The switch is fully controllable, so it slots into <a href="https://react-hook-form.com" rel="nofollow">React Hook Form</a>: drive each switch's `checked` from the field value and update it with `setValue` (or `field.onChange`) from `onCheckedChange`. The React Hook Form example is a complete notification-preferences form backed by a `zod` schema.

## Accessibility

Give every switch an accessible name — a bound `Label`, or an `aria-label` when there's no visible text (as in the theme and icon examples). The switch is keyboard-operable with a visible focus ring, and `disabled` uses the native attribute so it leaves the tab order. For a locked control, keep it `disabled` and explain why with text linked via `aria-describedby`.

## Theming

The switch reads your design tokens (`--primary`, `--input`, `--ring`), so it follows your theme — including dark mode — with zero overrides. Any palette produced by a shadcn-compatible theme generator applies automatically.

## Installation

### switch

**Install:**

```bash
npx shadcn@latest add @designrevision/switch
```

**Dependencies:** @radix-ui/react-switch, utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| checked | boolean | — | Controlled on/off state. |
| defaultChecked | boolean | false | Initial state when uncontrolled. |
| onCheckedChange | (checked: boolean) => void | — | Fires when the user toggles the switch. |
| disabled | boolean | false | Prevents interaction and dims the control. |

**Usage & accessibility:** Extends the Radix Switch Root (@radix-ui/react-switch). Size it by overriding the track height/width and the thumb (e.g. h-6 w-10 [&>span]:size-5).

```tsx
// components/ui/switch.tsx
"use client"

import * as React from "react"
import * as SwitchPrimitive from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

function Switch({
  className,
  ...props
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      className={cn(
        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className="bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
      />
    </SwitchPrimitive.Root>
  )
}

export { Switch }
```

## Examples

### With label

A controlled switch with a label and description, toggled with `onCheckedChange` — the canonical setting field.

**Install:**

```bash
npx shadcn@latest add @designrevision/switch-label-01
```

**Dependencies:** switch, label

```tsx
// components/ui/switch-label-01.tsx
"use client"

import * as React from "react"

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

export default function SwitchLabel01() {
  const [checked, setChecked] = React.useState(true)

  return (
    <div className="flex items-start gap-3">
      <Switch id="airplane" checked={checked} onCheckedChange={setChecked} />
      <div className="grid gap-1.5">
        <Label htmlFor="airplane">Airplane mode</Label>
        <p className="text-sm text-muted-foreground">
          Disable all wireless connections.
        </p>
      </div>
    </div>
  )
}
```

---

### Settings list

A card of labelled toggles with descriptions — the pattern behind every notification and preferences panel.

**Install:**

```bash
npx shadcn@latest add @designrevision/switch-settings-01
```

**Dependencies:** switch, label

```tsx
// components/ui/switch-settings-01.tsx
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

const settings = [
  {
    id: "marketing",
    label: "Marketing emails",
    description: "Receive emails about new products, features, and more.",
    defaultChecked: true,
  },
  {
    id: "security",
    label: "Security emails",
    description: "Receive emails about your account activity and security.",
    defaultChecked: true,
  },
  {
    id: "social",
    label: "Social notifications",
    description: "Get notified when someone follows or mentions you.",
    defaultChecked: false,
  },
]

export default function SwitchSettings01() {
  return (
    <div className="w-full max-w-md divide-y divide-border rounded-lg border border-border">
      {settings.map((item) => (
        <div
          key={item.id}
          className="flex items-center justify-between gap-4 p-4"
        >
          <div className="grid gap-1">
            <Label htmlFor={item.id}>{item.label}</Label>
            <p className="text-sm text-muted-foreground">{item.description}</p>
          </div>
          <Switch id={item.id} defaultChecked={item.defaultChecked} />
        </div>
      ))}
    </div>
  )
}
```

---

### Theme toggle

A **working** light/dark toggle flanked by sun and moon icons — it flips the `.dark` class, so the preview actually changes theme. No `next-themes` required.

**Install:**

```bash
npx shadcn@latest add @designrevision/switch-theme-01
```

**Dependencies:** lucide-react, switch, label

```tsx
// components/ui/switch-theme-01.tsx
"use client"

import * as React from "react"
import { Moon, Sun } from "lucide-react"

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

export default function SwitchTheme01() {
  const [dark, setDark] = React.useState(false)

  React.useEffect(() => {
    document.documentElement.classList.toggle("dark", dark)
  }, [dark])

  return (
    <div className="flex items-center gap-3">
      <Sun className="size-4 text-muted-foreground" />
      <Switch
        id="theme"
        checked={dark}
        onCheckedChange={setDark}
        aria-label="Toggle dark mode"
      />
      <Moon className="size-4 text-muted-foreground" />
      <Label htmlFor="theme" className="sr-only">
        Dark mode
      </Label>
    </div>
  )
}
```

---

### React Hook Form

A notification-preferences form wired with `react-hook-form` and `zod` — drive `checked` from the field value and update it from `onCheckedChange`.

**Install:**

```bash
npx shadcn@latest add @designrevision/switch-form-01
```

**Dependencies:** react-hook-form, zod, @hookform/resolvers, switch, label, button

```tsx
// components/ui/switch-form-01.tsx
"use client"

import * as React from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"

import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

const schema = z.object({
  marketing: z.boolean(),
  security: z.boolean(),
})

type FormValues = z.infer<typeof schema>

const fields = [
  {
    name: "marketing",
    label: "Marketing emails",
    description: "Receive emails about new products and features.",
  },
  {
    name: "security",
    label: "Security emails",
    description: "Receive emails about your account security.",
  },
] as const

export default function SwitchForm01() {
  const [saved, setSaved] = React.useState(false)
  const { handleSubmit, setValue, watch } = useForm<FormValues>({
    resolver: zodResolver(schema),
    defaultValues: { marketing: true, security: true },
  })

  const values = watch()

  return (
    <form
      onSubmit={handleSubmit(() => setSaved(true))}
      className="grid w-full max-w-md gap-4"
    >
      <div className="divide-y divide-border rounded-lg border border-border">
        {fields.map((field) => (
          <div
            key={field.name}
            className="flex items-center justify-between gap-4 p-4"
          >
            <div className="grid gap-1">
              <Label htmlFor={field.name}>{field.label}</Label>
              <p className="text-sm text-muted-foreground">
                {field.description}
              </p>
            </div>
            <Switch
              id={field.name}
              checked={values[field.name]}
              onCheckedChange={(value) =>
                setValue(field.name, value, { shouldDirty: true })
              }
            />
          </div>
        ))}
      </div>
      <Button type="submit" className="w-fit">
        {saved ? "Saved!" : "Save preferences"}
      </Button>
    </form>
  )
}
```

---

### States

On, disabled, disabled-and-on, and a locked “upgrade to enable” switch with an explanatory hint.

**Install:**

```bash
npx shadcn@latest add @designrevision/switch-states-01
```

**Dependencies:** lucide-react, switch, label

```tsx
// components/ui/switch-states-01.tsx
import { Lock } from "lucide-react"

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

export default function SwitchStates01() {
  return (
    <div className="grid w-full max-w-sm gap-5">
      <div className="flex items-center justify-between gap-4">
        <Label htmlFor="state-on">On by default</Label>
        <Switch id="state-on" defaultChecked />
      </div>
      <div className="flex items-center justify-between gap-4">
        <Label htmlFor="state-disabled" className="text-muted-foreground">
          Disabled
        </Label>
        <Switch id="state-disabled" disabled />
      </div>
      <div className="flex items-center justify-between gap-4">
        <Label htmlFor="state-disabled-on" className="text-muted-foreground">
          Disabled &amp; on
        </Label>
        <Switch id="state-disabled-on" defaultChecked disabled />
      </div>
      <div className="grid gap-1.5">
        <div className="flex items-center justify-between gap-4">
          <div className="flex items-center gap-1.5">
            <Lock className="size-3.5 text-muted-foreground" />
            <Label htmlFor="state-locked" className="text-muted-foreground">
              Advanced analytics
            </Label>
          </div>
          <Switch id="state-locked" disabled aria-describedby="locked-hint" />
        </div>
        <p id="locked-hint" className="text-xs text-muted-foreground">
          Upgrade to Pro to enable advanced analytics.
        </p>
      </div>
    </div>
  )
}
```

---

### Sizes

Small, default, and large — scale the track and thumb together with `h-* w-* [&>span]:size-*`.

**Install:**

```bash
npx shadcn@latest add @designrevision/switch-sizes-01
```

**Dependencies:** switch, label

```tsx
// components/ui/switch-sizes-01.tsx
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

export default function SwitchSizes01() {
  return (
    <div className="flex items-center gap-8">
      <div className="flex items-center gap-2">
        <Switch id="size-sm" defaultChecked className="h-4 w-6 [&>span]:size-3" />
        <Label htmlFor="size-sm" className="text-xs">
          Small
        </Label>
      </div>
      <div className="flex items-center gap-2">
        <Switch id="size-default" defaultChecked />
        <Label htmlFor="size-default">Default</Label>
      </div>
      <div className="flex items-center gap-2">
        <Switch
          id="size-lg"
          defaultChecked
          className="h-6 w-10 [&>span]:size-5"
        />
        <Label htmlFor="size-lg" className="text-base">
          Large
        </Label>
      </div>
    </div>
  )
}
```

---

### With icons

Check and X icons inside the track that fade in as the thumb slides — a pure-CSS on/off affordance.

**Install:**

```bash
npx shadcn@latest add @designrevision/switch-icon-01
```

**Dependencies:** lucide-react, switch

```tsx
// components/ui/switch-icon-01.tsx
"use client"

import * as React from "react"
import { Check, X } from "lucide-react"

import { Switch } from "@/components/ui/switch"

export default function SwitchIcon01() {
  const [on, setOn] = React.useState(true)

  return (
    <div className="relative inline-flex items-center">
      <Switch
        checked={on}
        onCheckedChange={setOn}
        aria-label="Toggle"
        className="h-6 w-11 [&>span]:size-5"
      />
      <Check
        className={`pointer-events-none absolute left-1.5 size-3 text-primary-foreground transition-opacity ${
          on ? "opacity-100" : "opacity-0"
        }`}
      />
      <X
        className={`pointer-events-none absolute right-1.5 size-3 text-muted-foreground transition-opacity ${
          on ? "opacity-0" : "opacity-100"
        }`}
      />
    </div>
  )
}
```

---

# Shadcn Table

> Free shadcn/ui table component for React — the styled <table> primitive plus sortable, selectable, sticky-header, paginated, and expandable examples, all in plain React state (no TanStack). The examples official shadcn never shipped.

Source: https://designrevision.com/components/table

The **Shadcn Table** is the styled `<table>` — the canonical <a href="https://ui.shadcn.com/docs/components/table" rel="nofollow">shadcn/ui</a> table built from eight semantic parts with **no dependency**. Official ships the primitive and a single invoices demo; the examples below make it do real work — **sort, select, paginate, and expand** — all in plain React state, no TanStack required.

## Table vs Data Table

This is the most common question, so up front:

- **Table** (this page) is the **static, styled markup** — `Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell`, `TableCaption`. You bring the rows. It's plain HTML, so it's tiny and works anywhere.
- **Data Table** is the Table driven by **<a href="https://tanstack.com/table" rel="nofollow">TanStack Table</a>** (`@tanstack/react-table`) — one engine that adds sorting, filtering, global search, pagination, row selection, and column visibility over large datasets.

The key insight: **you rarely need TanStack.** Striping, sticky headers, row selection with select-all, click-to-sort, client-side pagination, and expandable rows all work with a few lines of `useState` — every example below proves it. Reach for a Data Table when you have large data, **server-side** sorting/filtering/pagination, or faceted filters.

## Striping, borders & density

The base table is borderless rows with a hover tint. **Stripe** it with `odd:bg-muted/50` on each `TableRow` (the Striped rows example). For a bordered card look, wrap the table in `rounded-md border`; for denser rows, add `[&_td]:py-1` to the `Table`. Right-align numeric columns with `text-right tabular-nums` so digits line up — see the totals row in the basic example.

## Selectable rows

Row selection doesn't need a table library. Keep an array of selected ids, put a [Checkbox](/components/checkbox) in each row, and give the header a checkbox whose `checked` is `true`, `false`, or `"indeterminate"` based on the count. Set `data-state="selected"` on the chosen `TableRow` and the primitive highlights it for you. The Selectable rows example is the full pattern, including the indeterminate select-all.

## Sortable columns

Hold a `{ key, dir }` state, render each header as a button that toggles it, and sort a copy of the data with `useMemo` before mapping. An arrow icon shows the active column and direction. The Sortable headers example does client-side sort with zero dependencies.

## Status badges & row actions

Tables are where status lives. Render a [Badge](/components/badge) in a cell with a variant per status (paid / pending / refunded), and add a trailing actions column of ghost icon-[buttons](/components/button) (edit, delete). The Status & row actions example is the orders-table layout.

## Sticky header & scrolling

For long tables the trick is *where* the scroll box lives. The `Table` primitive already wraps your `<table>` in an `overflow-x-auto` container, and (per the CSS spec) that container scrolls **vertically** too — so the height belongs on **that** container, not an outer div, or the sticky header has nothing to stick to:

```tsx
<div className="[&_[data-slot=table-container]]:max-h-[320px]">
  <Table>
    <TableHeader className="[&_th]:bg-background [&_th]:sticky [&_th]:top-0">
```

The `bg-background` is essential so scrolling rows don't bleed through the header. The Sticky header example shows it in a bordered, scrollable card.

## Pagination

Client-side pagination is a `slice`: track `page` and `pageSize`, compute `pageCount`, and render a rows-per-page [Select](/components/select) with prev/next buttons. No library, no server round-trip — ideal for a few hundred rows. The Pagination example is copy-paste ready.

## Expandable rows

For master/detail, track which row id is open and render a second `TableRow` with a `colSpan` detail cell beneath it when expanded. A chevron rotates to show state. The Expandable rows example implements the collapsible pattern in plain state.

## Accessibility

The Table is real semantic HTML — `<table>`, `<thead>`, `<tbody>`, `<th>`, `<td>` — so screen readers and keyboard users get correct table semantics for free. Use `TableCaption` to describe the table, give icon-only action buttons an `aria-label`, and label selection checkboxes. Keep one logical header row so column associations stay intact.

## Theming

The table reads your design tokens — `--border` (row dividers), `--muted` (hover, stripes, footer), `--foreground` — so it follows your theme, including dark mode, with no overrides. Style any part with a className to adjust padding, alignment, or width per column.

## Installation

### table

**Install:**

```bash
npx shadcn@latest add @designrevision/table
```

**Dependencies:** utils

**Usage & accessibility:** Eight styled table parts (Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption) — plain semantic HTML, no dependency. Table wraps the <table> in an overflow-x-auto container; TableRow highlights on data-[state=selected]. For sorting, filtering, pagination, and row selection at scale, drive it with TanStack Table (the Data Table pattern); for moderate data, plain React state is enough (see the examples).

```tsx
// components/ui/table.tsx
"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

function Table({ className, ...props }: React.ComponentProps<"table">) {
  return (
    <div
      data-slot="table-container"
      className="relative w-full overflow-x-auto"
    >
      <table
        data-slot="table"
        className={cn("w-full caption-bottom text-sm", className)}
        {...props}
      />
    </div>
  )
}

function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
  return (
    <thead
      data-slot="table-header"
      className={cn("[&_tr]:border-b", className)}
      {...props}
    />
  )
}

function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
  return (
    <tbody
      data-slot="table-body"
      className={cn("[&_tr:last-child]:border-0", className)}
      {...props}
    />
  )
}

function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
  return (
    <tfoot
      data-slot="table-footer"
      className={cn(
        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
        className
      )}
      {...props}
    />
  )
}

function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
  return (
    <tr
      data-slot="table-row"
      className={cn(
        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
        className
      )}
      {...props}
    />
  )
}

function TableHead({ className, ...props }: React.ComponentProps<"th">) {
  return (
    <th
      data-slot="table-head"
      className={cn(
        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
        className
      )}
      {...props}
    />
  )
}

function TableCell({ className, ...props }: React.ComponentProps<"td">) {
  return (
    <td
      data-slot="table-cell"
      className={cn(
        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
        className
      )}
      {...props}
    />
  )
}

function TableCaption({
  className,
  ...props
}: React.ComponentProps<"caption">) {
  return (
    <caption
      data-slot="table-caption"
      className={cn("text-muted-foreground mt-4 text-sm", className)}
      {...props}
    />
  )
}

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
}
```

## Examples

### Table

The canonical invoices table — caption, header, body, and a footer totals row with right-aligned currency.

**Install:**

```bash
npx shadcn@latest add @designrevision/table-demo-01
```

**Dependencies:** table

```tsx
// components/ui/table-demo-01.tsx
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

const invoices = [
  { invoice: "INV001", status: "Paid", method: "Credit Card", amount: "$250.00" },
  { invoice: "INV002", status: "Pending", method: "PayPal", amount: "$150.00" },
  { invoice: "INV003", status: "Unpaid", method: "Bank Transfer", amount: "$350.00" },
  { invoice: "INV004", status: "Paid", method: "Credit Card", amount: "$450.00" },
  { invoice: "INV005", status: "Paid", method: "PayPal", amount: "$550.00" },
]

export default function TableDemo01() {
  return (
    <Table>
      <TableCaption>A list of your recent invoices.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead className="w-[100px]">Invoice</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Method</TableHead>
          <TableHead className="text-right">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {invoices.map((invoice) => (
          <TableRow key={invoice.invoice}>
            <TableCell className="font-medium">{invoice.invoice}</TableCell>
            <TableCell>{invoice.status}</TableCell>
            <TableCell>{invoice.method}</TableCell>
            <TableCell className="text-right tabular-nums">{invoice.amount}</TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={3}>Total</TableCell>
          <TableCell className="text-right tabular-nums">$1,750.00</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  )
}
```

---

### Striped rows

Zebra striping with the `odd:bg-muted/50` utility on each row — no extra markup.

**Install:**

```bash
npx shadcn@latest add @designrevision/table-striped-01
```

**Dependencies:** table

```tsx
// components/ui/table-striped-01.tsx
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

const people = [
  { name: "Ada Lovelace", title: "Mathematician", team: "Engineering" },
  { name: "Alan Turing", title: "Computer Scientist", team: "Research" },
  { name: "Grace Hopper", title: "Rear Admiral", team: "Engineering" },
  { name: "Katherine Johnson", title: "Mathematician", team: "Research" },
  { name: "Margaret Hamilton", title: "Software Engineer", team: "Apollo" },
  { name: "Hedy Lamarr", title: "Inventor", team: "Comms" },
]

export default function TableStriped01() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Title</TableHead>
          <TableHead>Team</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {people.map((person) => (
          <TableRow
            key={person.name}
            className="odd:bg-muted/50 odd:hover:bg-muted/50"
          >
            <TableCell className="font-medium">{person.name}</TableCell>
            <TableCell>{person.title}</TableCell>
            <TableCell>{person.team}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}
```

---

### Selectable rows

A checkbox column with an **indeterminate select-all** — plain React state, no TanStack. Uses [Checkbox](/components/checkbox).

**Install:**

```bash
npx shadcn@latest add @designrevision/table-selectable-01
```

**Dependencies:** table, checkbox

```tsx
// components/ui/table-selectable-01.tsx
"use client"

import * as React from "react"

import { Checkbox } from "@/components/ui/checkbox"
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

const people = [
  { id: "1", name: "Ada Lovelace", email: "ada@example.com", role: "Owner" },
  { id: "2", name: "Alan Turing", email: "alan@example.com", role: "Member" },
  { id: "3", name: "Grace Hopper", email: "grace@example.com", role: "Member" },
  { id: "4", name: "Katherine Johnson", email: "kj@example.com", role: "Viewer" },
]

export default function TableSelectable01() {
  const [selected, setSelected] = React.useState<string[]>([])
  const allSelected = selected.length === people.length
  const someSelected = selected.length > 0 && !allSelected

  const toggleAll = (value: boolean) =>
    setSelected(value ? people.map((person) => person.id) : [])
  const toggleOne = (id: string, value: boolean) =>
    setSelected((prev) =>
      value ? [...prev, id] : prev.filter((item) => item !== id)
    )

  return (
    <Table>
      <TableCaption>
        {selected.length} of {people.length} row(s) selected.
      </TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead className="w-[40px]">
            <Checkbox
              checked={allSelected ? true : someSelected ? "indeterminate" : false}
              onCheckedChange={(value) => toggleAll(value === true)}
              aria-label="Select all"
            />
          </TableHead>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Role</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {people.map((person) => {
          const checked = selected.includes(person.id)
          return (
            <TableRow
              key={person.id}
              data-state={checked ? "selected" : undefined}
            >
              <TableCell>
                <Checkbox
                  checked={checked}
                  onCheckedChange={(value) => toggleOne(person.id, value === true)}
                  aria-label={`Select ${person.name}`}
                />
              </TableCell>
              <TableCell className="font-medium">{person.name}</TableCell>
              <TableCell>{person.email}</TableCell>
              <TableCell>{person.role}</TableCell>
            </TableRow>
          )
        })}
      </TableBody>
    </Table>
  )
}
```

---

### Sortable headers

Click a column header to sort ascending / descending — client-side sort with plain `useState`.

**Install:**

```bash
npx shadcn@latest add @designrevision/table-sortable-01
```

**Dependencies:** lucide-react, table, button

```tsx
// components/ui/table-sortable-01.tsx
"use client"

import * as React from "react"
import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

type Person = { name: string; title: string; age: number }

const data: Person[] = [
  { name: "Ada Lovelace", title: "Mathematician", age: 36 },
  { name: "Alan Turing", title: "Computer Scientist", age: 41 },
  { name: "Grace Hopper", title: "Rear Admiral", age: 85 },
  { name: "Katherine Johnson", title: "Mathematician", age: 101 },
]

type SortKey = keyof Person

export default function TableSortable01() {
  const [sort, setSort] = React.useState<{ key: SortKey; dir: "asc" | "desc" }>({
    key: "name",
    dir: "asc",
  })

  const sorted = React.useMemo(() => {
    return [...data].sort((a, b) => {
      if (a[sort.key] < b[sort.key]) return sort.dir === "asc" ? -1 : 1
      if (a[sort.key] > b[sort.key]) return sort.dir === "asc" ? 1 : -1
      return 0
    })
  }, [sort])

  const toggle = (key: SortKey) =>
    setSort((prev) =>
      prev.key === key
        ? { key, dir: prev.dir === "asc" ? "desc" : "asc" }
        : { key, dir: "asc" }
    )

  function SortHeader({ column, label }: { column: SortKey; label: string }) {
    const active = sort.key === column
    return (
      <Button
        variant="ghost"
        size="sm"
        onClick={() => toggle(column)}
        className="-ml-3 h-8"
      >
        {label}
        {active ? (
          sort.dir === "asc" ? (
            <ArrowUpIcon />
          ) : (
            <ArrowDownIcon />
          )
        ) : (
          <ArrowUpDownIcon className="opacity-50" />
        )}
      </Button>
    )
  }

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>
            <SortHeader column="name" label="Name" />
          </TableHead>
          <TableHead>
            <SortHeader column="title" label="Title" />
          </TableHead>
          <TableHead className="text-right">
            <SortHeader column="age" label="Age" />
          </TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {sorted.map((person) => (
          <TableRow key={person.name}>
            <TableCell className="font-medium">{person.name}</TableCell>
            <TableCell>{person.title}</TableCell>
            <TableCell className="text-right tabular-nums">{person.age}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}
```

---

### Status & row actions

Status [badges](/components/badge) in cells plus per-row ghost icon-button actions — the orders-table pattern.

**Install:**

```bash
npx shadcn@latest add @designrevision/table-status-01
```

**Dependencies:** lucide-react, table, badge, button, dropdown-menu

```tsx
// components/ui/table-status-01.tsx
"use client"

import { CopyIcon, MoreHorizontalIcon, PencilIcon, Trash2Icon } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

const orders = [
  { id: "#3201", customer: "Ada Lovelace", status: "Paid", total: "$250.00" },
  { id: "#3202", customer: "Alan Turing", status: "Pending", total: "$150.00" },
  { id: "#3203", customer: "Grace Hopper", status: "Refunded", total: "$350.00" },
  { id: "#3204", customer: "Katherine Johnson", status: "Paid", total: "$450.00" },
]

const statusVariant: Record<
  string,
  "default" | "secondary" | "destructive" | "outline"
> = {
  Paid: "default",
  Pending: "secondary",
  Refunded: "destructive",
}

export default function TableStatus01() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Order</TableHead>
          <TableHead>Customer</TableHead>
          <TableHead>Status</TableHead>
          <TableHead className="text-right">Total</TableHead>
          <TableHead className="w-[80px]">
            <span className="sr-only">Actions</span>
          </TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {orders.map((order) => (
          <TableRow key={order.id}>
            <TableCell className="font-medium">{order.id}</TableCell>
            <TableCell>{order.customer}</TableCell>
            <TableCell>
              <Badge variant={statusVariant[order.status]}>{order.status}</Badge>
            </TableCell>
            <TableCell className="text-right tabular-nums">{order.total}</TableCell>
            <TableCell className="text-right">
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="data-[state=open]:bg-muted size-8"
                    aria-label="Open menu"
                  >
                    <MoreHorizontalIcon />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem>
                    <PencilIcon />
                    Edit
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <CopyIcon />
                    Duplicate
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem variant="destructive">
                    <Trash2Icon />
                    Delete
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}
```

---

### Sticky header

A scrollable table whose header stays pinned with `position: sticky` on the header cells.

**Install:**

```bash
npx shadcn@latest add @designrevision/table-sticky-01
```

**Dependencies:** table

```tsx
// components/ui/table-sticky-01.tsx
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

const rows = Array.from({ length: 20 }, (_, i) => ({
  id: i + 1,
  name: `User ${i + 1}`,
  email: `user${i + 1}@example.com`,
  joined: `2026-${String((i % 12) + 1).padStart(2, "0")}-12`,
}))

export default function TableSticky01() {
  return (
    <div className="overflow-hidden rounded-md border [&_[data-slot=table-container]]:max-h-[320px]">
      <Table>
        <TableHeader className="[&_th]:bg-background [&_th]:sticky [&_th]:top-0 [&_th]:z-10">
          <TableRow>
            <TableHead className="w-[60px]">#</TableHead>
            <TableHead>Name</TableHead>
            <TableHead>Email</TableHead>
            <TableHead className="text-right">Joined</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.id}>
              <TableCell className="text-muted-foreground">{row.id}</TableCell>
              <TableCell className="font-medium">{row.name}</TableCell>
              <TableCell>{row.email}</TableCell>
              <TableCell className="text-right tabular-nums">
                {row.joined}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}
```

---

### Pagination

A rows-per-page [Select](/components/select) and prev/next controls slicing the data in state — no TanStack.

**Install:**

```bash
npx shadcn@latest add @designrevision/table-pagination-01
```

**Dependencies:** lucide-react, table, button, @designrevision/select

```tsx
// components/ui/table-pagination-01.tsx
"use client"

import * as React from "react"
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

const data = Array.from({ length: 23 }, (_, i) => ({
  id: i + 1,
  name: `Product ${i + 1}`,
  category: ["Apparel", "Books", "Electronics"][i % 3],
  price: `$${(9.99 + i).toFixed(2)}`,
}))

export default function TablePagination01() {
  const [pageSize, setPageSize] = React.useState(5)
  const [page, setPage] = React.useState(0)

  const pageCount = Math.ceil(data.length / pageSize)
  const start = page * pageSize
  const rows = data.slice(start, start + pageSize)

  React.useEffect(() => {
    setPage(0)
  }, [pageSize])

  return (
    <div className="space-y-3">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="w-[60px]">#</TableHead>
            <TableHead>Name</TableHead>
            <TableHead>Category</TableHead>
            <TableHead className="text-right">Price</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.id}>
              <TableCell className="text-muted-foreground">{row.id}</TableCell>
              <TableCell className="font-medium">{row.name}</TableCell>
              <TableCell>{row.category}</TableCell>
              <TableCell className="text-right tabular-nums">{row.price}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      <div className="flex flex-wrap items-center justify-between gap-4">
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <span>Rows per page</span>
          <Select
            value={String(pageSize)}
            onValueChange={(value) => setPageSize(Number(value))}
          >
            <SelectTrigger className="h-8 w-[70px]">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {[5, 10, 20].map((n) => (
                <SelectItem key={n} value={String(n)}>
                  {n}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-sm text-muted-foreground">
            Page {page + 1} of {pageCount}
          </span>
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            onClick={() => setPage((p) => Math.max(0, p - 1))}
            disabled={page === 0}
            aria-label="Previous page"
          >
            <ChevronLeftIcon />
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            onClick={() => setPage((p) => Math.min(pageCount - 1, p + 1))}
            disabled={page >= pageCount - 1}
            aria-label="Next page"
          >
            <ChevronRightIcon />
          </Button>
        </div>
      </div>
    </div>
  )
}
```

---

### Expandable rows

Click a row to reveal a detail row beneath it — a collapsible master/detail table in plain state.

**Install:**

```bash
npx shadcn@latest add @designrevision/table-expandable-01
```

**Dependencies:** lucide-react, table, button

```tsx
// components/ui/table-expandable-01.tsx
"use client"

import * as React from "react"
import { ChevronRightIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

const orders = [
  {
    id: "#3201",
    customer: "Ada Lovelace",
    total: "$250.00",
    address: "12 Analytical Way",
    items: ["Mechanical keyboard", "Wireless mouse"],
  },
  {
    id: "#3202",
    customer: "Alan Turing",
    total: "$150.00",
    address: "1 Enigma Road",
    items: ["Leather notebook"],
  },
  {
    id: "#3203",
    customer: "Grace Hopper",
    total: "$350.00",
    address: "9 Compiler Street",
    items: ["27\" monitor", "USB-C cable", "Laptop stand"],
  },
]

export default function TableExpandable01() {
  const [expanded, setExpanded] = React.useState<string | null>(null)

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead className="w-[40px]" />
          <TableHead>Order</TableHead>
          <TableHead>Customer</TableHead>
          <TableHead className="text-right">Total</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {orders.map((order) => {
          const isOpen = expanded === order.id
          return (
            <React.Fragment key={order.id}>
              <TableRow
                data-state={isOpen ? "selected" : undefined}
                className="cursor-pointer"
                onClick={() => setExpanded(isOpen ? null : order.id)}
              >
                <TableCell>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="size-7"
                    aria-label={isOpen ? "Collapse row" : "Expand row"}
                  >
                    <ChevronRightIcon
                      className={cn("transition-transform", isOpen && "rotate-90")}
                    />
                  </Button>
                </TableCell>
                <TableCell className="font-medium">{order.id}</TableCell>
                <TableCell>{order.customer}</TableCell>
                <TableCell className="text-right tabular-nums">
                  {order.total}
                </TableCell>
              </TableRow>
              {isOpen && (
                <TableRow className="hover:bg-transparent">
                  <TableCell colSpan={4} className="bg-muted/30 whitespace-normal">
                    <div className="px-2 py-1 text-sm">
                      <p className="text-muted-foreground">
                        Ships to {order.address}
                      </p>
                      <p className="mt-1">Items: {order.items.join(", ")}</p>
                    </div>
                  </TableCell>
                </TableRow>
              )}
            </React.Fragment>
          )
        })}
      </TableBody>
    </Table>
  )
}
```

---

# Shadcn Tabs

> Free shadcn/ui tabs component for React — Radix-powered, with the default segmented look plus underline and pill restyles, vertical orientation, icons and badges, full-width, disabled, controlled, and scrollable. The examples official shadcn never shipped.

Source: https://designrevision.com/components/tabs

The **Shadcn Tabs** switch between panels in place — the canonical <a href="https://ui.shadcn.com/docs/components/tabs" rel="nofollow">shadcn/ui</a> tabs built on <a href="https://www.radix-ui.com/primitives/docs/components/tabs" rel="nofollow">Radix</a>. Official ships one demo in the default segmented style; the examples below cover what people actually search for — **underline tabs, pill tabs, vertical tabs**, plus icons, badges, full-width, controlled, and scrollable.

## Built on Radix

Tabs is a thin wrapper over <a href="https://www.radix-ui.com/primitives/docs/components/tabs" rel="nofollow">Radix Tabs</a> with four parts — `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`. Radix owns the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/tabs/" rel="nofollow">WAI-ARIA tabs pattern</a>: roving focus, arrow-key navigation, and the `aria-controls` wiring. The one rule: **each `TabsTrigger` `value` must match a `TabsContent` `value`.**

```tsx
<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">…</TabsContent>
  <TabsContent value="password">…</TabsContent>
</Tabs>
```

## Restyling: underline & pills

The default look is a **segmented card** — a `bg-muted` list where the active trigger gets `bg-background` + a shadow. The two most-requested alternatives are **className overrides**, not new components:

- **Underline** — make the list transparent with a bottom border (`bg-transparent rounded-none border-b p-0`) and give the trigger a `border-b-2 border-transparent data-[state=active]:border-primary`, clearing the card look with `data-[state=active]:bg-transparent data-[state=active]:shadow-none`.
- **Pills** — add `rounded-full` to the list and triggers and a solid active fill (`data-[state=active]:bg-primary data-[state=active]:text-primary-foreground`).

The Underline and Pills examples are copy-paste ready.

## Vertical, full-width & scrollable

- **Vertical** — set `orientation="vertical"` (for arrow keys), make `Tabs` `flex-row`, and the `TabsList` `flex-col` with `w-full justify-start` triggers (the Vertical example).
- **Full width** — give `TabsList` `grid w-full grid-cols-N` so every trigger is equal width (the Full width example).
- **Scrollable** — wrap a `w-max` `TabsList` in an `overflow-x-auto` div when there are too many tabs to fit (the Scrollable example).

## Icons, badges, disabled & controlled

Drop an icon and a count [Badge](/components/badge) straight into a trigger (the Icons & badges example). Disable a trigger with the `disabled` prop. Use `defaultValue` for an uncontrolled start, or `value` + `onValueChange` to **control** the active tab from state — useful for wizards or syncing to the URL (the Disabled & controlled example).

## Tabs vs Accordion

Use **Tabs** when the sections are peers shown one at a time in a fixed area (settings, preview/code). Use an [Accordion](/components/accordion) when sections stack and several may be open, or on narrow screens where horizontal triggers don't fit. Tabs switch in place; accordions expand downward.

## Accessibility & theming

Radix gives the tabs full keyboard support — arrow keys move between triggers, Home/End jump to the ends, and the panel is announced via `aria-controls`. The tabs read your design tokens — `--muted` (the list), `--background` (the active trigger), `--primary` (underline/pill accents) — so they follow your theme, including dark mode, with no overrides.

## Installation

### tabs

**Install:**

```bash
npx shadcn@latest add @designrevision/tabs
```

**Dependencies:** @radix-ui/react-tabs, utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| defaultValue | string | — | The tab selected by default (uncontrolled, on Tabs). |
| value | string | — | Controlled active tab (on Tabs). Pair with onValueChange. |
| onValueChange | (value: string) => void | — | Fires when the active tab changes (on Tabs). |
| orientation | "horizontal" \| "vertical" | "horizontal" | Tab orientation for arrow-key navigation (on Tabs). |

**Usage & accessibility:** A Radix tabs primitive — four parts (Tabs, TabsList, TabsTrigger, TabsContent). The default look is a segmented card (bg-muted list, active trigger gets bg-background + shadow). Match each TabsTrigger value to a TabsContent value. Restyle to underline or pills, or go vertical, by overriding the TabsList / TabsTrigger classNames (see the examples).

```tsx
// components/ui/tabs.tsx
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

function Tabs({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
  return (
    <TabsPrimitive.Root
      data-slot="tabs"
      className={cn("flex flex-col gap-2", className)}
      {...props}
    />
  )
}

function TabsList({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.List>) {
  return (
    <TabsPrimitive.List
      data-slot="tabs-list"
      className={cn(
        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
        className
      )}
      {...props}
    />
  )
}

function TabsTrigger({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    />
  )
}

function TabsContent({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return (
    <TabsPrimitive.Content
      data-slot="tabs-content"
      className={cn("flex-1 outline-none", className)}
      {...props}
    />
  )
}

export { Tabs, TabsList, TabsTrigger, TabsContent }
```

## Examples

### Tabs

The canonical account/password tabs — the default segmented-card look with two full-width triggers.

**Install:**

```bash
npx shadcn@latest add @designrevision/tabs-demo-01
```

**Dependencies:** tabs, button, input, label

```tsx
// components/ui/tabs-demo-01.tsx
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function TabsDemo01() {
  return (
    <Tabs defaultValue="account" className="w-[360px]">
      <TabsList className="grid w-full grid-cols-2">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account" className="mt-4 grid gap-4">
        <div className="grid gap-2">
          <Label htmlFor="name">Name</Label>
          <Input id="name" defaultValue="Ada Lovelace" />
        </div>
        <div className="grid gap-2">
          <Label htmlFor="username">Username</Label>
          <Input id="username" defaultValue="@ada" />
        </div>
        <Button className="w-fit">Save changes</Button>
      </TabsContent>
      <TabsContent value="password" className="mt-4 grid gap-4">
        <div className="grid gap-2">
          <Label htmlFor="current">Current password</Label>
          <Input id="current" type="password" />
        </div>
        <div className="grid gap-2">
          <Label htmlFor="new">New password</Label>
          <Input id="new" type="password" />
        </div>
        <Button className="w-fit">Change password</Button>
      </TabsContent>
    </Tabs>
  )
}
```

---

### Underline style

A line restyle — a transparent list with a bottom border and a `border-b-2` primary underline on the active tab.

**Install:**

```bash
npx shadcn@latest add @designrevision/tabs-underline-01
```

**Dependencies:** tabs

```tsx
// components/ui/tabs-underline-01.tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

const tabs = [
  { value: "overview", body: "Your account overview at a glance." },
  { value: "analytics", body: "Traffic and engagement analytics." },
  { value: "reports", body: "Download and schedule reports." },
  { value: "notifications", body: "Manage your notification preferences." },
]

export default function TabsUnderline01() {
  return (
    <Tabs defaultValue="overview" className="w-[440px]">
      <TabsList className="h-auto w-full justify-start gap-4 rounded-none border-b bg-transparent p-0">
        {tabs.map((tab) => (
          <TabsTrigger
            key={tab.value}
            value={tab.value}
            className="text-muted-foreground data-[state=active]:border-primary data-[state=active]:text-foreground h-9 flex-none rounded-none border-0 border-b-2 border-transparent bg-transparent px-1 capitalize shadow-none data-[state=active]:bg-transparent data-[state=active]:shadow-none"
          >
            {tab.value}
          </TabsTrigger>
        ))}
      </TabsList>
      {tabs.map((tab) => (
        <TabsContent
          key={tab.value}
          value={tab.value}
          className="text-muted-foreground mt-4 text-sm"
        >
          {tab.body}
        </TabsContent>
      ))}
    </Tabs>
  )
}
```

---

### Pills

A `rounded-full` pill restyle with a solid primary active state.

**Install:**

```bash
npx shadcn@latest add @designrevision/tabs-pills-01
```

**Dependencies:** tabs

```tsx
// components/ui/tabs-pills-01.tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

const tabs = [
  { value: "all", label: "All", body: "Showing all items." },
  { value: "active", label: "Active", body: "Showing active items." },
  { value: "archived", label: "Archived", body: "Showing archived items." },
]

export default function TabsPills01() {
  return (
    <Tabs defaultValue="all" className="w-[420px]">
      <TabsList className="rounded-full">
        {tabs.map((tab) => (
          <TabsTrigger
            key={tab.value}
            value={tab.value}
            className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-full data-[state=active]:shadow-none"
          >
            {tab.label}
          </TabsTrigger>
        ))}
      </TabsList>
      {tabs.map((tab) => (
        <TabsContent
          key={tab.value}
          value={tab.value}
          className="text-muted-foreground mt-4 text-sm"
        >
          {tab.body}
        </TabsContent>
      ))}
    </Tabs>
  )
}
```

---

### Vertical

Vertical tabs — `flex-row` Tabs with a `flex-col` TabsList and left-aligned triggers (`orientation="vertical"`).

**Install:**

```bash
npx shadcn@latest add @designrevision/tabs-vertical-01
```

**Dependencies:** tabs

```tsx
// components/ui/tabs-vertical-01.tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

const tabs = [
  { value: "general", label: "General", body: "General workspace settings." },
  { value: "members", label: "Members", body: "Invite and manage members." },
  { value: "billing", label: "Billing", body: "Plans and invoices." },
  { value: "advanced", label: "Advanced", body: "Danger zone and exports." },
]

export default function TabsVertical01() {
  return (
    <Tabs
      defaultValue="general"
      orientation="vertical"
      className="w-[460px] flex-row gap-4"
    >
      <TabsList className="h-auto w-40 flex-col">
        {tabs.map((tab) => (
          <TabsTrigger key={tab.value} value={tab.value} className="w-full justify-start">
            {tab.label}
          </TabsTrigger>
        ))}
      </TabsList>
      <div className="flex-1">
        {tabs.map((tab) => (
          <TabsContent
            key={tab.value}
            value={tab.value}
            className="text-muted-foreground text-sm"
          >
            {tab.body}
          </TabsContent>
        ))}
      </div>
    </Tabs>
  )
}
```

---

### Icons & badges

Triggers with a leading icon and a count [Badge](/components/badge) — the inbox/sent/alerts pattern.

**Install:**

```bash
npx shadcn@latest add @designrevision/tabs-icons-01
```

**Dependencies:** lucide-react, tabs, badge

```tsx
// components/ui/tabs-icons-01.tsx
import { BellIcon, InboxIcon, SendIcon } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

const tabs = [
  { value: "inbox", label: "Inbox", icon: InboxIcon, count: 12, body: "You have 12 new messages." },
  { value: "sent", label: "Sent", icon: SendIcon, count: 0, body: "Your sent messages." },
  { value: "alerts", label: "Alerts", icon: BellIcon, count: 3, body: "You have 3 unread alerts." },
]

export default function TabsIcons01() {
  return (
    <Tabs defaultValue="inbox" className="w-[440px]">
      <TabsList className="w-full">
        {tabs.map((tab) => (
          <TabsTrigger key={tab.value} value={tab.value}>
            <tab.icon />
            {tab.label}
            {tab.count > 0 && (
              <Badge
                variant="secondary"
                className="h-5 min-w-5 px-1 tabular-nums"
              >
                {tab.count}
              </Badge>
            )}
          </TabsTrigger>
        ))}
      </TabsList>
      {tabs.map((tab) => (
        <TabsContent
          key={tab.value}
          value={tab.value}
          className="text-muted-foreground mt-4 text-sm"
        >
          {tab.body}
        </TabsContent>
      ))}
    </Tabs>
  )
}
```

---

### Full width

Equal-width triggers that fill the container with `grid w-full grid-cols-N`.

**Install:**

```bash
npx shadcn@latest add @designrevision/tabs-full-width-01
```

**Dependencies:** tabs

```tsx
// components/ui/tabs-full-width-01.tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

const tabs = [
  { value: "preview", label: "Preview", body: "The rendered preview." },
  { value: "code", label: "Code", body: "The source code." },
  { value: "settings", label: "Settings", body: "Configuration options." },
]

export default function TabsFullWidth01() {
  return (
    <Tabs defaultValue="preview" className="w-[460px]">
      <TabsList className="grid w-full grid-cols-3">
        {tabs.map((tab) => (
          <TabsTrigger key={tab.value} value={tab.value}>
            {tab.label}
          </TabsTrigger>
        ))}
      </TabsList>
      {tabs.map((tab) => (
        <TabsContent
          key={tab.value}
          value={tab.value}
          className="text-muted-foreground mt-4 rounded-md border p-4 text-sm"
        >
          {tab.body}
        </TabsContent>
      ))}
    </Tabs>
  )
}
```

---

### Disabled & controlled

A disabled tab plus **controlled** state via `value` / `onValueChange`.

**Install:**

```bash
npx shadcn@latest add @designrevision/tabs-disabled-01
```

**Dependencies:** tabs

```tsx
// components/ui/tabs-disabled-01.tsx
"use client"

import * as React from "react"

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function TabsDisabled01() {
  const [tab, setTab] = React.useState("details")

  return (
    <div className="grid gap-3">
      <p className="text-muted-foreground text-sm">
        Active tab: <span className="text-foreground font-medium">{tab}</span>
      </p>
      <Tabs value={tab} onValueChange={setTab} className="w-[420px]">
        <TabsList className="w-full">
          <TabsTrigger value="details">Details</TabsTrigger>
          <TabsTrigger value="shipping">Shipping</TabsTrigger>
          <TabsTrigger value="payment" disabled>
            Payment
          </TabsTrigger>
        </TabsList>
        <TabsContent value="details" className="text-muted-foreground mt-4 text-sm">
          Your order details.
        </TabsContent>
        <TabsContent value="shipping" className="text-muted-foreground mt-4 text-sm">
          Your shipping address.
        </TabsContent>
        <TabsContent value="payment" className="text-muted-foreground mt-4 text-sm">
          Payment unlocks once shipping is set.
        </TabsContent>
      </Tabs>
    </div>
  )
}
```

---

### Scrollable

Many tabs in a horizontally scrollable list — `overflow-x-auto` around a `w-max` TabsList.

**Install:**

```bash
npx shadcn@latest add @designrevision/tabs-scrollable-01
```

**Dependencies:** tabs

```tsx
// components/ui/tabs-scrollable-01.tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
]

export default function TabsScrollable01() {
  return (
    <Tabs defaultValue="January" className="w-[440px]">
      <div className="overflow-x-auto">
        <TabsList className="w-max">
          {months.map((month) => (
            <TabsTrigger key={month} value={month}>
              {month}
            </TabsTrigger>
          ))}
        </TabsList>
      </div>
      {months.map((month) => (
        <TabsContent
          key={month}
          value={month}
          className="text-muted-foreground mt-4 text-sm"
        >
          Showing data for {month}.
        </TabsContent>
      ))}
    </Tabs>
  )
}
```

---

# Shadcn Textarea

> Free shadcn/ui textarea component for React — auto-growing (field-sizing), character counter, resize control and validation examples. Copy or install in one command.

Source: https://designrevision.com/components/textarea

The **Shadcn Textarea** is the multi-line counterpart to the [Input](/components/input) — the canonical <a href="https://ui.shadcn.com/docs/components/textarea" rel="nofollow">shadcn/ui</a> textarea, a native `<textarea>` themed entirely with CSS variables. It ships one quietly powerful default: the box **auto-grows with its content** via the CSS `field-sizing-content` property, so it behaves like a polished chat or comment input out of the box, with no autosize library. Pair it with a [Label](/components/label) and a [Button](/components/button); the examples below cover the patterns you reach for most.

## When to use

Use a textarea for **longer, free-form, multi-line text** — a message, a comment, a bio, a description. For a single line (email, name, search) use an [Input](/components/input); for a fixed set of choices use a select or radio group. Match the field size to the expected answer: a one-sentence summary and a full support message should not look the same.

## Autosize and sizing

The primitive includes `field-sizing-content`, so the height tracks the text as the user types — no `useEffect`, no `react-textarea-autosize`. Set `min-h-*` for the resting height and `max-h-*` to cap the growth (past the cap it scrolls). This is the modern, dependency-free replacement for JavaScript autosize, and it degrades gracefully to a normal `rows`-sized box where `field-sizing` is unsupported.

## Resize control

By default the browser shows a drag handle. Add `resize-y` to allow vertical resizing only, or `resize-none` to remove the handle entirely — handy when the height is driven by autosize and you do not want users fighting it. The Resize control example shows both side by side.

## Validation and states

Error state is driven by the standard **`aria-invalid`** attribute — set it and the textarea switches on the destructive border and ring automatically, no custom prop. This keeps it compatible with native validation and form libraries like React Hook Form. Always pair an invalid field with a visible message linked by `aria-describedby`. Disabled and read-only use the native attributes, so they behave and announce correctly.

## Accessibility

Every textarea is keyboard-navigable with a visible 3px focus ring. Give each one a bound `Label` (or an `aria-label` when the design has no visible label). When you cap length with `maxLength`, surface the limit visibly — a counter — so the constraint is not a surprise on submit.

## Theming

The textarea reads your design tokens (`--input`, `--ring`, `--destructive`, `--muted-foreground`), so it follows your theme — including dark mode — with zero overrides. Any palette produced by a shadcn-compatible theme generator applies automatically.

## Installation

### textarea

**Install:**

```bash
npx shadcn@latest add @designrevision/textarea
```

**Dependencies:** utils

**Usage & accessibility:** Extends React.ComponentProps<"textarea"> — all native <textarea> attributes are supported. Errors switch on via aria-invalid; field-sizing-content auto-grows the box, so set rows, min-h, or max-h to bound it.

```tsx
// components/ui/textarea.tsx
import * as React from "react"

import { cn } from "@/lib/utils"

function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        className
      )}
      {...props}
    />
  )
}

export { Textarea }
```

## Examples

### With label

The canonical multi-line field — a `Label` bound by `htmlFor`, with muted helper text below.

**Install:**

```bash
npx shadcn@latest add @designrevision/textarea-label-01
```

**Dependencies:** textarea, label

```tsx
// components/ui/textarea-label-01.tsx
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

export default function TextareaLabel01() {
  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="message">Your message</Label>
      <Textarea id="message" placeholder="Type your message here…" />
      <p className="text-sm text-muted-foreground">
        We typically reply within a business day.
      </p>
    </div>
  )
}
```

---

### Autosize

Grows with its content up to a `max-h` and then scrolls — powered by the CSS `field-sizing-content` baked into the primitive, with no autosize library.

**Install:**

```bash
npx shadcn@latest add @designrevision/textarea-autosize-01
```

**Dependencies:** textarea, label

```tsx
// components/ui/textarea-autosize-01.tsx
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

export default function TextareaAutosize01() {
  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="bio">Bio</Label>
      <Textarea
        id="bio"
        placeholder="Start typing — the field grows with your text…"
        defaultValue="The height tracks the content via field-sizing-content. It grows as you type, stops at the max height, then scrolls."
        className="max-h-40 resize-none"
      />
      <p className="text-sm text-muted-foreground">
        Grows with content up to a max height — no JavaScript.
      </p>
    </div>
  )
}
```

---

### Character counter

A live `current/max` count in `tabular-nums`, backed by the textarea’s `maxLength`.

**Install:**

```bash
npx shadcn@latest add @designrevision/textarea-counter-01
```

**Dependencies:** textarea, label

```tsx
// components/ui/textarea-counter-01.tsx
"use client"

import * as React from "react"

import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

export default function TextareaCounter01() {
  const maxLength = 180
  const [value, setValue] = React.useState("")

  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="about">About you</Label>
      <Textarea
        id="about"
        value={value}
        maxLength={maxLength}
        onChange={(e) => setValue(e.target.value)}
        placeholder="A short bio…"
      />
      <p className="text-right text-sm tabular-nums text-muted-foreground">
        {value.length}/{maxLength}
      </p>
    </div>
  )
}
```

---

### With button

A comment field paired with a submit `Button` — the shape behind comment boxes and reply forms.

**Install:**

```bash
npx shadcn@latest add @designrevision/textarea-button-01
```

**Dependencies:** textarea, label, button

```tsx
// components/ui/textarea-button-01.tsx
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

export default function TextareaButton01() {
  return (
    <form className="grid w-full max-w-sm gap-2">
      <Label htmlFor="comment">Add a comment</Label>
      <Textarea id="comment" placeholder="Share your thoughts…" />
      <div className="flex justify-end">
        <Button type="submit">Comment</Button>
      </div>
    </form>
  )
}
```

---

### States

Invalid (`aria-invalid` switches on the destructive ring and border, paired with `aria-describedby`), disabled, and read-only fields.

**Install:**

```bash
npx shadcn@latest add @designrevision/textarea-states-01
```

**Dependencies:** textarea, label

```tsx
// components/ui/textarea-states-01.tsx
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

export default function TextareaStates01() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <div className="grid gap-2">
        <Label htmlFor="message-invalid">Message</Label>
        <Textarea
          id="message-invalid"
          defaultValue="Too short"
          aria-invalid="true"
          aria-describedby="message-invalid-error"
        />
        <p id="message-invalid-error" className="text-sm text-destructive">
          Message must be at least 20 characters.
        </p>
      </div>
      <div className="grid gap-2">
        <Label htmlFor="message-disabled">Disabled</Label>
        <Textarea id="message-disabled" placeholder="Unavailable…" disabled />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="message-readonly">Read only</Label>
        <Textarea
          id="message-readonly"
          readOnly
          defaultValue="This content can be selected and copied, but not edited."
        />
      </div>
    </div>
  )
}
```

---

### Resize control

Constrain the drag handle with `resize-y` for vertical-only resizing, or `resize-none` to remove it entirely.

**Install:**

```bash
npx shadcn@latest add @designrevision/textarea-resize-01
```

**Dependencies:** textarea, label

```tsx
// components/ui/textarea-resize-01.tsx
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

export default function TextareaResize01() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <div className="grid gap-2">
        <Label htmlFor="ta-resize-y">Vertical resize handle</Label>
        <Textarea
          id="ta-resize-y"
          className="resize-y"
          placeholder="Drag the bottom-right corner to resize…"
        />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="ta-resize-none">No resize handle</Label>
        <Textarea
          id="ta-resize-none"
          className="resize-none"
          placeholder="Manual resizing disabled…"
        />
      </div>
    </div>
  )
}
```

---

# Shadcn Tooltip

> Free shadcn/ui tooltip component for React — a Radix hover/focus hint with an arrow. Four sides, icon-button toolbars, keyboard-shortcut hints, the disabled-trigger fix, and shared-provider delays. The examples official shadcn never shipped.

Source: https://designrevision.com/components/tooltip

The **Shadcn Tooltip** is the hover hint — the canonical <a href="https://ui.shadcn.com/docs/components/tooltip" rel="nofollow">shadcn/ui</a> tooltip built on <a href="https://www.radix-ui.com/primitives/docs/components/tooltip" rel="nofollow">Radix</a>, a small label that appears on hover or focus with an arrow. Official ships one demo; the examples below cover the real uses — **icon-button toolbars, shortcut hints, the disabled-trigger fix, and shared-provider delays**.

## Built on Radix

Tooltip wraps <a href="https://www.radix-ui.com/primitives/docs/components/tooltip" rel="nofollow">Radix Tooltip</a> with four parts — `TooltipProvider`, `Tooltip`, `TooltipTrigger`, `TooltipContent`. The shadcn `Tooltip` **bundles its own provider**, so a single tooltip just works:

```tsx
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>Add to library</TooltipContent>
</Tooltip>
```

Use `asChild` on the trigger so the tooltip attaches to *your* element (a button) instead of wrapping it.

## Shared provider & delay

For a **group** of tooltips, wrap them in one `TooltipProvider` and set `delayDuration` there — they share the delay, and after the first one shows, hovering a sibling shows it instantly (the skip-delay behaviour). The shadcn default is `0`; 500–700ms is common so tooltips don't flash as the pointer passes. The Delay & shared provider example uses 700ms.

## Positioning

Set `side` (`"top" | "right" | "bottom" | "left"`, default `"top"`) and `sideOffset` on `TooltipContent`; Radix flips it to stay in view. The Sides example shows all four.

## Icon-button toolbars

The number-one use is **labelling icon-only buttons** — a formatting toolbar, a row of actions. Give each button an `aria-label` (for screen readers) *and* a tooltip (for sighted hover users). The Icon buttons example is the toolbar pattern. Pair the label with a [Kbd](/components/kbd) shortcut hint when there is one (the With shortcut example).

## The disabled-trigger gotcha

A `disabled` button fires **no** pointer or focus events, so the tooltip never opens. The fix: wrap the control in a focusable `span` (the real trigger) and turn off the button's pointer events:

```tsx
<TooltipTrigger asChild>
  <span tabIndex={0} className="inline-block">
    <Button disabled className="pointer-events-none">Submit</Button>
  </span>
</TooltipTrigger>
```

The Disabled trigger example implements it.

## Tooltip vs Popover

A **Tooltip** is a short, non-interactive hint on hover/focus. A [Popover](/components/popover) opens on click and holds interactive content. Reading a label → Tooltip; doing something → Popover.

## Accessibility & theming

Tooltips trigger on **hover and keyboard focus** — there is no touch equivalent, so **never** put essential information (or an icon button's only label) in a tooltip; use `aria-label` for that. Radix manages the timing, focus, and Escape-to-dismiss. The tooltip reads your design tokens — it uses `--foreground` / `--background` for the dark pill — so it follows your theme, including dark mode, with no overrides. The open/close animation comes from `tw-animate-css`.

## Installation

### tooltip

**Install:**

```bash
npx shadcn@latest add @designrevision/tooltip
```

**Dependencies:** @radix-ui/react-tooltip, utils

**Props**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| side | "top" \| "right" \| "bottom" \| "left" | "top" | Which side of the trigger the tooltip opens on (on TooltipContent). |
| sideOffset | number | 0 | Distance in px from the trigger (on TooltipContent). |
| delayDuration | number | 0 | Hover delay in ms before showing (on Tooltip or a shared TooltipProvider). |
| open / onOpenChange | boolean / (open: boolean) => void | — | Controlled visibility (on Tooltip). |

**Usage & accessibility:** A Radix tooltip — four parts (TooltipProvider, Tooltip, TooltipTrigger, TooltipContent). Tooltip already bundles a TooltipProvider, so a single tooltip works on its own; wrap a group in one shared TooltipProvider to share delayDuration. TooltipContent renders an arrow. Tooltips fire on hover and focus only — for a disabled trigger, wrap it in a span; never put essential info in a tooltip.

```tsx
// components/ui/tooltip.tsx
"use client"

import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"

import { cn } from "@/lib/utils"

function TooltipProvider({
  delayDuration = 0,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
  return (
    <TooltipPrimitive.Provider
      data-slot="tooltip-provider"
      delayDuration={delayDuration}
      {...props}
    />
  )
}

function Tooltip({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
  return (
    <TooltipProvider>
      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
    </TooltipProvider>
  )
}

function TooltipTrigger({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}

function TooltipContent({
  className,
  sideOffset = 0,
  children,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
  return (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Content
        data-slot="tooltip-content"
        sideOffset={sideOffset}
        className={cn(
          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
          className
        )}
        {...props}
      >
        {children}
        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
      </TooltipPrimitive.Content>
    </TooltipPrimitive.Portal>
  )
}

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
```

## Examples

### Tooltip

The canonical tooltip — a hover/focus hint on a button, with an arrow.

**Install:**

```bash
npx shadcn@latest add @designrevision/tooltip-demo-01
```

**Dependencies:** tooltip, button

```tsx
// components/ui/tooltip-demo-01.tsx
import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export default function TooltipDemo01() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Hover me</Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>Add to library</p>
      </TooltipContent>
    </Tooltip>
  )
}
```

---

### Sides

Open from any side of the trigger — `top`, `right`, `bottom`, or `left` — with the `side` prop.

**Install:**

```bash
npx shadcn@latest add @designrevision/tooltip-sides-01
```

**Dependencies:** tooltip, button

```tsx
// components/ui/tooltip-sides-01.tsx
import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

const sides = ["top", "right", "bottom", "left"] as const

export default function TooltipSides01() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {sides.map((side) => (
        <Tooltip key={side}>
          <TooltipTrigger asChild>
            <Button variant="outline" className="capitalize">
              {side}
            </Button>
          </TooltipTrigger>
          <TooltipContent side={side}>
            <p>On the {side}</p>
          </TooltipContent>
        </Tooltip>
      ))}
    </div>
  )
}
```

---

### Icon buttons

A toolbar of icon-only [buttons](/components/button), each labelled by a tooltip — the most common real use.

**Install:**

```bash
npx shadcn@latest add @designrevision/tooltip-icon-01
```

**Dependencies:** lucide-react, tooltip, button

```tsx
// components/ui/tooltip-icon-01.tsx
import { BoldIcon, ItalicIcon, LinkIcon, UnderlineIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

const tools = [
  { icon: BoldIcon, label: "Bold" },
  { icon: ItalicIcon, label: "Italic" },
  { icon: UnderlineIcon, label: "Underline" },
  { icon: LinkIcon, label: "Insert link" },
]

export default function TooltipIcon01() {
  return (
    <div className="flex items-center gap-1 rounded-md border p-1">
      {tools.map((tool) => (
        <Tooltip key={tool.label}>
          <TooltipTrigger asChild>
            <Button variant="ghost" size="icon" aria-label={tool.label}>
              <tool.icon />
            </Button>
          </TooltipTrigger>
          <TooltipContent>{tool.label}</TooltipContent>
        </Tooltip>
      ))}
    </div>
  )
}
```

---

### With shortcut

A tooltip pairing the label with a [Kbd](/components/kbd) keyboard-shortcut hint.

**Install:**

```bash
npx shadcn@latest add @designrevision/tooltip-shortcut-01
```

**Dependencies:** tooltip, button, kbd

```tsx
// components/ui/tooltip-shortcut-01.tsx
import { Button } from "@/components/ui/button"
import { Kbd } from "@/components/ui/kbd"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export default function TooltipShortcut01() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Save</Button>
      </TooltipTrigger>
      <TooltipContent className="flex items-center gap-2">
        Save changes
        <Kbd className="bg-background/20 text-background border-transparent">
          ⌘S
        </Kbd>
      </TooltipContent>
    </Tooltip>
  )
}
```

---

### Disabled trigger

The classic gotcha — a disabled element fires no events, so wrap it in a focusable `span` to keep the tooltip.

**Install:**

```bash
npx shadcn@latest add @designrevision/tooltip-disabled-01
```

**Dependencies:** tooltip, button

```tsx
// components/ui/tooltip-disabled-01.tsx
import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export default function TooltipDisabled01() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        {/*
          A disabled element fires no pointer events, so the tooltip never
          opens. Wrap it in a focusable span (the real trigger) and turn off
          pointer events on the button itself.
        */}
        <span tabIndex={0} className="inline-block">
          <Button variant="outline" disabled className="pointer-events-none">
            Submit
          </Button>
        </span>
      </TooltipTrigger>
      <TooltipContent>
        <p>Complete all required fields to submit</p>
      </TooltipContent>
    </Tooltip>
  )
}
```

---

### Delay & shared provider

One `TooltipProvider` sets a hover delay for a whole group; siblings then show instantly after the first.

**Install:**

```bash
npx shadcn@latest add @designrevision/tooltip-delay-01
```

**Dependencies:** tooltip, button

```tsx
// components/ui/tooltip-delay-01.tsx
import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

const items = ["Home", "Projects", "Settings"]

export default function TooltipDelay01() {
  return (
    // One shared provider sets the hover delay for the whole group; once one
    // tooltip has shown, hovering its siblings shows them instantly.
    <TooltipProvider delayDuration={700}>
      <div className="flex items-center gap-3">
        {items.map((item) => (
          <Tooltip key={item}>
            <TooltipTrigger asChild>
              <Button variant="outline">{item}</Button>
            </TooltipTrigger>
            <TooltipContent>Open {item}</TooltipContent>
          </Tooltip>
        ))}
      </div>
    </TooltipProvider>
  )
}
```

---

### Rich content

A wider tooltip with a title and a description line for a richer hint.

**Install:**

```bash
npx shadcn@latest add @designrevision/tooltip-rich-01
```

**Dependencies:** tooltip, button

```tsx
// components/ui/tooltip-rich-01.tsx
import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export default function TooltipRich01() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Storage</Button>
      </TooltipTrigger>
      <TooltipContent className="max-w-[220px]">
        <p className="font-medium">Storage almost full</p>
        <p className="text-background/80 mt-1">
          You&apos;ve used 9.2 GB of your 10 GB. Upgrade or remove files to free
          up space.
        </p>
      </TooltipContent>
    </Tooltip>
  )
}
```

---

# Shadcn Typography

> Free shadcn/ui typography for React — a set of Tailwind classes for headings, prose, blockquotes, lists, inline code, and tables: a full article, the heading scale, and inline elements.

Source: https://designrevision.com/components/typography

**Shadcn Typography** isn't a component — it's a set of **Tailwind classes** for styling headings, prose, blockquotes, lists, inline code, and tables. You copy the class strings onto your own elements rather than installing anything, which gives you precise, per-element control inside JSX. The examples below cover a full article, the heading scale, and inline elements.

## How it works

There's nothing to add. Put the class string on the element you need:

```tsx
<h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight">
  The Joke Tax Chronicles
</h1>
<p className="leading-7 [&:not(:first-child)]:mt-6">
  Once upon a time, in a far-off land…
</p>
```

Because it's plain markup plus utilities, it works anywhere Tailwind is configured — no package, no registry component.

## The heading scale

```tsx
h1 → scroll-m-20 text-4xl font-extrabold tracking-tight
h2 → scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight
h3 → scroll-m-20 text-2xl font-semibold tracking-tight
h4 → scroll-m-20 text-xl font-semibold tracking-tight
```

Alongside the headings sit the supporting styles — **lead** (`text-muted-foreground text-xl`), **large** (`text-lg font-semibold`), **small** (`text-sm leading-none font-medium`), and **muted** (`text-muted-foreground text-sm`). The Heading scale example shows them together.

## Inline elements

Blockquotes, inline code, lists, and tables each have a canonical class string:

```tsx
<blockquote className="mt-6 border-l-2 pl-6 italic">…</blockquote>
<code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
  npm install
</code>
```

The Inline elements example collects them in one place.

## vs. the Tailwind typography plugin

Two different jobs:

- **`@tailwindcss/typography` (`prose`)** — styles a block of raw HTML automatically. Ideal for **rendered Markdown** or CMS output you don't control.
- **These classes** — style each element explicitly for precise control in hand-written **components**.

Use `prose` for generated content; use these per-element classes for the components you write yourself.

## Changing the font

The classes only set size, weight, spacing, and colour — the family comes from your theme. Set `--font-sans` (and a heading font if you want one) in your Tailwind theme and every element here picks it up.

---

## Prose article

A full styled article — heading, lead, sections, blockquote, and list.

**Install:**

```bash
npx shadcn@latest add @designrevision/typography-demo-01
```

```tsx
// components/ui/typography-demo-01.tsx
export default function TypographyDemo01() {
  return (
    <div className="w-full max-w-2xl">
      <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
        The Joke Tax Chronicles
      </h1>
      <p className="text-muted-foreground mt-4 text-xl">
        Once upon a time, in a far-off land, there was a very lazy king who
        spent all day lounging on his throne.
      </p>
      <h2 className="mt-8 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">
        The King's Plan
      </h2>
      <p className="leading-7 [&:not(:first-child)]:mt-6">
        The king thought long and hard, and finally came up with a brilliant
        plan: he would tax the jokes in the kingdom.
      </p>
      <blockquote className="mt-6 border-l-2 pl-6 italic">
        "After all," he said, "everyone enjoys a good joke, so it's only fair
        that they should pay for the privilege."
      </blockquote>
      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
        The Joke Tax
      </h3>
      <p className="leading-7 [&:not(:first-child)]:mt-6">
        The king's subjects were not amused. They grumbled and complained, but
        the king was firm:
      </p>
      <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
        <li>1st level of puns: 5 gold coins</li>
        <li>2nd level of jokes: 10 gold coins</li>
        <li>3rd level of one-liners: 20 gold coins</li>
      </ul>
      <p className="leading-7 [&:not(:first-child)]:mt-6">
        As a result, people stopped telling jokes, and the kingdom fell into a
        gloom. But there was one person who refused to let the king's
        foolishness get him down.
      </p>
    </div>
  )
}
```

---

## Heading scale

The h1–h4 scale plus lead, large, small, and muted text styles.

**Install:**

```bash
npx shadcn@latest add @designrevision/typography-headings-01
```

```tsx
// components/ui/typography-headings-01.tsx
export default function TypographyHeadings01() {
  return (
    <div className="w-full max-w-xl space-y-4">
      <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight">
        Heading 1
      </h1>
      <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight">
        Heading 2
      </h2>
      <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
        Heading 3
      </h3>
      <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
        Heading 4
      </h4>
      <p className="text-muted-foreground text-xl">
        Lead — a larger intro paragraph that sets up the section below it.
      </p>
      <div className="text-lg font-semibold">Large — an emphasized line.</div>
      <p className="leading-7">
        Paragraph — the default body copy with comfortable line height for long
        passages of reading.
      </p>
      <small className="text-sm leading-none font-medium">
        Small — a fine-print line.
      </small>
      <p className="text-muted-foreground text-sm">
        Muted — secondary helper text.
      </p>
    </div>
  )
}
```

---

## Inline elements & table

Blockquote, inline code, list, and a styled table.

**Install:**

```bash
npx shadcn@latest add @designrevision/typography-inline-01
```

```tsx
// components/ui/typography-inline-01.tsx
const taxes = [
  { king: "King Solomon", tax: "100 gold coins" },
  { king: "King David", tax: "50 gold coins" },
  { king: "King Frederick", tax: "25 gold coins" },
]

export default function TypographyInline01() {
  return (
    <div className="w-full max-w-xl space-y-6">
      <blockquote className="border-l-2 pl-6 italic">
        "After all," he said, "everyone enjoys a good joke, so it's only fair
        that they should pay for the privilege."
      </blockquote>

      <p className="leading-7">
        You can install the package with{" "}
        <code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
          npm install
        </code>{" "}
        and import it anywhere.
      </p>

      <ul className="ml-6 list-disc [&>li]:mt-2">
        <li>First level of puns</li>
        <li>Second level of jokes</li>
        <li>Third level of one-liners</li>
      </ul>

      <div className="my-6 w-full overflow-y-auto">
        <table className="w-full">
          <thead>
            <tr className="even:bg-muted m-0 border-t p-0">
              <th className="border px-4 py-2 text-left font-bold">King</th>
              <th className="border px-4 py-2 text-left font-bold">
                Joke Tax
              </th>
            </tr>
          </thead>
          <tbody>
            {taxes.map((row) => (
              <tr key={row.king} className="even:bg-muted m-0 border-t p-0">
                <td className="border px-4 py-2 text-left">{row.king}</td>
                <td className="border px-4 py-2 text-left">{row.tax}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}
```

---

# Default — shadcn/ui theme

> The classic shadcn/ui look — a clean, neutral grayscale theme that works everywhere.

Source: https://designrevision.com/shadcn-themes/default

Install: `npx shadcn@latest add https://designrevision.com/r/themes/default.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0 0);
  --foreground: oklch(0.205 0 0);
  --card: oklch(0.995 0 0);
  --card-foreground: oklch(0.205 0 0);
  --popover: oklch(0.995 0 0);
  --popover-foreground: oklch(0.205 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.968 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.968 0 0);
  --muted-foreground: oklch(0.205 0.0192 0);
  --accent: oklch(0.96 0 20);
  --accent-foreground: oklch(0.205 0 20);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.205 0 0);
  --chart-1: oklch(0.62 0.1492 0);
  --chart-2: oklch(0.68 0.1492 40);
  --chart-3: oklch(0.62 0.1276 80);
  --chart-4: oklch(0.68 0.1492 160);
  --chart-5: oklch(0.62 0.1412 240);
  --sidebar: oklch(0.995 0 0);
  --sidebar-foreground: oklch(0.205 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.96 0 20);
  --sidebar-accent-foreground: oklch(0.205 0 20);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.205 0 0);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.62 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.27 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.27 0 0);
  --muted-foreground: oklch(0.6412 0 0);
  --accent: oklch(0.31 0 20);
  --accent-foreground: oklch(0.985 0 20);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0 0);
  --input: oklch(0.28 0 0);
  --ring: oklch(0.62 0 0);
  --chart-1: oklch(0.7 0.1692 0);
  --chart-2: oklch(0.74 0.1631 40);
  --chart-3: oklch(0.7 0.1442 80);
  --chart-4: oklch(0.74 0.1666 160);
  --chart-5: oklch(0.7 0.1595 240);
  --sidebar: oklch(0.16 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.62 0 0);
  --sidebar-primary-foreground: oklch(0.205 0 0);
  --sidebar-accent: oklch(0.31 0 20);
  --sidebar-accent-foreground: oklch(0.985 0 20);
  --sidebar-border: oklch(0.28 0 0);
  --sidebar-ring: oklch(0.62 0 0);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Dark — shadcn/ui theme

> A sleek, dark-first shadcn theme with cool blue accents — great for dark mode dashboards.

Source: https://designrevision.com/shadcn-themes/dark

Install: `npx shadcn@latest add https://designrevision.com/r/themes/dark.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0.0015 260);
  --foreground: oklch(0.205 0.0192 260);
  --card: oklch(0.995 0.0015 260);
  --card-foreground: oklch(0.205 0.0192 260);
  --popover: oklch(0.995 0.0015 260);
  --popover-foreground: oklch(0.205 0.0192 260);
  --primary: oklch(0.62 0.1892 260);
  --primary-foreground: oklch(0.205 0.0192 260);
  --secondary: oklch(0.968 0.0072 260);
  --secondary-foreground: oklch(0.205 0.0192 260);
  --muted: oklch(0.968 0.0072 260);
  --muted-foreground: oklch(0.5458 0.0292 260);
  --accent: oklch(0.96 0.0184 280);
  --accent-foreground: oklch(0.205 0.0192 280);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0.0072 260);
  --input: oklch(0.922 0.0072 260);
  --ring: oklch(0.62 0.1892 260);
  --chart-1: oklch(0.62 0.1492 260);
  --chart-2: oklch(0.68 0.1492 300);
  --chart-3: oklch(0.62 0.1492 340);
  --chart-4: oklch(0.68 0.1492 60);
  --chart-5: oklch(0.62 0.1492 140);
  --sidebar: oklch(0.995 0.0015 260);
  --sidebar-foreground: oklch(0.205 0.0192 260);
  --sidebar-primary: oklch(0.62 0.1892 260);
  --sidebar-primary-foreground: oklch(0.205 0.0192 260);
  --sidebar-accent: oklch(0.96 0.0184 280);
  --sidebar-accent-foreground: oklch(0.205 0.0192 280);
  --sidebar-border: oklch(0.922 0.0072 260);
  --sidebar-ring: oklch(0.62 0.1892 260);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0.0072 260);
  --foreground: oklch(0.985 0.0062 260);
  --card: oklch(0.205 0.0112 260);
  --card-foreground: oklch(0.985 0.0062 260);
  --popover: oklch(0.205 0.0112 260);
  --popover-foreground: oklch(0.985 0.0062 260);
  --primary: oklch(0.62 0.1892 260);
  --primary-foreground: oklch(0.205 0.0192 260);
  --secondary: oklch(0.27 0.0112 260);
  --secondary-foreground: oklch(0.985 0.0062 260);
  --muted: oklch(0.27 0.0112 260);
  --muted-foreground: oklch(0.6411 0.0292 260);
  --accent: oklch(0.31 0.0292 280);
  --accent-foreground: oklch(0.985 0.0063 280);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0.0112 260);
  --input: oklch(0.28 0.0112 260);
  --ring: oklch(0.62 0.1892 260);
  --chart-1: oklch(0.7 0.1566 260);
  --chart-2: oklch(0.74 0.1576 300);
  --chart-3: oklch(0.7 0.1692 340);
  --chart-4: oklch(0.74 0.1692 60);
  --chart-5: oklch(0.7 0.1692 140);
  --sidebar: oklch(0.16 0.0072 260);
  --sidebar-foreground: oklch(0.985 0.0062 260);
  --sidebar-primary: oklch(0.62 0.1892 260);
  --sidebar-primary-foreground: oklch(0.205 0.0192 260);
  --sidebar-accent: oklch(0.31 0.0292 280);
  --sidebar-accent-foreground: oklch(0.985 0.0063 280);
  --sidebar-border: oklch(0.28 0.0112 260);
  --sidebar-ring: oklch(0.62 0.1892 260);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Light — shadcn/ui theme

> A bright, airy shadcn theme with soft blue accents and gentle contrast for light interfaces.

Source: https://designrevision.com/shadcn-themes/light

Install: `npx shadcn@latest add https://designrevision.com/r/themes/light.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0.0018 240);
  --foreground: oklch(0.205 0.0192 240);
  --card: oklch(0.995 0.0018 240);
  --card-foreground: oklch(0.205 0.0192 240);
  --popover: oklch(0.995 0.0018 240);
  --popover-foreground: oklch(0.205 0.0192 240);
  --primary: oklch(0.6 0.1292 240);
  --primary-foreground: oklch(0.205 0.0192 240);
  --secondary: oklch(0.968 0.0072 240);
  --secondary-foreground: oklch(0.205 0.0192 240);
  --muted: oklch(0.968 0.0072 240);
  --muted-foreground: oklch(0.205 0.0192 240);
  --accent: oklch(0.96 0.0182 260);
  --accent-foreground: oklch(0.205 0.0192 260);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0.0072 240);
  --input: oklch(0.922 0.0072 240);
  --ring: oklch(0.6 0.1292 240);
  --chart-1: oklch(0.62 0.1412 240);
  --chart-2: oklch(0.68 0.1492 280);
  --chart-3: oklch(0.62 0.1492 320);
  --chart-4: oklch(0.68 0.1492 40);
  --chart-5: oklch(0.62 0.1464 120);
  --sidebar: oklch(0.995 0.0018 240);
  --sidebar-foreground: oklch(0.205 0.0192 240);
  --sidebar-primary: oklch(0.6 0.1292 240);
  --sidebar-primary-foreground: oklch(0.205 0.0192 240);
  --sidebar-accent: oklch(0.96 0.0182 260);
  --sidebar-accent-foreground: oklch(0.205 0.0192 260);
  --sidebar-border: oklch(0.922 0.0072 240);
  --sidebar-ring: oklch(0.6 0.1292 240);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0.0072 240);
  --foreground: oklch(0.985 0.0071 240);
  --card: oklch(0.205 0.0112 240);
  --card-foreground: oklch(0.985 0.0071 240);
  --popover: oklch(0.205 0.0112 240);
  --popover-foreground: oklch(0.985 0.0071 240);
  --primary: oklch(0.62 0.1292 240);
  --primary-foreground: oklch(0.205 0.0192 240);
  --secondary: oklch(0.27 0.0112 240);
  --secondary-foreground: oklch(0.985 0.0071 240);
  --muted: oklch(0.27 0.0112 240);
  --muted-foreground: oklch(0.6402 0.0292 240);
  --accent: oklch(0.31 0.0292 260);
  --accent-foreground: oklch(0.985 0.0062 260);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0.0112 240);
  --input: oklch(0.28 0.0112 240);
  --ring: oklch(0.62 0.1292 240);
  --chart-1: oklch(0.7 0.1595 240);
  --chart-2: oklch(0.74 0.1358 280);
  --chart-3: oklch(0.7 0.1692 320);
  --chart-4: oklch(0.74 0.1631 40);
  --chart-5: oklch(0.7 0.1654 120);
  --sidebar: oklch(0.16 0.0072 240);
  --sidebar-foreground: oklch(0.985 0.0071 240);
  --sidebar-primary: oklch(0.62 0.1292 240);
  --sidebar-primary-foreground: oklch(0.205 0.0192 240);
  --sidebar-accent: oklch(0.31 0.0292 260);
  --sidebar-accent-foreground: oklch(0.985 0.0062 260);
  --sidebar-border: oklch(0.28 0.0112 240);
  --sidebar-ring: oklch(0.62 0.1292 240);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Minimal — shadcn/ui theme

> Understated and low-chroma — a minimal shadcn theme that keeps the focus on your content.

Source: https://designrevision.com/shadcn-themes/minimal

Install: `npx shadcn@latest add https://designrevision.com/r/themes/minimal.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0.0016 250);
  --foreground: oklch(0.205 0.0192 250);
  --card: oklch(0.995 0.0016 250);
  --card-foreground: oklch(0.205 0.0192 250);
  --popover: oklch(0.995 0.0016 250);
  --popover-foreground: oklch(0.205 0.0192 250);
  --primary: oklch(0.45 0.0292 250);
  --primary-foreground: oklch(0.985 0.0065 250);
  --secondary: oklch(0.968 0.0072 250);
  --secondary-foreground: oklch(0.205 0.0192 250);
  --muted: oklch(0.968 0.0072 250);
  --muted-foreground: oklch(0.205 0.0192 250);
  --accent: oklch(0.96 0.018 270);
  --accent-foreground: oklch(0.205 0.0192 270);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0.0072 250);
  --input: oklch(0.922 0.0072 250);
  --ring: oklch(0.45 0.0292 250);
  --chart-1: oklch(0.62 0.1492 250);
  --chart-2: oklch(0.68 0.1492 290);
  --chart-3: oklch(0.62 0.1492 330);
  --chart-4: oklch(0.68 0.1492 50);
  --chart-5: oklch(0.62 0.1492 130);
  --sidebar: oklch(0.995 0.0016 250);
  --sidebar-foreground: oklch(0.205 0.0192 250);
  --sidebar-primary: oklch(0.45 0.0292 250);
  --sidebar-primary-foreground: oklch(0.985 0.0065 250);
  --sidebar-accent: oklch(0.96 0.018 270);
  --sidebar-accent-foreground: oklch(0.205 0.0192 270);
  --sidebar-border: oklch(0.922 0.0072 250);
  --sidebar-ring: oklch(0.45 0.0292 250);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.375rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0.0072 250);
  --foreground: oklch(0.985 0.0065 250);
  --card: oklch(0.205 0.0112 250);
  --card-foreground: oklch(0.985 0.0065 250);
  --popover: oklch(0.205 0.0112 250);
  --popover-foreground: oklch(0.985 0.0065 250);
  --primary: oklch(0.62 0.0292 250);
  --primary-foreground: oklch(0.205 0.0192 250);
  --secondary: oklch(0.27 0.0112 250);
  --secondary-foreground: oklch(0.985 0.0065 250);
  --muted: oklch(0.27 0.0112 250);
  --muted-foreground: oklch(0.985 0.0065 250);
  --accent: oklch(0.31 0.0292 270);
  --accent-foreground: oklch(0.985 0.0062 270);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0.0112 250);
  --input: oklch(0.28 0.0112 250);
  --ring: oklch(0.62 0.0292 250);
  --chart-1: oklch(0.7 0.1626 250);
  --chart-2: oklch(0.74 0.1436 290);
  --chart-3: oklch(0.7 0.1692 330);
  --chart-4: oklch(0.74 0.1692 50);
  --chart-5: oklch(0.7 0.1692 130);
  --sidebar: oklch(0.16 0.0072 250);
  --sidebar-foreground: oklch(0.985 0.0065 250);
  --sidebar-primary: oklch(0.62 0.0292 250);
  --sidebar-primary-foreground: oklch(0.205 0.0192 250);
  --sidebar-accent: oklch(0.31 0.0292 270);
  --sidebar-accent-foreground: oklch(0.985 0.0062 270);
  --sidebar-border: oklch(0.28 0.0112 250);
  --sidebar-ring: oklch(0.62 0.0292 250);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.375rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Mono — shadcn/ui theme

> A pure monochrome shadcn theme — grayscale surfaces with crisp black-and-white contrast.

Source: https://designrevision.com/shadcn-themes/mono

Install: `npx shadcn@latest add https://designrevision.com/r/themes/mono.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0 0);
  --foreground: oklch(0.205 0 0);
  --card: oklch(0.995 0 0);
  --card-foreground: oklch(0.205 0 0);
  --popover: oklch(0.995 0 0);
  --popover-foreground: oklch(0.205 0 0);
  --primary: oklch(0.4 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.968 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.968 0 0);
  --muted-foreground: oklch(0.205 0.0192 0);
  --accent: oklch(0.96 0 20);
  --accent-foreground: oklch(0.205 0 20);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.4 0 0);
  --chart-1: oklch(0.62 0.1492 0);
  --chart-2: oklch(0.68 0.1492 40);
  --chart-3: oklch(0.62 0.1276 80);
  --chart-4: oklch(0.68 0.1492 160);
  --chart-5: oklch(0.62 0.1412 240);
  --sidebar: oklch(0.995 0 0);
  --sidebar-foreground: oklch(0.205 0 0);
  --sidebar-primary: oklch(0.4 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.96 0 20);
  --sidebar-accent-foreground: oklch(0.205 0 20);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.4 0 0);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.62 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.27 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.27 0 0);
  --muted-foreground: oklch(0.6412 0 0);
  --accent: oklch(0.31 0 20);
  --accent-foreground: oklch(0.985 0 20);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0 0);
  --input: oklch(0.28 0 0);
  --ring: oklch(0.62 0 0);
  --chart-1: oklch(0.7 0.1692 0);
  --chart-2: oklch(0.74 0.1631 40);
  --chart-3: oklch(0.7 0.1442 80);
  --chart-4: oklch(0.74 0.1666 160);
  --chart-5: oklch(0.7 0.1595 240);
  --sidebar: oklch(0.16 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.62 0 0);
  --sidebar-primary-foreground: oklch(0.205 0 0);
  --sidebar-accent: oklch(0.31 0 20);
  --sidebar-accent-foreground: oklch(0.985 0 20);
  --sidebar-border: oklch(0.28 0 0);
  --sidebar-ring: oklch(0.62 0 0);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Slate — shadcn/ui theme

> Cool blue-gray slate tones for a calm, professional shadcn/ui theme.

Source: https://designrevision.com/shadcn-themes/slate

Install: `npx shadcn@latest add https://designrevision.com/r/themes/slate.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0.0017 245);
  --foreground: oklch(0.205 0.0192 245);
  --card: oklch(0.995 0.0017 245);
  --card-foreground: oklch(0.205 0.0192 245);
  --popover: oklch(0.995 0.0017 245);
  --popover-foreground: oklch(0.205 0.0192 245);
  --primary: oklch(0.5 0.0442 245);
  --primary-foreground: oklch(0.985 0.0067 245);
  --secondary: oklch(0.968 0.0072 245);
  --secondary-foreground: oklch(0.205 0.0192 245);
  --muted: oklch(0.968 0.0072 245);
  --muted-foreground: oklch(0.545 0.0292 245);
  --accent: oklch(0.96 0.018 265);
  --accent-foreground: oklch(0.205 0.0192 265);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0.0072 245);
  --input: oklch(0.922 0.0072 245);
  --ring: oklch(0.5 0.0442 245);
  --chart-1: oklch(0.62 0.1492 245);
  --chart-2: oklch(0.68 0.1492 285);
  --chart-3: oklch(0.62 0.1492 325);
  --chart-4: oklch(0.68 0.1492 45);
  --chart-5: oklch(0.62 0.1492 125);
  --sidebar: oklch(0.995 0.0017 245);
  --sidebar-foreground: oklch(0.205 0.0192 245);
  --sidebar-primary: oklch(0.5 0.0442 245);
  --sidebar-primary-foreground: oklch(0.985 0.0067 245);
  --sidebar-accent: oklch(0.96 0.018 265);
  --sidebar-accent-foreground: oklch(0.205 0.0192 265);
  --sidebar-border: oklch(0.922 0.0072 245);
  --sidebar-ring: oklch(0.5 0.0442 245);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0.0072 245);
  --foreground: oklch(0.985 0.0067 245);
  --card: oklch(0.205 0.0112 245);
  --card-foreground: oklch(0.985 0.0067 245);
  --popover: oklch(0.205 0.0112 245);
  --popover-foreground: oklch(0.985 0.0067 245);
  --primary: oklch(0.62 0.0442 245);
  --primary-foreground: oklch(0.205 0.0192 245);
  --secondary: oklch(0.27 0.0112 245);
  --secondary-foreground: oklch(0.985 0.0067 245);
  --muted: oklch(0.27 0.0112 245);
  --muted-foreground: oklch(0.985 0.0067 245);
  --accent: oklch(0.31 0.0292 265);
  --accent-foreground: oklch(0.985 0.0062 265);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0.0112 245);
  --input: oklch(0.28 0.0112 245);
  --ring: oklch(0.62 0.0442 245);
  --chart-1: oklch(0.7 0.1678 245);
  --chart-2: oklch(0.74 0.1391 285);
  --chart-3: oklch(0.7 0.1692 325);
  --chart-4: oklch(0.74 0.1675 45);
  --chart-5: oklch(0.7 0.1692 125);
  --sidebar: oklch(0.16 0.0072 245);
  --sidebar-foreground: oklch(0.985 0.0067 245);
  --sidebar-primary: oklch(0.62 0.0442 245);
  --sidebar-primary-foreground: oklch(0.205 0.0192 245);
  --sidebar-accent: oklch(0.31 0.0292 265);
  --sidebar-accent-foreground: oklch(0.985 0.0062 265);
  --sidebar-border: oklch(0.28 0.0112 245);
  --sidebar-ring: oklch(0.62 0.0442 245);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Neobrutalist — shadcn/ui theme

> Bold, high-contrast neobrutalism for shadcn — flat surfaces, zero radius, and hard offset shadows.

Source: https://designrevision.com/shadcn-themes/neobrutalist

Install: `npx shadcn@latest add https://designrevision.com/r/themes/neobrutalist.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0 250);
  --foreground: oklch(0.205 0 250);
  --card: oklch(0.995 0 250);
  --card-foreground: oklch(0.205 0 250);
  --popover: oklch(0.995 0 250);
  --popover-foreground: oklch(0.205 0 250);
  --primary: oklch(0.7 0.1627 250);
  --primary-foreground: oklch(0.205 0 250);
  --secondary: oklch(0.968 0 250);
  --secondary-foreground: oklch(0.205 0 250);
  --muted: oklch(0.968 0 250);
  --muted-foreground: oklch(0.205 0.0192 250);
  --accent: oklch(0.96 0 70);
  --accent-foreground: oklch(0.205 0 70);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0 250);
  --input: oklch(0.922 0 250);
  --ring: oklch(0.7 0.1627 250);
  --chart-1: oklch(0.62 0.1492 250);
  --chart-2: oklch(0.68 0.1465 70);
  --chart-3: oklch(0.62 0.1492 40);
  --chart-4: oklch(0.68 0.1492 280);
  --chart-5: oklch(0.62 0.1281 100);
  --sidebar: oklch(0.995 0 250);
  --sidebar-foreground: oklch(0.205 0 250);
  --sidebar-primary: oklch(0.7 0.1627 250);
  --sidebar-primary-foreground: oklch(0.205 0 250);
  --sidebar-accent: oklch(0.96 0 70);
  --sidebar-accent-foreground: oklch(0.205 0 70);
  --sidebar-border: oklch(0.922 0 250);
  --sidebar-ring: oklch(0.7 0.1627 250);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0rem;
  --shadow-x: 4px;
  --shadow-y: 4px;
  --shadow-blur: 0px;
  --shadow-spread: 0px;
  --shadow-opacity: 1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
  --shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
  --shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
  --shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
  --shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00);
  --shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 4px 6px -1px hsl(0 0% 0% / 1.00);
  --shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 8px 10px -1px hsl(0 0% 0% / 1.00);
  --shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.50);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0 250);
  --foreground: oklch(0.985 0 250);
  --card: oklch(0.205 0 250);
  --card-foreground: oklch(0.985 0 250);
  --popover: oklch(0.205 0 250);
  --popover-foreground: oklch(0.985 0 250);
  --primary: oklch(0.7 0.1627 250);
  --primary-foreground: oklch(0.205 0 250);
  --secondary: oklch(0.27 0 250);
  --secondary-foreground: oklch(0.985 0 250);
  --muted: oklch(0.27 0 250);
  --muted-foreground: oklch(0.6412 0 250);
  --accent: oklch(0.31 0 70);
  --accent-foreground: oklch(0.985 0 70);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0 250);
  --input: oklch(0.28 0 250);
  --ring: oklch(0.7 0.1627 250);
  --chart-1: oklch(0.7 0.1626 250);
  --chart-2: oklch(0.74 0.1595 70);
  --chart-3: oklch(0.7 0.1692 40);
  --chart-4: oklch(0.74 0.1358 280);
  --chart-5: oklch(0.7 0.1447 100);
  --sidebar: oklch(0.16 0 250);
  --sidebar-foreground: oklch(0.985 0 250);
  --sidebar-primary: oklch(0.7 0.1627 250);
  --sidebar-primary-foreground: oklch(0.205 0 250);
  --sidebar-accent: oklch(0.31 0 70);
  --sidebar-accent-foreground: oklch(0.985 0 70);
  --sidebar-border: oklch(0.28 0 250);
  --sidebar-ring: oklch(0.7 0.1627 250);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0rem;
  --shadow-x: 4px;
  --shadow-y: 4px;
  --shadow-blur: 0px;
  --shadow-spread: 0px;
  --shadow-opacity: 1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
  --shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
  --shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
  --shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
  --shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00);
  --shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 4px 6px -1px hsl(0 0% 0% / 1.00);
  --shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 8px 10px -1px hsl(0 0% 0% / 1.00);
  --shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.50);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Retro — shadcn/ui theme

> Warm vintage oranges and browns with generous rounding — a retro shadcn/ui theme.

Source: https://designrevision.com/shadcn-themes/retro

Install: `npx shadcn@latest add https://designrevision.com/r/themes/retro.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0.0018 45);
  --foreground: oklch(0.205 0.0192 45);
  --card: oklch(0.995 0.0018 45);
  --card-foreground: oklch(0.205 0.0192 45);
  --popover: oklch(0.995 0.0018 45);
  --popover-foreground: oklch(0.205 0.0192 45);
  --primary: oklch(0.62 0.1392 45);
  --primary-foreground: oklch(0.205 0.0192 45);
  --secondary: oklch(0.968 0.0072 45);
  --secondary-foreground: oklch(0.205 0.0192 45);
  --muted: oklch(0.968 0.0072 45);
  --muted-foreground: oklch(0.205 0.0192 45);
  --accent: oklch(0.96 0.0292 75);
  --accent-foreground: oklch(0.205 0.0192 75);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0.0072 45);
  --input: oklch(0.922 0.0072 45);
  --ring: oklch(0.62 0.1392 45);
  --chart-1: oklch(0.62 0.1492 45);
  --chart-2: oklch(0.68 0.1465 70);
  --chart-3: oklch(0.62 0.1265 95);
  --chart-4: oklch(0.68 0.1492 20);
  --chart-5: oklch(0.62 0.1492 355);
  --sidebar: oklch(0.995 0.0018 45);
  --sidebar-foreground: oklch(0.205 0.0192 45);
  --sidebar-primary: oklch(0.62 0.1392 45);
  --sidebar-primary-foreground: oklch(0.205 0.0192 45);
  --sidebar-accent: oklch(0.96 0.0292 75);
  --sidebar-accent-foreground: oklch(0.205 0.0192 75);
  --sidebar-border: oklch(0.922 0.0072 45);
  --sidebar-ring: oklch(0.62 0.1392 45);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 1rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0.0072 45);
  --foreground: oklch(0.985 0.007 45);
  --card: oklch(0.205 0.0112 45);
  --card-foreground: oklch(0.985 0.007 45);
  --popover: oklch(0.205 0.0112 45);
  --popover-foreground: oklch(0.985 0.007 45);
  --primary: oklch(0.62 0.1392 45);
  --primary-foreground: oklch(0.205 0.0192 45);
  --secondary: oklch(0.27 0.0112 45);
  --secondary-foreground: oklch(0.985 0.007 45);
  --muted: oklch(0.27 0.0112 45);
  --muted-foreground: oklch(0.6429 0.0292 45);
  --accent: oklch(0.31 0.0292 75);
  --accent-foreground: oklch(0.985 0.0092 75);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0.0112 45);
  --input: oklch(0.28 0.0112 45);
  --ring: oklch(0.62 0.1392 45);
  --chart-1: oklch(0.7 0.1692 45);
  --chart-2: oklch(0.74 0.1595 70);
  --chart-3: oklch(0.7 0.1429 95);
  --chart-4: oklch(0.74 0.1579 20);
  --chart-5: oklch(0.7 0.1692 355);
  --sidebar: oklch(0.16 0.0072 45);
  --sidebar-foreground: oklch(0.985 0.007 45);
  --sidebar-primary: oklch(0.62 0.1392 45);
  --sidebar-primary-foreground: oklch(0.205 0.0192 45);
  --sidebar-accent: oklch(0.31 0.0292 75);
  --sidebar-accent-foreground: oklch(0.985 0.0092 75);
  --sidebar-border: oklch(0.28 0.0112 45);
  --sidebar-ring: oklch(0.62 0.1392 45);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 1rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Midnight — shadcn/ui theme

> Deep indigo and navy — a moody midnight shadcn theme for focused, low-light work.

Source: https://designrevision.com/shadcn-themes/midnight

Install: `npx shadcn@latest add https://designrevision.com/r/themes/midnight.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0.0015 265);
  --foreground: oklch(0.205 0.0192 265);
  --card: oklch(0.995 0.0015 265);
  --card-foreground: oklch(0.205 0.0192 265);
  --popover: oklch(0.995 0.0015 265);
  --popover-foreground: oklch(0.205 0.0192 265);
  --primary: oklch(0.5 0.1592 265);
  --primary-foreground: oklch(0.985 0.0062 265);
  --secondary: oklch(0.968 0.0072 265);
  --secondary-foreground: oklch(0.205 0.0192 265);
  --muted: oklch(0.968 0.0072 265);
  --muted-foreground: oklch(0.5461 0.0292 265);
  --accent: oklch(0.96 0.0189 285);
  --accent-foreground: oklch(0.205 0.0192 285);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0.0072 265);
  --input: oklch(0.922 0.0072 265);
  --ring: oklch(0.5 0.1592 265);
  --chart-1: oklch(0.62 0.1492 265);
  --chart-2: oklch(0.68 0.1492 305);
  --chart-3: oklch(0.62 0.1492 345);
  --chart-4: oklch(0.68 0.1492 65);
  --chart-5: oklch(0.62 0.1492 145);
  --sidebar: oklch(0.995 0.0015 265);
  --sidebar-foreground: oklch(0.205 0.0192 265);
  --sidebar-primary: oklch(0.5 0.1592 265);
  --sidebar-primary-foreground: oklch(0.985 0.0062 265);
  --sidebar-accent: oklch(0.96 0.0189 285);
  --sidebar-accent-foreground: oklch(0.205 0.0192 285);
  --sidebar-border: oklch(0.922 0.0072 265);
  --sidebar-ring: oklch(0.5 0.1592 265);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0.0072 265);
  --foreground: oklch(0.985 0.0062 265);
  --card: oklch(0.205 0.0112 265);
  --card-foreground: oklch(0.985 0.0062 265);
  --popover: oklch(0.205 0.0112 265);
  --popover-foreground: oklch(0.985 0.0062 265);
  --primary: oklch(0.62 0.1592 265);
  --primary-foreground: oklch(0.205 0.0192 265);
  --secondary: oklch(0.27 0.0112 265);
  --secondary-foreground: oklch(0.985 0.0062 265);
  --muted: oklch(0.27 0.0112 265);
  --muted-foreground: oklch(0.985 0.0062 265);
  --accent: oklch(0.31 0.0292 285);
  --accent-foreground: oklch(0.985 0.0065 285);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0.0112 265);
  --input: oklch(0.28 0.0112 265);
  --ring: oklch(0.62 0.1592 265);
  --chart-1: oklch(0.7 0.1555 265);
  --chart-2: oklch(0.74 0.1677 305);
  --chart-3: oklch(0.7 0.1692 345);
  --chart-4: oklch(0.74 0.1652 65);
  --chart-5: oklch(0.7 0.1692 145);
  --sidebar: oklch(0.16 0.0072 265);
  --sidebar-foreground: oklch(0.985 0.0062 265);
  --sidebar-primary: oklch(0.62 0.1592 265);
  --sidebar-primary-foreground: oklch(0.205 0.0192 265);
  --sidebar-accent: oklch(0.31 0.0292 285);
  --sidebar-accent-foreground: oklch(0.985 0.0065 285);
  --sidebar-border: oklch(0.28 0.0112 265);
  --sidebar-ring: oklch(0.62 0.1592 265);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Ocean — shadcn/ui theme

> Cool teal and cyan tones for a fresh, oceanic shadcn/ui theme.

Source: https://designrevision.com/shadcn-themes/ocean

Install: `npx shadcn@latest add https://designrevision.com/r/themes/ocean.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0.0032 200);
  --foreground: oklch(0.205 0.0192 200);
  --card: oklch(0.995 0.0032 200);
  --card-foreground: oklch(0.205 0.0192 200);
  --popover: oklch(0.995 0.0032 200);
  --popover-foreground: oklch(0.205 0.0192 200);
  --primary: oklch(0.6 0.1012 200);
  --primary-foreground: oklch(0.205 0.0192 200);
  --secondary: oklch(0.968 0.0072 200);
  --secondary-foreground: oklch(0.205 0.0192 200);
  --muted: oklch(0.968 0.0072 200);
  --muted-foreground: oklch(0.5431 0.0292 200);
  --accent: oklch(0.96 0.0271 220);
  --accent-foreground: oklch(0.205 0.0192 220);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0.0072 200);
  --input: oklch(0.922 0.0072 200);
  --ring: oklch(0.6 0.1012 200);
  --chart-1: oklch(0.62 0.1046 200);
  --chart-2: oklch(0.68 0.1492 240);
  --chart-3: oklch(0.62 0.1492 280);
  --chart-4: oklch(0.68 0.1492 0);
  --chart-5: oklch(0.62 0.1276 80);
  --sidebar: oklch(0.995 0.0032 200);
  --sidebar-foreground: oklch(0.205 0.0192 200);
  --sidebar-primary: oklch(0.6 0.1012 200);
  --sidebar-primary-foreground: oklch(0.205 0.0192 200);
  --sidebar-accent: oklch(0.96 0.0271 220);
  --sidebar-accent-foreground: oklch(0.205 0.0192 220);
  --sidebar-border: oklch(0.922 0.0072 200);
  --sidebar-ring: oklch(0.6 0.1012 200);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0.0072 200);
  --foreground: oklch(0.985 0.0092 200);
  --card: oklch(0.205 0.0112 200);
  --card-foreground: oklch(0.985 0.0092 200);
  --popover: oklch(0.205 0.0112 200);
  --popover-foreground: oklch(0.985 0.0092 200);
  --primary: oklch(0.62 0.1046 200);
  --primary-foreground: oklch(0.205 0.0192 200);
  --secondary: oklch(0.27 0.0112 200);
  --secondary-foreground: oklch(0.985 0.0092 200);
  --muted: oklch(0.27 0.0112 200);
  --muted-foreground: oklch(0.985 0.0092 200);
  --accent: oklch(0.31 0.0292 220);
  --accent-foreground: oklch(0.985 0.0092 220);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0.0112 200);
  --input: oklch(0.28 0.0112 200);
  --ring: oklch(0.62 0.1046 200);
  --chart-1: oklch(0.7 0.1182 200);
  --chart-2: oklch(0.74 0.1491 240);
  --chart-3: oklch(0.7 0.1594 280);
  --chart-4: oklch(0.74 0.1692 0);
  --chart-5: oklch(0.7 0.1442 80);
  --sidebar: oklch(0.16 0.0072 200);
  --sidebar-foreground: oklch(0.985 0.0092 200);
  --sidebar-primary: oklch(0.62 0.1046 200);
  --sidebar-primary-foreground: oklch(0.205 0.0192 200);
  --sidebar-accent: oklch(0.31 0.0292 220);
  --sidebar-accent-foreground: oklch(0.985 0.0092 220);
  --sidebar-border: oklch(0.28 0.0112 200);
  --sidebar-ring: oklch(0.62 0.1046 200);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Forest — shadcn/ui theme

> Earthy greens for a natural, grounded shadcn theme.

Source: https://designrevision.com/shadcn-themes/forest

Install: `npx shadcn@latest add https://designrevision.com/r/themes/forest.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0.0032 150);
  --foreground: oklch(0.205 0.0192 150);
  --card: oklch(0.995 0.0032 150);
  --card-foreground: oklch(0.205 0.0192 150);
  --popover: oklch(0.995 0.0032 150);
  --popover-foreground: oklch(0.205 0.0192 150);
  --primary: oklch(0.55 0.1292 150);
  --primary-foreground: oklch(1 0 150);
  --secondary: oklch(0.968 0.0072 150);
  --secondary-foreground: oklch(0.205 0.0192 150);
  --muted: oklch(0.968 0.0072 150);
  --muted-foreground: oklch(0.5431 0.0292 150);
  --accent: oklch(0.96 0.0292 170);
  --accent-foreground: oklch(0.205 0.0192 170);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0.0072 150);
  --input: oklch(0.922 0.0072 150);
  --ring: oklch(0.55 0.1292 150);
  --chart-1: oklch(0.62 0.1492 150);
  --chart-2: oklch(0.68 0.1166 190);
  --chart-3: oklch(0.62 0.1227 230);
  --chart-4: oklch(0.68 0.1492 310);
  --chart-5: oklch(0.62 0.1492 30);
  --sidebar: oklch(0.995 0.0032 150);
  --sidebar-foreground: oklch(0.205 0.0192 150);
  --sidebar-primary: oklch(0.55 0.1292 150);
  --sidebar-primary-foreground: oklch(1 0 150);
  --sidebar-accent: oklch(0.96 0.0292 170);
  --sidebar-accent-foreground: oklch(0.205 0.0192 170);
  --sidebar-border: oklch(0.922 0.0072 150);
  --sidebar-ring: oklch(0.55 0.1292 150);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0.0072 150);
  --foreground: oklch(0.985 0.0092 150);
  --card: oklch(0.205 0.0112 150);
  --card-foreground: oklch(0.985 0.0092 150);
  --popover: oklch(0.205 0.0112 150);
  --popover-foreground: oklch(0.985 0.0092 150);
  --primary: oklch(0.62 0.1292 150);
  --primary-foreground: oklch(0.205 0.0192 150);
  --secondary: oklch(0.27 0.0112 150);
  --secondary-foreground: oklch(0.985 0.0092 150);
  --muted: oklch(0.27 0.0112 150);
  --muted-foreground: oklch(0.985 0.0092 150);
  --accent: oklch(0.31 0.0292 170);
  --accent-foreground: oklch(0.985 0.0092 170);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0.0112 150);
  --input: oklch(0.28 0.0112 150);
  --ring: oklch(0.62 0.1292 150);
  --chart-1: oklch(0.7 0.1692 150);
  --chart-2: oklch(0.74 0.1269 190);
  --chart-3: oklch(0.7 0.1387 230);
  --chart-4: oklch(0.74 0.1692 310);
  --chart-5: oklch(0.7 0.1692 30);
  --sidebar: oklch(0.16 0.0072 150);
  --sidebar-foreground: oklch(0.985 0.0092 150);
  --sidebar-primary: oklch(0.62 0.1292 150);
  --sidebar-primary-foreground: oklch(0.205 0.0192 150);
  --sidebar-accent: oklch(0.31 0.0292 170);
  --sidebar-accent-foreground: oklch(0.985 0.0092 170);
  --sidebar-border: oklch(0.28 0.0112 150);
  --sidebar-ring: oklch(0.62 0.1292 150);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Mint — shadcn/ui theme

> Fresh, light mint-green accents for a clean and calm shadcn/ui theme.

Source: https://designrevision.com/shadcn-themes/mint

Install: `npx shadcn@latest add https://designrevision.com/r/themes/mint.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0.0032 165);
  --foreground: oklch(0.205 0.0192 165);
  --card: oklch(0.995 0.0032 165);
  --card-foreground: oklch(0.205 0.0192 165);
  --popover: oklch(0.995 0.0032 165);
  --popover-foreground: oklch(0.205 0.0192 165);
  --primary: oklch(0.7 0.1192 165);
  --primary-foreground: oklch(0.205 0.0192 165);
  --secondary: oklch(0.968 0.0072 165);
  --secondary-foreground: oklch(0.205 0.0192 165);
  --muted: oklch(0.968 0.0072 165);
  --muted-foreground: oklch(0.5428 0.0292 165);
  --accent: oklch(0.96 0.0292 185);
  --accent-foreground: oklch(0.205 0.0192 185);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0.0072 165);
  --input: oklch(0.922 0.0072 165);
  --ring: oklch(0.7 0.1192 165);
  --chart-1: oklch(0.62 0.1295 165);
  --chart-2: oklch(0.68 0.1153 205);
  --chart-3: oklch(0.62 0.1492 245);
  --chart-4: oklch(0.68 0.1492 325);
  --chart-5: oklch(0.62 0.1492 45);
  --sidebar: oklch(0.995 0.0032 165);
  --sidebar-foreground: oklch(0.205 0.0192 165);
  --sidebar-primary: oklch(0.7 0.1192 165);
  --sidebar-primary-foreground: oklch(0.205 0.0192 165);
  --sidebar-accent: oklch(0.96 0.0292 185);
  --sidebar-accent-foreground: oklch(0.205 0.0192 185);
  --sidebar-border: oklch(0.922 0.0072 165);
  --sidebar-ring: oklch(0.7 0.1192 165);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0.0072 165);
  --foreground: oklch(0.985 0.0092 165);
  --card: oklch(0.205 0.0112 165);
  --card-foreground: oklch(0.985 0.0092 165);
  --popover: oklch(0.205 0.0112 165);
  --popover-foreground: oklch(0.985 0.0092 165);
  --primary: oklch(0.7 0.1192 165);
  --primary-foreground: oklch(0.205 0.0192 165);
  --secondary: oklch(0.27 0.0112 165);
  --secondary-foreground: oklch(0.985 0.0092 165);
  --muted: oklch(0.27 0.0112 165);
  --muted-foreground: oklch(0.985 0.0092 165);
  --accent: oklch(0.31 0.0292 185);
  --accent-foreground: oklch(0.985 0.0092 185);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0.0112 165);
  --input: oklch(0.28 0.0112 165);
  --ring: oklch(0.7 0.1192 165);
  --chart-1: oklch(0.7 0.1463 165);
  --chart-2: oklch(0.74 0.1255 205);
  --chart-3: oklch(0.7 0.1678 245);
  --chart-4: oklch(0.74 0.1692 325);
  --chart-5: oklch(0.7 0.1692 45);
  --sidebar: oklch(0.16 0.0072 165);
  --sidebar-foreground: oklch(0.985 0.0092 165);
  --sidebar-primary: oklch(0.7 0.1192 165);
  --sidebar-primary-foreground: oklch(0.205 0.0192 165);
  --sidebar-accent: oklch(0.31 0.0292 185);
  --sidebar-accent-foreground: oklch(0.985 0.0092 185);
  --sidebar-border: oklch(0.28 0.0112 165);
  --sidebar-ring: oklch(0.7 0.1192 165);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Sunset — shadcn/ui theme

> Warm orange and amber gradients evoking a sunset — a vibrant shadcn theme.

Source: https://designrevision.com/shadcn-themes/sunset

Install: `npx shadcn@latest add https://designrevision.com/r/themes/sunset.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0.0019 50);
  --foreground: oklch(0.205 0.0192 50);
  --card: oklch(0.995 0.0019 50);
  --card-foreground: oklch(0.205 0.0192 50);
  --popover: oklch(0.995 0.0019 50);
  --popover-foreground: oklch(0.205 0.0192 50);
  --primary: oklch(0.65 0.1592 50);
  --primary-foreground: oklch(0.205 0.0192 50);
  --secondary: oklch(0.968 0.0072 50);
  --secondary-foreground: oklch(0.205 0.0192 50);
  --muted: oklch(0.968 0.0072 50);
  --muted-foreground: oklch(0.205 0.0192 50);
  --accent: oklch(0.96 0.0292 80);
  --accent-foreground: oklch(0.205 0.0192 80);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0.0072 50);
  --input: oklch(0.922 0.0072 50);
  --ring: oklch(0.65 0.1592 50);
  --chart-1: oklch(0.62 0.1492 50);
  --chart-2: oklch(0.68 0.1426 75);
  --chart-3: oklch(0.62 0.1281 100);
  --chart-4: oklch(0.68 0.1492 25);
  --chart-5: oklch(0.62 0.1492 0);
  --sidebar: oklch(0.995 0.0019 50);
  --sidebar-foreground: oklch(0.205 0.0192 50);
  --sidebar-primary: oklch(0.65 0.1592 50);
  --sidebar-primary-foreground: oklch(0.205 0.0192 50);
  --sidebar-accent: oklch(0.96 0.0292 80);
  --sidebar-accent-foreground: oklch(0.205 0.0192 80);
  --sidebar-border: oklch(0.922 0.0072 50);
  --sidebar-ring: oklch(0.65 0.1592 50);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0.0072 50);
  --foreground: oklch(0.985 0.0074 50);
  --card: oklch(0.205 0.0112 50);
  --card-foreground: oklch(0.985 0.0074 50);
  --popover: oklch(0.205 0.0112 50);
  --popover-foreground: oklch(0.985 0.0074 50);
  --primary: oklch(0.65 0.1592 50);
  --primary-foreground: oklch(0.205 0.0192 50);
  --secondary: oklch(0.27 0.0112 50);
  --secondary-foreground: oklch(0.985 0.0074 50);
  --muted: oklch(0.27 0.0112 50);
  --muted-foreground: oklch(0.6427 0.0292 50);
  --accent: oklch(0.31 0.0292 80);
  --accent-foreground: oklch(0.985 0.0092 80);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0.0112 50);
  --input: oklch(0.28 0.0112 50);
  --ring: oklch(0.65 0.1592 50);
  --chart-1: oklch(0.7 0.1692 50);
  --chart-2: oklch(0.74 0.1553 75);
  --chart-3: oklch(0.7 0.1447 100);
  --chart-4: oklch(0.74 0.1575 25);
  --chart-5: oklch(0.7 0.1692 0);
  --sidebar: oklch(0.16 0.0072 50);
  --sidebar-foreground: oklch(0.985 0.0074 50);
  --sidebar-primary: oklch(0.65 0.1592 50);
  --sidebar-primary-foreground: oklch(0.205 0.0192 50);
  --sidebar-accent: oklch(0.31 0.0292 80);
  --sidebar-accent-foreground: oklch(0.985 0.0092 80);
  --sidebar-border: oklch(0.28 0.0112 50);
  --sidebar-ring: oklch(0.65 0.1592 50);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Amber — shadcn/ui theme

> Golden amber accents for a warm, energetic shadcn/ui theme.

Source: https://designrevision.com/shadcn-themes/amber

Install: `npx shadcn@latest add https://designrevision.com/r/themes/amber.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0.0032 85);
  --foreground: oklch(0.205 0.0192 85);
  --card: oklch(0.995 0.0032 85);
  --card-foreground: oklch(0.205 0.0192 85);
  --popover: oklch(0.995 0.0032 85);
  --popover-foreground: oklch(0.205 0.0192 85);
  --primary: oklch(0.75 0.1492 85);
  --primary-foreground: oklch(0.205 0.0192 85);
  --secondary: oklch(0.968 0.0072 85);
  --secondary-foreground: oklch(0.205 0.0192 85);
  --muted: oklch(0.968 0.0072 85);
  --muted-foreground: oklch(0.546 0.0292 85);
  --accent: oklch(0.96 0.0292 105);
  --accent-foreground: oklch(0.205 0.0192 105);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0.0072 85);
  --input: oklch(0.922 0.0072 85);
  --ring: oklch(0.75 0.1492 85);
  --chart-1: oklch(0.62 0.1262 85);
  --chart-2: oklch(0.68 0.1492 125);
  --chart-3: oklch(0.62 0.1295 165);
  --chart-4: oklch(0.68 0.1492 245);
  --chart-5: oklch(0.62 0.1492 325);
  --sidebar: oklch(0.995 0.0032 85);
  --sidebar-foreground: oklch(0.205 0.0192 85);
  --sidebar-primary: oklch(0.75 0.1492 85);
  --sidebar-primary-foreground: oklch(0.205 0.0192 85);
  --sidebar-accent: oklch(0.96 0.0292 105);
  --sidebar-accent-foreground: oklch(0.205 0.0192 105);
  --sidebar-border: oklch(0.922 0.0072 85);
  --sidebar-ring: oklch(0.75 0.1492 85);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0.0072 85);
  --foreground: oklch(0.985 0.0092 85);
  --card: oklch(0.205 0.0112 85);
  --card-foreground: oklch(0.985 0.0092 85);
  --popover: oklch(0.205 0.0112 85);
  --popover-foreground: oklch(0.985 0.0092 85);
  --primary: oklch(0.75 0.1492 85);
  --primary-foreground: oklch(0.205 0.0192 85);
  --secondary: oklch(0.27 0.0112 85);
  --secondary-foreground: oklch(0.985 0.0092 85);
  --muted: oklch(0.27 0.0112 85);
  --muted-foreground: oklch(0.985 0.0092 85);
  --accent: oklch(0.31 0.0292 105);
  --accent-foreground: oklch(0.985 0.0092 105);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0.0112 85);
  --input: oklch(0.28 0.0112 85);
  --ring: oklch(0.75 0.1492 85);
  --chart-1: oklch(0.7 0.1426 85);
  --chart-2: oklch(0.74 0.1692 125);
  --chart-3: oklch(0.7 0.1463 165);
  --chart-4: oklch(0.74 0.1432 245);
  --chart-5: oklch(0.7 0.1692 325);
  --sidebar: oklch(0.16 0.0072 85);
  --sidebar-foreground: oklch(0.985 0.0092 85);
  --sidebar-primary: oklch(0.75 0.1492 85);
  --sidebar-primary-foreground: oklch(0.205 0.0192 85);
  --sidebar-accent: oklch(0.31 0.0292 105);
  --sidebar-accent-foreground: oklch(0.985 0.0092 105);
  --sidebar-border: oklch(0.28 0.0112 85);
  --sidebar-ring: oklch(0.75 0.1492 85);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Coral — shadcn/ui theme

> Soft coral and warm pink for a friendly, inviting shadcn theme.

Source: https://designrevision.com/shadcn-themes/coral

Install: `npx shadcn@latest add https://designrevision.com/r/themes/coral.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0.0016 30);
  --foreground: oklch(0.205 0.0192 30);
  --card: oklch(0.995 0.0016 30);
  --card-foreground: oklch(0.205 0.0192 30);
  --popover: oklch(0.995 0.0016 30);
  --popover-foreground: oklch(0.205 0.0192 30);
  --primary: oklch(0.68 0.1492 30);
  --primary-foreground: oklch(0.205 0.0192 30);
  --secondary: oklch(0.968 0.0072 30);
  --secondary-foreground: oklch(0.205 0.0192 30);
  --muted: oklch(0.968 0.0072 30);
  --muted-foreground: oklch(0.205 0.0192 30);
  --accent: oklch(0.96 0.0214 50);
  --accent-foreground: oklch(0.205 0.0192 50);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0.0072 30);
  --input: oklch(0.922 0.0072 30);
  --ring: oklch(0.68 0.1492 30);
  --chart-1: oklch(0.62 0.1492 30);
  --chart-2: oklch(0.68 0.1465 70);
  --chart-3: oklch(0.62 0.1346 110);
  --chart-4: oklch(0.68 0.1166 190);
  --chart-5: oklch(0.62 0.1492 270);
  --sidebar: oklch(0.995 0.0016 30);
  --sidebar-foreground: oklch(0.205 0.0192 30);
  --sidebar-primary: oklch(0.68 0.1492 30);
  --sidebar-primary-foreground: oklch(0.205 0.0192 30);
  --sidebar-accent: oklch(0.96 0.0214 50);
  --sidebar-accent-foreground: oklch(0.205 0.0192 50);
  --sidebar-border: oklch(0.922 0.0072 30);
  --sidebar-ring: oklch(0.68 0.1492 30);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0.0072 30);
  --foreground: oklch(0.985 0.0065 30);
  --card: oklch(0.205 0.0112 30);
  --card-foreground: oklch(0.985 0.0065 30);
  --popover: oklch(0.205 0.0112 30);
  --popover-foreground: oklch(0.985 0.0065 30);
  --primary: oklch(0.68 0.1492 30);
  --primary-foreground: oklch(0.205 0.0192 30);
  --secondary: oklch(0.27 0.0112 30);
  --secondary-foreground: oklch(0.985 0.0065 30);
  --muted: oklch(0.27 0.0112 30);
  --muted-foreground: oklch(0.985 0.0065 30);
  --accent: oklch(0.31 0.0292 50);
  --accent-foreground: oklch(0.985 0.0074 50);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0.0112 30);
  --input: oklch(0.28 0.0112 30);
  --ring: oklch(0.68 0.1492 30);
  --chart-1: oklch(0.7 0.1692 30);
  --chart-2: oklch(0.74 0.1595 70);
  --chart-3: oklch(0.7 0.152 110);
  --chart-4: oklch(0.74 0.1269 190);
  --chart-5: oklch(0.7 0.1555 270);
  --sidebar: oklch(0.16 0.0072 30);
  --sidebar-foreground: oklch(0.985 0.0065 30);
  --sidebar-primary: oklch(0.68 0.1492 30);
  --sidebar-primary-foreground: oklch(0.205 0.0192 30);
  --sidebar-accent: oklch(0.31 0.0292 50);
  --sidebar-accent-foreground: oklch(0.985 0.0074 50);
  --sidebar-border: oklch(0.28 0.0112 30);
  --sidebar-ring: oklch(0.68 0.1492 30);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Crimson — shadcn/ui theme

> Bold crimson red for a confident, high-energy shadcn/ui theme.

Source: https://designrevision.com/shadcn-themes/crimson

Install: `npx shadcn@latest add https://designrevision.com/r/themes/crimson.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0.0016 20);
  --foreground: oklch(0.205 0.0192 20);
  --card: oklch(0.995 0.0016 20);
  --card-foreground: oklch(0.205 0.0192 20);
  --popover: oklch(0.995 0.0016 20);
  --popover-foreground: oklch(0.205 0.0192 20);
  --primary: oklch(0.55 0.1992 20);
  --primary-foreground: oklch(0.985 0.0064 20);
  --secondary: oklch(0.968 0.0072 20);
  --secondary-foreground: oklch(0.205 0.0192 20);
  --muted: oklch(0.968 0.0072 20);
  --muted-foreground: oklch(0.5487 0.0292 20);
  --accent: oklch(0.96 0.0198 40);
  --accent-foreground: oklch(0.205 0.0192 40);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0.0072 20);
  --input: oklch(0.922 0.0072 20);
  --ring: oklch(0.55 0.1992 20);
  --chart-1: oklch(0.62 0.1492 20);
  --chart-2: oklch(0.68 0.1492 60);
  --chart-3: oklch(0.62 0.1281 100);
  --chart-4: oklch(0.68 0.1225 180);
  --chart-5: oklch(0.62 0.1492 260);
  --sidebar: oklch(0.995 0.0016 20);
  --sidebar-foreground: oklch(0.205 0.0192 20);
  --sidebar-primary: oklch(0.55 0.1992 20);
  --sidebar-primary-foreground: oklch(0.985 0.0064 20);
  --sidebar-accent: oklch(0.96 0.0198 40);
  --sidebar-accent-foreground: oklch(0.205 0.0192 40);
  --sidebar-border: oklch(0.922 0.0072 20);
  --sidebar-ring: oklch(0.55 0.1992 20);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0.0072 20);
  --foreground: oklch(0.985 0.0064 20);
  --card: oklch(0.205 0.0112 20);
  --card-foreground: oklch(0.985 0.0064 20);
  --popover: oklch(0.205 0.0112 20);
  --popover-foreground: oklch(0.985 0.0064 20);
  --primary: oklch(0.62 0.1992 20);
  --primary-foreground: oklch(0.185 0.0192 20);
  --secondary: oklch(0.27 0.0112 20);
  --secondary-foreground: oklch(0.985 0.0064 20);
  --muted: oklch(0.27 0.0112 20);
  --muted-foreground: oklch(0.985 0.0064 20);
  --accent: oklch(0.31 0.0292 40);
  --accent-foreground: oklch(0.985 0.0068 40);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0.0112 20);
  --input: oklch(0.28 0.0112 20);
  --ring: oklch(0.62 0.1992 20);
  --chart-1: oklch(0.7 0.1692 20);
  --chart-2: oklch(0.74 0.1692 60);
  --chart-3: oklch(0.7 0.1447 100);
  --chart-4: oklch(0.74 0.1334 180);
  --chart-5: oklch(0.7 0.1566 260);
  --sidebar: oklch(0.16 0.0072 20);
  --sidebar-foreground: oklch(0.985 0.0064 20);
  --sidebar-primary: oklch(0.62 0.1992 20);
  --sidebar-primary-foreground: oklch(0.185 0.0192 20);
  --sidebar-accent: oklch(0.31 0.0292 40);
  --sidebar-accent-foreground: oklch(0.985 0.0068 40);
  --sidebar-border: oklch(0.28 0.0112 20);
  --sidebar-ring: oklch(0.62 0.1992 20);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Rose — shadcn/ui theme

> Elegant rose-pink accents for a soft, modern shadcn theme.

Source: https://designrevision.com/shadcn-themes/rose

Install: `npx shadcn@latest add https://designrevision.com/r/themes/rose.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0.0016 8);
  --foreground: oklch(0.205 0.0192 8);
  --card: oklch(0.995 0.0016 8);
  --card-foreground: oklch(0.205 0.0192 8);
  --popover: oklch(0.995 0.0016 8);
  --popover-foreground: oklch(0.205 0.0192 8);
  --primary: oklch(0.6 0.1792 8);
  --primary-foreground: oklch(0.145 0.0192 8);
  --secondary: oklch(0.968 0.0072 8);
  --secondary-foreground: oklch(0.205 0.0192 8);
  --muted: oklch(0.968 0.0072 8);
  --muted-foreground: oklch(0.5489 0.0292 8);
  --accent: oklch(0.96 0.019 28);
  --accent-foreground: oklch(0.205 0.0192 28);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0.0072 8);
  --input: oklch(0.922 0.0072 8);
  --ring: oklch(0.6 0.1792 8);
  --chart-1: oklch(0.62 0.1492 8);
  --chart-2: oklch(0.68 0.1492 48);
  --chart-3: oklch(0.62 0.1259 88);
  --chart-4: oklch(0.68 0.1369 168);
  --chart-5: oklch(0.62 0.1492 248);
  --sidebar: oklch(0.995 0.0016 8);
  --sidebar-foreground: oklch(0.205 0.0192 8);
  --sidebar-primary: oklch(0.6 0.1792 8);
  --sidebar-primary-foreground: oklch(0.145 0.0192 8);
  --sidebar-accent: oklch(0.96 0.019 28);
  --sidebar-accent-foreground: oklch(0.205 0.0192 28);
  --sidebar-border: oklch(0.922 0.0072 8);
  --sidebar-ring: oklch(0.6 0.1792 8);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0.0072 8);
  --foreground: oklch(0.985 0.0067 8);
  --card: oklch(0.205 0.0112 8);
  --card-foreground: oklch(0.985 0.0067 8);
  --popover: oklch(0.205 0.0112 8);
  --popover-foreground: oklch(0.985 0.0067 8);
  --primary: oklch(0.62 0.1792 8);
  --primary-foreground: oklch(0.205 0.0192 8);
  --secondary: oklch(0.27 0.0112 8);
  --secondary-foreground: oklch(0.985 0.0067 8);
  --muted: oklch(0.27 0.0112 8);
  --muted-foreground: oklch(0.6437 0.0292 8);
  --accent: oklch(0.31 0.0292 28);
  --accent-foreground: oklch(0.985 0.0065 28);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0.0112 8);
  --input: oklch(0.28 0.0112 8);
  --ring: oklch(0.62 0.1792 8);
  --chart-1: oklch(0.7 0.1692 8);
  --chart-2: oklch(0.74 0.1692 48);
  --chart-3: oklch(0.7 0.1423 88);
  --chart-4: oklch(0.74 0.149 168);
  --chart-5: oklch(0.7 0.1646 248);
  --sidebar: oklch(0.16 0.0072 8);
  --sidebar-foreground: oklch(0.985 0.0067 8);
  --sidebar-primary: oklch(0.62 0.1792 8);
  --sidebar-primary-foreground: oklch(0.205 0.0192 8);
  --sidebar-accent: oklch(0.31 0.0292 28);
  --sidebar-accent-foreground: oklch(0.985 0.0065 28);
  --sidebar-border: oklch(0.28 0.0112 8);
  --sidebar-ring: oklch(0.62 0.1792 8);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Violet — shadcn/ui theme

> Rich violet and purple for a creative, premium shadcn/ui theme.

Source: https://designrevision.com/shadcn-themes/violet

Install: `npx shadcn@latest add https://designrevision.com/r/themes/violet.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0.0019 300);
  --foreground: oklch(0.205 0.0192 300);
  --card: oklch(0.995 0.0019 300);
  --card-foreground: oklch(0.205 0.0192 300);
  --popover: oklch(0.995 0.0019 300);
  --popover-foreground: oklch(0.205 0.0192 300);
  --primary: oklch(0.55 0.1992 300);
  --primary-foreground: oklch(0.985 0.0074 300);
  --secondary: oklch(0.968 0.0072 300);
  --secondary-foreground: oklch(0.205 0.0192 300);
  --muted: oklch(0.968 0.0072 300);
  --muted-foreground: oklch(0.205 0.0192 300);
  --accent: oklch(0.96 0.0292 320);
  --accent-foreground: oklch(0.205 0.0192 320);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0.0072 300);
  --input: oklch(0.922 0.0072 300);
  --ring: oklch(0.55 0.1992 300);
  --chart-1: oklch(0.62 0.1492 300);
  --chart-2: oklch(0.68 0.1492 340);
  --chart-3: oklch(0.62 0.1492 20);
  --chart-4: oklch(0.68 0.1406 100);
  --chart-5: oklch(0.62 0.1117 180);
  --sidebar: oklch(0.995 0.0019 300);
  --sidebar-foreground: oklch(0.205 0.0192 300);
  --sidebar-primary: oklch(0.55 0.1992 300);
  --sidebar-primary-foreground: oklch(0.985 0.0074 300);
  --sidebar-accent: oklch(0.96 0.0292 320);
  --sidebar-accent-foreground: oklch(0.205 0.0192 320);
  --sidebar-border: oklch(0.922 0.0072 300);
  --sidebar-ring: oklch(0.55 0.1992 300);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0.0072 300);
  --foreground: oklch(0.985 0.0074 300);
  --card: oklch(0.205 0.0112 300);
  --card-foreground: oklch(0.985 0.0074 300);
  --popover: oklch(0.205 0.0112 300);
  --popover-foreground: oklch(0.985 0.0074 300);
  --primary: oklch(0.62 0.1992 300);
  --primary-foreground: oklch(0.205 0.0192 300);
  --secondary: oklch(0.27 0.0112 300);
  --secondary-foreground: oklch(0.985 0.0074 300);
  --muted: oklch(0.27 0.0112 300);
  --muted-foreground: oklch(0.6428 0.0292 300);
  --accent: oklch(0.31 0.0292 320);
  --accent-foreground: oklch(0.985 0.0092 320);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0.0112 300);
  --input: oklch(0.28 0.0112 300);
  --ring: oklch(0.62 0.1992 300);
  --chart-1: oklch(0.7 0.1692 300);
  --chart-2: oklch(0.74 0.1692 340);
  --chart-3: oklch(0.7 0.1692 20);
  --chart-4: oklch(0.74 0.153 100);
  --chart-5: oklch(0.7 0.1262 180);
  --sidebar: oklch(0.16 0.0072 300);
  --sidebar-foreground: oklch(0.985 0.0074 300);
  --sidebar-primary: oklch(0.62 0.1992 300);
  --sidebar-primary-foreground: oklch(0.205 0.0192 300);
  --sidebar-accent: oklch(0.31 0.0292 320);
  --sidebar-accent-foreground: oklch(0.985 0.0092 320);
  --sidebar-border: oklch(0.28 0.0112 300);
  --sidebar-ring: oklch(0.62 0.1992 300);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Lavender — shadcn/ui theme

> Soft lavender tones for a gentle, calming shadcn theme.

Source: https://designrevision.com/shadcn-themes/lavender

Install: `npx shadcn@latest add https://designrevision.com/r/themes/lavender.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0.0017 292);
  --foreground: oklch(0.205 0.0192 292);
  --card: oklch(0.995 0.0017 292);
  --card-foreground: oklch(0.205 0.0192 292);
  --popover: oklch(0.995 0.0017 292);
  --popover-foreground: oklch(0.205 0.0192 292);
  --primary: oklch(0.66 0.1192 292);
  --primary-foreground: oklch(0.205 0.0192 292);
  --secondary: oklch(0.968 0.0072 292);
  --secondary-foreground: oklch(0.205 0.0192 292);
  --muted: oklch(0.968 0.0072 292);
  --muted-foreground: oklch(0.205 0.0192 292);
  --accent: oklch(0.96 0.0254 312);
  --accent-foreground: oklch(0.205 0.0192 312);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0.0072 292);
  --input: oklch(0.922 0.0072 292);
  --ring: oklch(0.66 0.1192 292);
  --chart-1: oklch(0.62 0.1492 292);
  --chart-2: oklch(0.68 0.1492 332);
  --chart-3: oklch(0.62 0.1492 12);
  --chart-4: oklch(0.68 0.1383 92);
  --chart-5: oklch(0.62 0.1194 172);
  --sidebar: oklch(0.995 0.0017 292);
  --sidebar-foreground: oklch(0.205 0.0192 292);
  --sidebar-primary: oklch(0.66 0.1192 292);
  --sidebar-primary-foreground: oklch(0.205 0.0192 292);
  --sidebar-accent: oklch(0.96 0.0254 312);
  --sidebar-accent-foreground: oklch(0.205 0.0192 312);
  --sidebar-border: oklch(0.922 0.0072 292);
  --sidebar-ring: oklch(0.66 0.1192 292);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0.0072 292);
  --foreground: oklch(0.985 0.0068 292);
  --card: oklch(0.205 0.0112 292);
  --card-foreground: oklch(0.985 0.0068 292);
  --popover: oklch(0.205 0.0112 292);
  --popover-foreground: oklch(0.985 0.0068 292);
  --primary: oklch(0.66 0.1192 292);
  --primary-foreground: oklch(0.205 0.0192 292);
  --secondary: oklch(0.27 0.0112 292);
  --secondary-foreground: oklch(0.985 0.0068 292);
  --muted: oklch(0.27 0.0112 292);
  --muted-foreground: oklch(0.6425 0.0292 292);
  --accent: oklch(0.31 0.0292 312);
  --accent-foreground: oklch(0.985 0.0089 312);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0.0112 292);
  --input: oklch(0.28 0.0112 292);
  --ring: oklch(0.66 0.1192 292);
  --chart-1: oklch(0.7 0.1692 292);
  --chart-2: oklch(0.74 0.1692 332);
  --chart-3: oklch(0.7 0.1692 12);
  --chart-4: oklch(0.74 0.1506 92);
  --chart-5: oklch(0.7 0.1349 172);
  --sidebar: oklch(0.16 0.0072 292);
  --sidebar-foreground: oklch(0.985 0.0068 292);
  --sidebar-primary: oklch(0.66 0.1192 292);
  --sidebar-primary-foreground: oklch(0.205 0.0192 292);
  --sidebar-accent: oklch(0.31 0.0292 312);
  --sidebar-accent-foreground: oklch(0.985 0.0089 312);
  --sidebar-border: oklch(0.28 0.0112 292);
  --sidebar-ring: oklch(0.66 0.1192 292);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Twilight — shadcn/ui theme

> Purple-and-pink twilight hues on a dark canvas — a striking dark shadcn theme.

Source: https://designrevision.com/shadcn-themes/twilight

Install: `npx shadcn@latest add https://designrevision.com/r/themes/twilight.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0.0023 310);
  --foreground: oklch(0.205 0.0192 310);
  --card: oklch(0.995 0.0023 310);
  --card-foreground: oklch(0.205 0.0192 310);
  --popover: oklch(0.995 0.0023 310);
  --popover-foreground: oklch(0.205 0.0192 310);
  --primary: oklch(0.62 0.1792 310);
  --primary-foreground: oklch(0.205 0.0192 310);
  --secondary: oklch(0.968 0.0072 310);
  --secondary-foreground: oklch(0.205 0.0192 310);
  --muted: oklch(0.968 0.0072 310);
  --muted-foreground: oklch(0.5482 0.0292 310);
  --accent: oklch(0.96 0.0292 330);
  --accent-foreground: oklch(0.205 0.0192 330);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0.0072 310);
  --input: oklch(0.922 0.0072 310);
  --ring: oklch(0.62 0.1792 310);
  --chart-1: oklch(0.62 0.1492 310);
  --chart-2: oklch(0.68 0.1492 350);
  --chart-3: oklch(0.62 0.1492 30);
  --chart-4: oklch(0.68 0.1476 110);
  --chart-5: oklch(0.62 0.1062 190);
  --sidebar: oklch(0.995 0.0023 310);
  --sidebar-foreground: oklch(0.205 0.0192 310);
  --sidebar-primary: oklch(0.62 0.1792 310);
  --sidebar-primary-foreground: oklch(0.205 0.0192 310);
  --sidebar-accent: oklch(0.96 0.0292 330);
  --sidebar-accent-foreground: oklch(0.205 0.0192 330);
  --sidebar-border: oklch(0.922 0.0072 310);
  --sidebar-ring: oklch(0.62 0.1792 310);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0.0072 310);
  --foreground: oklch(0.985 0.0086 310);
  --card: oklch(0.205 0.0112 310);
  --card-foreground: oklch(0.985 0.0086 310);
  --popover: oklch(0.205 0.0112 310);
  --popover-foreground: oklch(0.985 0.0086 310);
  --primary: oklch(0.62 0.1792 310);
  --primary-foreground: oklch(0.205 0.0192 310);
  --secondary: oklch(0.27 0.0112 310);
  --secondary-foreground: oklch(0.985 0.0086 310);
  --muted: oklch(0.27 0.0112 310);
  --muted-foreground: oklch(0.6431 0.0292 310);
  --accent: oklch(0.31 0.0292 330);
  --accent-foreground: oklch(0.985 0.0092 330);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0.0112 310);
  --input: oklch(0.28 0.0112 310);
  --ring: oklch(0.62 0.1792 310);
  --chart-1: oklch(0.7 0.1692 310);
  --chart-2: oklch(0.74 0.1692 350);
  --chart-3: oklch(0.7 0.1692 30);
  --chart-4: oklch(0.74 0.1607 110);
  --chart-5: oklch(0.7 0.1201 190);
  --sidebar: oklch(0.16 0.0072 310);
  --sidebar-foreground: oklch(0.985 0.0086 310);
  --sidebar-primary: oklch(0.62 0.1792 310);
  --sidebar-primary-foreground: oklch(0.205 0.0192 310);
  --sidebar-accent: oklch(0.31 0.0292 330);
  --sidebar-accent-foreground: oklch(0.985 0.0092 330);
  --sidebar-border: oklch(0.28 0.0112 310);
  --sidebar-ring: oklch(0.62 0.1792 310);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Frost — shadcn/ui theme

> Cool, frosty blues inspired by arctic palettes — a crisp shadcn/ui theme.

Source: https://designrevision.com/shadcn-themes/frost

Install: `npx shadcn@latest add https://designrevision.com/r/themes/frost.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0.0024 225);
  --foreground: oklch(0.205 0.0192 225);
  --card: oklch(0.995 0.0024 225);
  --card-foreground: oklch(0.205 0.0192 225);
  --popover: oklch(0.995 0.0024 225);
  --popover-foreground: oklch(0.205 0.0192 225);
  --primary: oklch(0.62 0.0892 225);
  --primary-foreground: oklch(0.205 0.0192 225);
  --secondary: oklch(0.968 0.0072 225);
  --secondary-foreground: oklch(0.205 0.0192 225);
  --muted: oklch(0.968 0.0072 225);
  --muted-foreground: oklch(0.544 0.0292 225);
  --accent: oklch(0.96 0.0196 245);
  --accent-foreground: oklch(0.205 0.0192 245);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0.0072 225);
  --input: oklch(0.922 0.0072 225);
  --ring: oklch(0.62 0.0892 225);
  --chart-1: oklch(0.62 0.1166 225);
  --chart-2: oklch(0.68 0.1492 265);
  --chart-3: oklch(0.62 0.1492 305);
  --chart-4: oklch(0.68 0.1492 25);
  --chart-5: oklch(0.62 0.1307 105);
  --sidebar: oklch(0.995 0.0024 225);
  --sidebar-foreground: oklch(0.205 0.0192 225);
  --sidebar-primary: oklch(0.62 0.0892 225);
  --sidebar-primary-foreground: oklch(0.205 0.0192 225);
  --sidebar-accent: oklch(0.96 0.0196 245);
  --sidebar-accent-foreground: oklch(0.205 0.0192 245);
  --sidebar-border: oklch(0.922 0.0072 225);
  --sidebar-ring: oklch(0.62 0.0892 225);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0.0072 225);
  --foreground: oklch(0.985 0.0087 225);
  --card: oklch(0.205 0.0112 225);
  --card-foreground: oklch(0.985 0.0087 225);
  --popover: oklch(0.205 0.0112 225);
  --popover-foreground: oklch(0.985 0.0087 225);
  --primary: oklch(0.62 0.0892 225);
  --primary-foreground: oklch(0.205 0.0192 225);
  --secondary: oklch(0.27 0.0112 225);
  --secondary-foreground: oklch(0.985 0.0087 225);
  --muted: oklch(0.27 0.0112 225);
  --muted-foreground: oklch(0.6396 0.0292 225);
  --accent: oklch(0.31 0.0292 245);
  --accent-foreground: oklch(0.985 0.0067 245);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0.0112 225);
  --input: oklch(0.28 0.0112 225);
  --ring: oklch(0.62 0.0892 225);
  --chart-1: oklch(0.7 0.1318 225);
  --chart-2: oklch(0.74 0.1325 265);
  --chart-3: oklch(0.7 0.1692 305);
  --chart-4: oklch(0.74 0.1575 25);
  --chart-5: oklch(0.7 0.1477 105);
  --sidebar: oklch(0.16 0.0072 225);
  --sidebar-foreground: oklch(0.985 0.0087 225);
  --sidebar-primary: oklch(0.62 0.0892 225);
  --sidebar-primary-foreground: oklch(0.205 0.0192 225);
  --sidebar-accent: oklch(0.31 0.0292 245);
  --sidebar-accent-foreground: oklch(0.985 0.0067 245);
  --sidebar-border: oklch(0.28 0.0112 225);
  --sidebar-ring: oklch(0.62 0.0892 225);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```

---

# Mocha — shadcn/ui theme

> Warm mocha browns and muted accents for a cozy, low-contrast shadcn theme.

Source: https://designrevision.com/shadcn-themes/mocha

Install: `npx shadcn@latest add https://designrevision.com/r/themes/mocha.json`

---

```css
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.995 0.002 55);
  --foreground: oklch(0.205 0.0192 55);
  --card: oklch(0.995 0.002 55);
  --card-foreground: oklch(0.205 0.0192 55);
  --popover: oklch(0.995 0.002 55);
  --popover-foreground: oklch(0.205 0.0192 55);
  --primary: oklch(0.55 0.0692 55);
  --primary-foreground: oklch(0.985 0.0078 55);
  --secondary: oklch(0.968 0.0072 55);
  --secondary-foreground: oklch(0.205 0.0192 55);
  --muted: oklch(0.968 0.0072 55);
  --muted-foreground: oklch(0.205 0.0192 55);
  --accent: oklch(0.96 0.0292 75);
  --accent-foreground: oklch(0.205 0.0192 75);
  --destructive: oklch(0.5843 0.2192 27);
  --destructive-foreground: oklch(1 0 27);
  --border: oklch(0.922 0.0072 55);
  --input: oklch(0.922 0.0072 55);
  --ring: oklch(0.55 0.0692 55);
  --chart-1: oklch(0.62 0.1492 55);
  --chart-2: oklch(0.68 0.1388 95);
  --chart-3: oklch(0.62 0.1492 135);
  --chart-4: oklch(0.68 0.1193 215);
  --chart-5: oklch(0.62 0.1492 295);
  --sidebar: oklch(0.995 0.002 55);
  --sidebar-foreground: oklch(0.205 0.0192 55);
  --sidebar-primary: oklch(0.55 0.0692 55);
  --sidebar-primary-foreground: oklch(0.985 0.0078 55);
  --sidebar-accent: oklch(0.96 0.0292 75);
  --sidebar-accent-foreground: oklch(0.205 0.0192 75);
  --sidebar-border: oklch(0.922 0.0072 55);
  --sidebar-ring: oklch(0.55 0.0692 55);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
  --spacing: 0.25rem;
}

.dark {
  --background: oklch(0.16 0.0072 55);
  --foreground: oklch(0.985 0.0078 55);
  --card: oklch(0.205 0.0112 55);
  --card-foreground: oklch(0.985 0.0078 55);
  --popover: oklch(0.205 0.0112 55);
  --popover-foreground: oklch(0.985 0.0078 55);
  --primary: oklch(0.62 0.0692 55);
  --primary-foreground: oklch(0.205 0.0192 55);
  --secondary: oklch(0.27 0.0112 55);
  --secondary-foreground: oklch(0.985 0.0078 55);
  --muted: oklch(0.27 0.0112 55);
  --muted-foreground: oklch(0.985 0.0078 55);
  --accent: oklch(0.31 0.0292 75);
  --accent-foreground: oklch(0.985 0.0092 75);
  --destructive: oklch(0.581 0.1892 22);
  --destructive-foreground: oklch(1 0 22);
  --border: oklch(0.28 0.0112 55);
  --input: oklch(0.28 0.0112 55);
  --ring: oklch(0.62 0.0692 55);
  --chart-1: oklch(0.7 0.1692 55);
  --chart-2: oklch(0.74 0.1511 95);
  --chart-3: oklch(0.7 0.1692 135);
  --chart-4: oklch(0.74 0.1299 215);
  --chart-5: oklch(0.7 0.1692 295);
  --sidebar: oklch(0.16 0.0072 55);
  --sidebar-foreground: oklch(0.985 0.0078 55);
  --sidebar-primary: oklch(0.62 0.0692 55);
  --sidebar-primary-foreground: oklch(0.205 0.0192 55);
  --sidebar-accent: oklch(0.31 0.0292 75);
  --sidebar-accent-foreground: oklch(0.985 0.0092 75);
  --sidebar-border: oklch(0.28 0.0112 55);
  --sidebar-ring: oklch(0.62 0.0692 55);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Source Serif 4, ui-serif, Georgia, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
```