# Changelog
URL: /docs/changelog



# Introduction
URL: /docs



## What is Caprice UI?

Caprice UI is a collection of accessible, modern, and highly customizable React components built on top of [Base UI](https://base-ui.com/), [React Aria Hooks](https://react-spectrum.adobe.com/react-aria/hooks.html), [shadcn/ui](https://ui.shadcn.com/), and [Tailwind CSS v4](https://tailwindcss.com).

### Differences from shadcn/ui

* The main difference is the primitive layer. Caprice UI uses [Base UI](https://base-ui.com/) while [shadcn/ui](https://ui.shadcn.com/) uses [Radix UI](https://www.radix-ui.com/).
* Comes with refined styling and a different opinionated design language.
* Distributed via **shadcn registry** (recommended) or as an npm package (`@caprice-ui/react`)

We built Caprice UI as an extension of [shadcn/ui](https://ui.shadcn.com/), not as a replacement.

### About the name

The name **Caprice** comes from the French word *caprice* (pronounced "ka·pris"), borrowed from the Italian *capriccio*, meaning a sudden whim or fancy. As the ecosystem around [shadcn/ui](https://ui.shadcn.com/) emerged with countless forks and variations, we embraced our own little *caprice*: building a component collection that reflects our personal opinions, aesthetics, and the way we believe modern UI should feel.

## Maintainers

Caprice UI is designed, built, and maintained by [Thomas Marrec](https://x.com/Gomah) & [Léa Fabre](https://x.com/lea_kiwi).

## Acknowledgments

Powered by great open-source projects:

* [Base UI](https://base-ui.com/) – Component primitives
* [Tailwind CSS](https://tailwindcss.com/) – Styling
* [React Aria](https://react-spectrum.adobe.com/react-aria/hooks.html) – Interaction hooks
* [shadcn/ui](https://ui.shadcn.com/) – Component design and registry distribution
* [Fumadocs](https://fumadocs.com/) – Documentation

## Next steps

Check out our [installation guide](/docs/installation) to get started.

{/* Curious about what's coming next? Take a look at our [roadmap](/docs/roadmap) to see planned features and improvements. */}

Want to contribute? Please read our [Contributing Guide](https://github.com/caprice-ui/ui/blob/main/.github/CONTRIBUTING.md) to get started. Whether you're fixing bugs, improving documentation, or adding new features, your contributions help make Caprice UI better for everyone.


# Theming
URL: /docs/theming



You can choose between using CSS variables (recommended) or utility classes for theming.

## CSS Variables

```tsx
// [!code word:bg-background]
// [!code word:text-foreground]
<div className="bg-background text-foreground" />
```

To use CSS variables for theming set `tailwind.cssVariables` to `true` in your `components.json` file.

```json title="components.json" lineNumbers
{
  "style": "new-york",
  "rsc": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    // [!code highlight]
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
```

## Utility classes

```tsx
// [!code word:bg-zinc-950]
// [!code word:dark\:bg-white]
<div className="bg-zinc-950 dark:bg-white" />
```

To use utility classes for theming set `tailwind.cssVariables` to `false` in your `components.json` file.

```json title="components.json" lineNumbers
{
  "style": "new-york",
  "rsc": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    // [!code highlight]
    "cssVariables": false
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}
```

## Convention

We use a simple `background` and `foreground` convention for colors. The `background` variable is used for the background color of the component and the `foreground` variable is used for the text color.

<Callout className="mt-4">
  The `background` suffix is omitted when the variable is used for the background color of the component.
</Callout>

Given the following CSS variables:

```css
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
```

The `background` color of the following component will be `var(--primary)` and the `foreground` color will be `var(--primary-foreground)`.

```tsx
<div className="bg-primary text-primary-foreground">Hello</div>
```

## List of variables

Here's the list of variables available for customization:

```css title="app/globals.css" lineNumbers
:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 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.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}
```

## Adding new colors

To add new colors, you need to add them to your CSS file under the `:root` and `dark` pseudo-classes. Then, use the `@theme inline` directive to make the colors available as CSS variables.

### Using oklch values

```css title="app/globals.css" lineNumbers
:root {
  --warning: oklch(0.84 0.16 84);
  --warning-foreground: oklch(0.28 0.07 46);
}

.dark {
  --warning: oklch(0.41 0.11 46);
  --warning-foreground: oklch(0.99 0.02 95);
}

@theme inline {
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
}
```

### Using Tailwind CSS colors

```css title="app/globals.css" lineNumbers
:root {
  --warning: var(--color-yellow-500);
  --warning-foreground: var(--color-yellow-950);
}

.dark {
  --warning: var(--color-yellow-900);
  --warning-foreground: var(--color-yellow-500);
}

@theme inline {
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
}
```

You can now use the `warning` utility class in your components.

```tsx
// [!code word:bg-warning]
// [!code word:text-warning-foreground]
<div className="bg-warning text-warning-foreground" />
```

## Other color formats

See the [Tailwind CSS documentation](https://tailwindcss.com/docs/colors) for more information on using colors in Tailwind CSS.

## Base Colors

Caprice provides two approaches to theming:

1. **Caprice Theme** (Default): Uses Tailwind CSS color references for better integration
2. **Shadcn Themes**: Direct oklch values for precise color control

### Using Base Colors

Import base color themes from the `@caprice-ui/tailwind` package:

### Caprice (Default)

The default Caprice theme maps to Tailwind CSS colors, making it easy to leverage the existing Tailwind color system:

<CodeCollapsibleWrapper>
  ```css title="app/globals.css" lineNumbers
  :root {
    --background: var(--color-white);
    --foreground: var(--color-neutral-950);
    --card: var(--color-white);
    --card-foreground: var(--color-neutral-950);
    --popover: var(--color-white);
    --popover-foreground: var(--color-neutral-950);
    --primary: var(--color-zinc-900);
    --primary-foreground: var(--color-neutral-50);
    --secondary: var(--color-neutral-100);
    --secondary-foreground: var(--color-neutral-900);
    --muted: var(--color-neutral-100);
    --muted-foreground: var(--color-neutral-500);
    --accent: var(--color-neutral-100);
    --accent-foreground: var(--color-neutral-900);
    --destructive: var(--color-red-600);
    --destructive-foreground: var(--color-red-600);
    --border: var(--color-neutral-200);
    --input: var(--color-neutral-200);
    --ring: var(--color-neutral-400);
    --chart-1: var(--color-orange-600);
    --chart-2: var(--color-teal-600);
    --chart-3: var(--color-cyan-900);
    --chart-4: var(--color-amber-400);
    --chart-5: var(--color-amber-500);
    --radius: 0.625rem;
    --sidebar: var(--color-neutral-50);
    --sidebar-foreground: var(--color-neutral-950);
    --sidebar-primary: var(--color-neutral-900);
    --sidebar-primary-foreground: var(--color-neutral-50);
    --sidebar-accent: var(--color-neutral-100);
    --sidebar-accent-foreground: var(--color-neutral-900);
    --sidebar-border: var(--color-neutral-200);
    --sidebar-ring: var(--color-neutral-400);
  }

  .dark {
    --background: var(--color-neutral-950);
    --foreground: var(--color-neutral-50);
    --card: var(--color-neutral-950);
    --card-foreground: var(--color-neutral-50);
    --popover: var(--color-neutral-950);
    --popover-foreground: var(--color-neutral-50);
    --primary: var(--color-neutral-50);
    --primary-foreground: var(--color-neutral-900);
    --secondary: var(--color-neutral-800);
    --secondary-foreground: var(--color-neutral-50);
    --muted: var(--color-neutral-800);
    --muted-foreground: var(--color-neutral-400);
    --accent: var(--color-neutral-800);
    --accent-foreground: var(--color-neutral-50);
    --destructive: var(--color-red-400);
    --destructive-foreground: var(--color-red-600);
    --border: var(--color-neutral-800);
    --input: var(--color-neutral-800);
    --ring: var(--color-neutral-600);
    --chart-1: var(--color-blue-700);
    --chart-2: var(--color-emerald-500);
    --chart-3: var(--color-amber-500);
    --chart-4: var(--color-purple-500);
    --chart-5: var(--color-rose-500);
    --sidebar: var(--color-neutral-900);
    --sidebar-foreground: var(--color-neutral-50);
    --sidebar-primary: var(--color-blue-700);
    --sidebar-primary-foreground: var(--color-neutral-50);
    --sidebar-accent: var(--color-neutral-800);
    --sidebar-accent-foreground: var(--color-neutral-50);
    --sidebar-border: var(--color-neutral-800);
    --sidebar-ring: var(--color-neutral-600);
  }
  ```
</CodeCollapsibleWrapper>

<Callout title="@caprice-ui/tailwind" type="info">
  You can import it in your `global.css` file using the `@caprice-ui/tailwind` package:
</Callout>

```css title="app/globals.css" lineNumbers
@import "tailwindcss";
@import "@caprice-ui/tailwind/themes/caprice";
@import "@caprice-ui/tailwind/preset";
```

## Shadcn Base Colors

The following themes use oklch color values and can be imported from `@caprice-ui/tailwind/themes/shadcn/*`.

### Neutral

<CodeCollapsibleWrapper>
  ```css title="app/globals.css" lineNumbers
  :root {
    --radius: 0.625rem;
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.708 0 0);
  }

  .dark {
    --background: oklch(0.145 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.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.556 0 0);
  }
  ```
</CodeCollapsibleWrapper>

Or import it in your `global.css` file:

```css title="app/globals.css" lineNumbers
@import "tailwindcss";
@import "@caprice-ui/tailwind/themes/shadcn";
@import "@caprice-ui/tailwind/preset";
```

### Stone

<CodeCollapsibleWrapper>
  ```css title="app/globals.css" lineNumbers
  :root {
    --radius: 0.625rem;
    --background: oklch(1 0 0);
    --foreground: oklch(0.147 0.004 49.25);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.147 0.004 49.25);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.147 0.004 49.25);
    --primary: oklch(0.216 0.006 56.043);
    --primary-foreground: oklch(0.985 0.001 106.423);
    --secondary: oklch(0.97 0.001 106.424);
    --secondary-foreground: oklch(0.216 0.006 56.043);
    --muted: oklch(0.97 0.001 106.424);
    --muted-foreground: oklch(0.553 0.013 58.071);
    --accent: oklch(0.97 0.001 106.424);
    --accent-foreground: oklch(0.216 0.006 56.043);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.577 0.245 27.325);
    --border: oklch(0.923 0.003 48.717);
    --input: oklch(0.923 0.003 48.717);
    --ring: oklch(0.709 0.01 56.259);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --sidebar: oklch(0.985 0.001 106.423);
    --sidebar-foreground: oklch(0.147 0.004 49.25);
    --sidebar-primary: oklch(0.216 0.006 56.043);
    --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
    --sidebar-accent: oklch(0.97 0.001 106.424);
    --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
    --sidebar-border: oklch(0.923 0.003 48.717);
    --sidebar-ring: oklch(0.709 0.01 56.259);
  }

  .dark {
    --background: oklch(0.147 0.004 49.25);
    --foreground: oklch(0.985 0.001 106.423);
    --card: oklch(0.216 0.006 56.043);
    --card-foreground: oklch(0.985 0.001 106.423);
    --popover: oklch(0.216 0.006 56.043);
    --popover-foreground: oklch(0.985 0.001 106.423);
    --primary: oklch(0.923 0.003 48.717);
    --primary-foreground: oklch(0.216 0.006 56.043);
    --secondary: oklch(0.268 0.007 34.298);
    --secondary-foreground: oklch(0.985 0.001 106.423);
    --muted: oklch(0.268 0.007 34.298);
    --muted-foreground: oklch(0.709 0.01 56.259);
    --accent: oklch(0.268 0.007 34.298);
    --accent-foreground: oklch(0.985 0.001 106.423);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.637 0.237 25.331);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.553 0.013 58.071);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.216 0.006 56.043);
    --sidebar-foreground: oklch(0.985 0.001 106.423);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
    --sidebar-accent: oklch(0.268 0.007 34.298);
    --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.553 0.013 58.071);
  }
  ```

  Or import it in your `global.css` file:

  ```css title="app/globals.css" lineNumbers
  @import "tailwindcss";
  @import "@caprice-ui/tailwind/themes/shadcn/stone";
  @import "@caprice-ui/tailwind/preset";
  ```
</CodeCollapsibleWrapper>

### Zinc

<CodeCollapsibleWrapper>
  ```css title="app/globals.css" lineNumbers
  :root {
    --radius: 0.625rem;
    --background: oklch(1 0 0);
    --foreground: oklch(0.141 0.005 285.823);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.141 0.005 285.823);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.141 0.005 285.823);
    --primary: oklch(0.21 0.006 285.885);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.967 0.001 286.375);
    --secondary-foreground: oklch(0.21 0.006 285.885);
    --muted: oklch(0.967 0.001 286.375);
    --muted-foreground: oklch(0.552 0.016 285.938);
    --accent: oklch(0.967 0.001 286.375);
    --accent-foreground: oklch(0.21 0.006 285.885);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.577 0.245 27.325);
    --border: oklch(0.92 0.004 286.32);
    --input: oklch(0.92 0.004 286.32);
    --ring: oklch(0.705 0.015 286.067);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.141 0.005 285.823);
    --sidebar-primary: oklch(0.21 0.006 285.885);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.967 0.001 286.375);
    --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
    --sidebar-border: oklch(0.92 0.004 286.32);
    --sidebar-ring: oklch(0.705 0.015 286.067);
  }

  .dark {
    --background: oklch(0.141 0.005 285.823);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.21 0.006 285.885);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.21 0.006 285.885);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.92 0.004 286.32);
    --primary-foreground: oklch(0.21 0.006 285.885);
    --secondary: oklch(0.274 0.006 286.033);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.274 0.006 286.033);
    --muted-foreground: oklch(0.705 0.015 286.067);
    --accent: oklch(0.274 0.006 286.033);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.637 0.237 25.331);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.552 0.016 285.938);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.21 0.006 285.885);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.274 0.006 286.033);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.552 0.016 285.938);
  }
  ```

  Or import it in your `global.css` file:

  ```css title="app/globals.css" lineNumbers
  @import "tailwindcss";
  @import "@caprice-ui/tailwind/themes/shadcn/zinc";
  @import "@caprice-ui/tailwind/preset";
  ```
</CodeCollapsibleWrapper>

### Gray

<CodeCollapsibleWrapper>
  ```css title="app/globals.css" lineNumbers
  :root {
    --radius: 0.625rem;
    --background: oklch(1 0 0);
    --foreground: oklch(0.13 0.028 261.692);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.13 0.028 261.692);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.13 0.028 261.692);
    --primary: oklch(0.21 0.034 264.665);
    --primary-foreground: oklch(0.985 0.002 247.839);
    --secondary: oklch(0.967 0.003 264.542);
    --secondary-foreground: oklch(0.21 0.034 264.665);
    --muted: oklch(0.967 0.003 264.542);
    --muted-foreground: oklch(0.551 0.027 264.364);
    --accent: oklch(0.967 0.003 264.542);
    --accent-foreground: oklch(0.21 0.034 264.665);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.577 0.245 27.325);
    --border: oklch(0.928 0.006 264.531);
    --input: oklch(0.928 0.006 264.531);
    --ring: oklch(0.707 0.022 261.325);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --sidebar: oklch(0.985 0.002 247.839);
    --sidebar-foreground: oklch(0.13 0.028 261.692);
    --sidebar-primary: oklch(0.21 0.034 264.665);
    --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
    --sidebar-accent: oklch(0.967 0.003 264.542);
    --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
    --sidebar-border: oklch(0.928 0.006 264.531);
    --sidebar-ring: oklch(0.707 0.022 261.325);
  }

  .dark {
    --background: oklch(0.13 0.028 261.692);
    --foreground: oklch(0.985 0.002 247.839);
    --card: oklch(0.21 0.034 264.665);
    --card-foreground: oklch(0.985 0.002 247.839);
    --popover: oklch(0.21 0.034 264.665);
    --popover-foreground: oklch(0.985 0.002 247.839);
    --primary: oklch(0.928 0.006 264.531);
    --primary-foreground: oklch(0.21 0.034 264.665);
    --secondary: oklch(0.278 0.033 256.848);
    --secondary-foreground: oklch(0.985 0.002 247.839);
    --muted: oklch(0.278 0.033 256.848);
    --muted-foreground: oklch(0.707 0.022 261.325);
    --accent: oklch(0.278 0.033 256.848);
    --accent-foreground: oklch(0.985 0.002 247.839);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.637 0.237 25.331);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.551 0.027 264.364);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.21 0.034 264.665);
    --sidebar-foreground: oklch(0.985 0.002 247.839);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
    --sidebar-accent: oklch(0.278 0.033 256.848);
    --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.551 0.027 264.364);
  }
  ```

  Or import it in your `global.css` file:

  ```css title="app/globals.css" lineNumbers
  @import "tailwindcss";
  @import "@caprice-ui/tailwind/themes/shadcn/gray";
  @import "@caprice-ui/tailwind/preset";
  ```
</CodeCollapsibleWrapper>

### Slate

<CodeCollapsibleWrapper>
  ```css title="app/globals.css" lineNumbers
  :root {
    --radius: 0.625rem;
    --background: oklch(1 0 0);
    --foreground: oklch(0.129 0.042 264.695);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.129 0.042 264.695);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.129 0.042 264.695);
    --primary: oklch(0.208 0.042 265.755);
    --primary-foreground: oklch(0.984 0.003 247.858);
    --secondary: oklch(0.968 0.007 247.896);
    --secondary-foreground: oklch(0.208 0.042 265.755);
    --muted: oklch(0.968 0.007 247.896);
    --muted-foreground: oklch(0.554 0.046 257.417);
    --accent: oklch(0.968 0.007 247.896);
    --accent-foreground: oklch(0.208 0.042 265.755);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.577 0.245 27.325);
    --border: oklch(0.929 0.013 255.508);
    --input: oklch(0.929 0.013 255.508);
    --ring: oklch(0.704 0.04 256.788);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --sidebar: oklch(0.984 0.003 247.858);
    --sidebar-foreground: oklch(0.129 0.042 264.695);
    --sidebar-primary: oklch(0.208 0.042 265.755);
    --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
    --sidebar-accent: oklch(0.968 0.007 247.896);
    --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
    --sidebar-border: oklch(0.929 0.013 255.508);
    --sidebar-ring: oklch(0.704 0.04 256.788);
  }

  .dark {
    --background: oklch(0.129 0.042 264.695);
    --foreground: oklch(0.984 0.003 247.858);
    --card: oklch(0.208 0.042 265.755);
    --card-foreground: oklch(0.984 0.003 247.858);
    --popover: oklch(0.208 0.042 265.755);
    --popover-foreground: oklch(0.984 0.003 247.858);
    --primary: oklch(0.929 0.013 255.508);
    --primary-foreground: oklch(0.208 0.042 265.755);
    --secondary: oklch(0.279 0.041 260.031);
    --secondary-foreground: oklch(0.984 0.003 247.858);
    --muted: oklch(0.279 0.041 260.031);
    --muted-foreground: oklch(0.704 0.04 256.788);
    --accent: oklch(0.279 0.041 260.031);
    --accent-foreground: oklch(0.984 0.003 247.858);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.637 0.237 25.331);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.551 0.027 264.364);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.208 0.042 265.755);
    --sidebar-foreground: oklch(0.984 0.003 247.858);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
    --sidebar-accent: oklch(0.279 0.041 260.031);
    --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.551 0.027 264.364);
  }
  ```

  Or import it in your `global.css` file:

  ```css title="app/globals.css" lineNumbers
  @import "tailwindcss";
  @import "@caprice-ui/tailwind/themes/shadcn/slate";
  @import "@caprice-ui/tailwind/preset";
  ```
</CodeCollapsibleWrapper>


# MCP Server
URL: /docs/ai/mcp



Model Context Protocol (MCP) is an open standard that enables AI assistants to securely connect to external data sources and tools.

The shadcn MCP Server allows AI assistants to interact with items from registries. You can browse available components, search for specific ones, and install them directly into your project using natural language.

## Quick start

First, make sure the Caprice UI registry is present in your components.json file:

```json title="components.json"
{
  "registries": {
    "@caprice": "https://caprice-ui.com/r/{name}.json"
  }
}
```

Then select your MCP client and follow the instructions to configure the shadcn MCP server. If you'd like to do it manually, see the official [shadcn MCP documentation](https://ui.shadcn.com/docs/mcp#configuration).

<Tabs items={["Claude Code", "Cursor", "VS Code", "Codex"]}>
  <Tab value="Claude Code">
    **Run the following command** in your project:

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npx shadcn@latest mcp init --client claude
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest mcp init --client claude
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn dlx shadcn@latest mcp init --client claude
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun x shadcn@latest mcp init --client claude
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    **Restart Claude Code** and try the following prompts:

    * Show me all available components in the shadcn registry
    * Add the button, dialog and card components to my project
    * Create a contact form using components from the shadcn registry

    **Note:** You can use `/mcp` command in Claude Code to debug the MCP server.
  </Tab>

  <Tab value="Cursor">
    **Run the following command** in your project:

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npx shadcn@latest mcp init --client cursor
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest mcp init --client cursor
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn dlx shadcn@latest mcp init --client cursor
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun x shadcn@latest mcp init --client cursor
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    Open **Cursor Settings** and **Enable the MCP server** for shadcn. Then try the following prompts:

    * Show me all available components in the shadcn registry
    * Add the button, dialog and card components to my project
    * Create a contact form using components from the shadcn registry
  </Tab>

  <Tab value="VS Code">
    **Run the following command** in your project:

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npx shadcn@latest mcp init --client vscode
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest mcp init --client vscode
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn dlx shadcn@latest mcp init --client vscode
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun x shadcn@latest mcp init --client vscode
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    Open `.vscode/mcp.json` and click **Start** next to the shadcn server. Then try the following prompts with GitHub Copilot:

    * Show me all available components in the shadcn registry
    * Add the button, dialog and card components to my project
    * Create a contact form using components from the shadcn registry
  </Tab>

  <Tab value="Codex">
    <Callout className="mt-0">
      **Note:** The `shadcn` CLI cannot automatically update `~/.codex/config.toml`.
      You'll need to add the configuration manually for Codex.
    </Callout>

    **Run the following command** in your project:

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npx shadcn@latest mcp init --client codex
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest mcp init --client codex
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn dlx shadcn@latest mcp init --client codex
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun x shadcn@latest mcp init --client codex
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    **Then, add the following configuration** to `~/.codex/config.toml`:

    ```toml
    [mcp_servers.shadcn]
    command = "npx"
    args = ["shadcn@latest", "mcp"]
    ```

    **Restart Codex** and try the following prompts:

    * Show me all available components in the shadcn registry
    * Add the button, dialog and card components to my project
    * Create a contact form using components from the shadcn registry
  </Tab>
</Tabs>

## Usage

You can now ask your IDE to use any Caprice UI component. Here are some prompt examples:

* Add Button component from the Caprice UI registry.
* Show me all available components in the Caprice UI registry.

{/* Todo: Add more examples later on. */}

## Learn more

To learn more about using the shadcn MCP server, including manual setup for different clients, please visit the official [shadcn MCP documentation](https://ui.shadcn.com/docs/mcp#configuration).


# Accordion
URL: /docs/components/accordion



<ComponentPreview name="accordion" />

## Installation

<InstallTabs name="accordion" />

## Usage

<UsageImport imports={{ name: 'Accordion' }} />

```tsx lineNumbers
<Accordion.Root>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>What is Base UI?</Accordion.Trigger>
    <Accordion.Panel>
      Base UI is a library of high-quality unstyled React components for design systems
      and web apps.
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>
```

## Examples

### Single

<ComponentExample src="accordion/single" />

### Multiple

You can set up the accordion to allow multiple panels to be open at the same time using the `multiple` prop.

<ComponentExample src="accordion/multiple" />

### Controlled

<ComponentExample src="accordion/controlled" />

## Differences with shadcn/ui / Radix

If you're familiar with Radix UI and shadcn/ui, most patterns will carry over. This guide points out the differences so you can start using Caprice UI without surprises.

### Key changes

| Feature              | shadcn/ui                           | Caprice UI                                           |
| -------------------- | ----------------------------------- | ---------------------------------------------------- |
| Primitive            | Radix Accordion                     | Base UI Accordion                                    |
| Multiple items       | `type="multiple"`                   | `multiple={true}`                                    |
| Single item          | `type="single"`                     | Default (no prop needed)                             |
| Collapsible          | `collapsible` prop                  | Always collapsible                                   |
| Default value        | String (single) or Array (multiple) | Always Array                                         |
| Composition          | `asChild` prop                      | `render` prop                                        |
| Panel component      | `AccordionContent`                  | `AccordionPanel` (`AccordionContent` deprecated)     |
| Open state attribute | `data-state="open"`                 | `data-panel-open`                                    |
| Animation            | CSS keyframe animations             | CSS height transition via `--accordion-panel-height` |
| Hidden until found   | Not supported                       | `hiddenUntilFound={true}`                            |
| Reduced motion       | Not included                        | `motion-reduce:transition-none`                      |
| Disabled opacity     | `opacity-50`                        | `opacity-60`                                         |

The `hiddenUntilFound` prop enables browser find-in-page (<Kbd>⌘</Kbd>/<Kbd>Ctrl</Kbd> + <Kbd>F</Kbd>) to search content inside collapsed panels. When a match is found, the browser automatically expands the accordion item.

### Comparison Example

```tsx title="shadcn/ui" lineNumbers
<Accordion type="multiple" collapsible defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA pattern.</AccordionContent>
  </AccordionItem>
</Accordion>
```

```tsx title="Caprice UI" lineNumbers
<Accordion.Root multiple defaultValue={['item-1']}>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
    <Accordion.Panel>Yes. It adheres to the WAI-ARIA pattern.</Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>
```

## API Reference

### Root

<AutoTypeTable path="./lib/component-types.tsx" name="AccordionRootProps" />

### Item

<AutoTypeTable path="./lib/component-types.tsx" name="AccordionItemProps" />

### Trigger

<AutoTypeTable path="./lib/component-types.tsx" name="AccordionTriggerProps" />

### Panel

<AutoTypeTable path="./lib/component-types.tsx" name="AccordionPanelProps" />


# Alert Dialog
URL: /docs/components/alert-dialog



<ComponentPreview name="alert-dialog" />

## Installation

<InstallTabs name="alert-dialog" />

## Usage

<UsageImport imports={{ name: 'AlertDialog' }} />

```tsx
<AlertDialog.Root>
  <AlertDialog.Trigger render={<Button>Discard draft</Button>} />

  <AlertDialog.Popup>
    <AlertDialog.Title>Discard draft?</AlertDialog.Title>
    <AlertDialog.Description>You can't undo this action.</AlertDialog.Description>
    <AlertDialog.Footer>
      <AlertDialog.Close>Cancel</AlertDialog.Close>
      <AlertDialog.Close variant="default">Discard</AlertDialog.Close>
    </AlertDialog.Footer>
  </AlertDialog.Popup>
</AlertDialog.Root>
```

## Examples

### Open from a menu

### Close confirmation (nested dialogs)

## API Reference

### Root

<AutoTypeTable path="./lib/component-types.tsx" name="AlertDialogRootProps" />

### Trigger

<AutoTypeTable path="./lib/component-types.tsx" name="AlertDialogTriggerProps" />

### Popup

<AutoTypeTable path="./lib/component-types.tsx" name="AlertDialogPopupProps" />

### Title

<AutoTypeTable path="./lib/component-types.tsx" name="AlertDialogTitleProps" />

### Description

<AutoTypeTable path="./lib/component-types.tsx" name="AlertDialogDescriptionProps" />

### Footer

<AutoTypeTable path="./lib/component-types.tsx" name="AlertDialogFooterProps" />

### Close

<AutoTypeTable path="./lib/component-types.tsx" name="AlertDialogCloseProps" />


# Alert
URL: /docs/components/alert



<ComponentPreview name="alert" />

## Installation

<InstallTabs name="alert" />

## Usage

<UsageImport imports={{ name: 'Alert' }} />

## Examples

### Icon

<ComponentExample src="alert/icon" />

### info

<ComponentExample src="alert/info" />

### Warning

<ComponentExample src="alert/warning" />

### Success

<ComponentExample src="alert/success" />

### Destructive

<ComponentExample src="alert/destructive" />

### Dismissible

<ComponentExample src="alert/dismissible" />

### Custom

<ComponentExample src="alert/custom" />

{/* todo: add actions & dismissible */}

## Differences with shadcn/ui / Radix

If you're familiar with Radix UI and shadcn/ui, most patterns will carry over. This guide points out the differences so you can start using Caprice UI without surprises.

### Key changes

| Feature           | shadcn/ui                            | Caprice UI                                                  |
| ----------------- | ------------------------------------ | ----------------------------------------------------------- |
| Primitive         | Native `<div>` elements              | Base UI `useRender` + native `<div>`                        |
| Composition       | None                                 | `render` prop                                               |
| API pattern       | Flat exports (`Alert`, `AlertTitle`) | Namespace pattern (`Alert.Root`, `Alert.Title`)             |
| Variants          | `default`, `destructive`             | `default`, `success`, `info`, `warning`, `destructive`      |
| Border radius     | `rounded-lg`                         | `rounded-xl`                                                |
| Destructive style | `text-destructive bg-card`           | `border-destructive/30 bg-destructive/5` with icon coloring |
| Semantic colors   | Not included                         | `success`, `info`, `warning` with opacity-based bg/border   |

### Comparison Example

```tsx title="shadcn/ui" lineNumbers
<Alert variant="destructive">
  <AlertCircle className="h-4 w-4" />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Something went wrong.</AlertDescription>
</Alert>
```

```tsx title="Caprice UI" lineNumbers
<Alert.Root variant="destructive">
  <AlertCircle />
  <Alert.Title>Error</Alert.Title>
  <Alert.Description>Something went wrong.</Alert.Description>
</Alert.Root>
```

## Variants

<AutoTypeTable path="./lib/component-types.tsx" name="AlertVariants" />

## API Reference

### Root

<AutoTypeTable path="./lib/component-types.tsx" name="AlertRootProps" />

### Title

<AutoTypeTable path="./lib/component-types.tsx" name="AlertTitleProps" />

### Description

<AutoTypeTable path="./lib/component-types.tsx" name="AlertDescriptionProps" />


# Autocomplete
URL: /docs/components/autocomplete



<ComponentPreview name="autocomplete" />

## Installation

<InstallTabs name="autocomplete" />

## Usage

<UsageImport imports={{ name: 'Autocomplete' }} />

## Examples

## API Reference

### Root

<AutoTypeTable path="./lib/component-types.tsx" name="AutocompleteRootProps" />


# Avatar Group
URL: /docs/components/avatar-group



<ComponentPreview name="avatar-group" />

## Installation

<InstallTabs name="avatar-group" />

## Usage

<UsageImport imports={[{ name: 'AvatarGroup', filePath: 'avatar-group' }, { name: 'Avatar' }]} />

## Examples

## API Reference

### Root

<AutoTypeTable path="./lib/component-types.tsx" name="AvatarGroupRootProps" />


# Avatar
URL: /docs/components/avatar



<ComponentPreview name="avatar" />

## Installation

<InstallTabs name="avatar" />

## Usage

<UsageImport imports={{ name: 'Avatar' }} />

## Examples

### Open from a menu

### Close confirmation (nested dialogs)

## API Reference

### Root

<AutoTypeTable path="./lib/component-types.tsx" name="AvatarRootProps" />

### Image

<AutoTypeTable path="./lib/component-types.tsx" name="AvatarImageProps" />


# Badge
URL: /docs/components/badge



<ComponentPreview name="badge" />

## Installation

<InstallTabs name="badge" />

## Usage

<UsageImport imports={{ name: 'Badge', namespace: false }} />

## Examples

## API Reference

<AutoTypeTable path="./lib/component-types.tsx" name="BadgeProps" />


# Button Group
URL: /docs/components/button-group



<ComponentPreview name="button-group" />

## Installation

<InstallTabs name="button-group" />

## Usage

<UsageImport imports={[{ name: 'ButtonGroup',  filePath: 'button-group' }, { name: 'Button', namespace: false }]} />

## Examples

## API Reference

### Root

<AutoTypeTable path="./lib/component-types.tsx" name="ButtonGroupRootProps" />


# Button
URL: /docs/components/button



<ComponentPreview name="button" />

## Installation

<InstallTabs name="button" />

## Usage

<UsageImport imports={{ name: 'Button', namespace: false }} />

```tsx
<Button variant="outline">Button</Button>
```

## Examples

### Rendering as another tag

You can use the [`render`](https://base-ui.com/react/handbook/composition) prop to make another component look like a button. Here's an example of a link that looks like a button.

<ComponentSource defaultOpen={true} src="docs/showcase/examples/button/render-link.tsx" />

The button can remain keyboard accessible while being rendered as another tag, such as a `<div>`, by specifying `nativeButton={false}`.

```tsx
import { Button } from '@/components/caprice-ui/button';

<Button render={<div />} nativeButton={false}>
  Button that can contain complex children
</Button>
```

### Focusable When Disabled

For buttons that enter a loading state after being clicked, specify the `focusableWhenDisabled` prop to ensure focus remains on the button when it becomes disabled. This prevents focus from being lost and maintains the tab order.

<ComponentExample src="button/focusable-when-disabled" />

### Sizes

<ComponentExample src="button/sizes" />

### Variant

#### Primary (default)

<ComponentExample src="button/primary" />

#### Outline

<ComponentExample src="button/outline" />

#### Secondary

<ComponentExample src="button/secondary" />

#### Ghost

<ComponentExample src="button/ghost" />

#### Destructive

<ComponentExample src="button/destructive" />

#### Link

<ComponentExample src="button/link" />

### Icon

<ComponentExample src="button/icon" />

### With Icon

The spacing between the icon and the text is automatically adjusted based on the size of the button. You do not need any margin on the icon.

<ComponentExample src="button/with-icon" />

### Rounded

Use the `rounded-full` class to make the button rounded.

<ComponentExample src="button/rounded" />

### Spinner

<ComponentExample src="button/spinner" />

### Full Width

<ComponentExample src="button/full-width" />

## Differences with shadcn/ui / Radix

If you're familiar with Radix UI and shadcn/ui, most patterns will carry over. This guide points out the differences so you can start using Caprice UI without surprises.

### Key changes

| Feature                 | shadcn/ui                                           | Caprice UI                                                                         |
| ----------------------- | --------------------------------------------------- | ---------------------------------------------------------------------------------- |
| Primitive               | Radix Slot + native `<button>`                      | Base UI Button                                                                     |
| Composition             | `asChild` prop                                      | `render` prop [(see example)](#rendering-as-another-tag)                           |
| Sizes                   | `default`, `sm`, `lg`, `icon`, `icon-sm`, `icon-lg` | `sm`, `md`, `lg`, `xl`, `2xl`, `icon`, `icon-sm`, `icon-lg`, `icon-xl`, `icon-2xl` |
| Default variant         | `default`                                           | `primary`                                                                          |
| Default size            | `default`                                           | `md`                                                                               |
| Press events            | Standard `onClick` only                             | `onPress`, `onPressStart`, `onPressChange`, `onPressEnd`, `onPressUp`              |
| Pressed state           | None                                                | Scale + inset shadow                                                               |
| Disabled attribute      | `:disabled`                                         | `data-disabled`                                                                    |
| Focusable when disabled | No                                                  | Possible [(see example)](#focusable-when-disabled)                                 |
| Focus indicator         | Ring (`ring-[3px]`)                                 | Outline (`outline-2`)                                                              |

The `xl` and `2xl` sizes (48px & 56px) are designed with accessibility in mind. They exceed [WCAG 2.1's 44×44px minimum touch target](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html), match [Material Design's 48dp guideline](https://m3.material.io/foundations/accessible-design/accessibility-basics), and reduce missed taps for users with motor impairments or limited dexterity.

Use them for primary CTAs, mobile interfaces, or anywhere a larger hit area improves the experience.

Alternatively, you can check the [touch-hitbox utility](https://caprice-ui.com/docs/utilities/touch-hitbox) for a more flexible approach.

### Comparison Example

```tsx title="shadcn/ui" lineNumbers
<Button variant="default" size="default" asChild>
  <Link href="/login">Login</Link>
</Button>
```

```tsx title="Caprice UI" lineNumbers
<Button variant="primary" size="md" render={<Link href="/login" />} nativeButton={false}>
  Login
</Button>
```

## Accessibility

* **Icon-only buttons** require an `aria-label` to provide an accessible name. Consider wrapping with a `Tooltip` for additional context.
* **Loading states**: When the button enters a loading state, use the `focusableWhenDisabled` prop to maintain focus and prevent the user from losing their place in the tab order. This automatically applies `aria-disabled="true"` to communicate the unavailable state to assistive technologies.
* **Keyboard interaction**: The `<button>` element responds to both <Kbd>Space</Kbd> and <Kbd>Enter</Kbd> keys. When rendered as `<a>`, only <Kbd>Enter</Kbd> triggers the action.
* **Disabled buttons**: The component uses `data-disabled` for styling and can optionally remain focusable via `focusableWhenDisabled`, allowing screen reader users to discover why a button is unavailable.

## API Reference

<AutoTypeTable path="./lib/component-types.tsx" name="ButtonProps" />


# Checkbox
URL: /docs/components/checkbox



<ComponentPreview name="checkbox" />

## Installation

<InstallTabs name="checkbox" />

## Usage

<UsageImport imports={{ name: ['Checkbox', 'CheckboxGroup'], filePath: 'checkbox' }} />

## Examples

## API Reference

### CheckboxGroup

<AutoTypeTable path="./lib/component-types.tsx" name="CheckboxGroupProps" />

### Checkbox

<AutoTypeTable path="./lib/component-types.tsx" name="CheckboxProps" />


# Collapsible
URL: /docs/components/collapsible



<ComponentPreview name="collapsible" />

## Installation

<InstallTabs name="collapsible" />

## Usage

<UsageImport imports={{ name: 'Collapsible' }} />

## Examples

## API Reference

### Root

<AutoTypeTable path="./lib/component-types.tsx" name="CollapsibleRootProps" />

### Trigger

<AutoTypeTable path="./lib/component-types.tsx" name="CollapsibleTriggerProps" />

### Panel

<AutoTypeTable path="./lib/component-types.tsx" name="CollapsiblePanelProps" />


# Combobox
URL: /docs/components/combobox



<ComponentPreview name="combobox" />

## Installation

<InstallTabs name="combobox" />

## Usage

<UsageImport imports={{ name: 'Combobox' }} />

## Examples

## API Reference

### Root

<AutoTypeTable path="./lib/component-types.tsx" name="ComboboxRootProps" />


# Context Menu
URL: /docs/components/context-menu



<ComponentPreview name="context-menu" />

## Installation

<InstallTabs name="context-menu" />

## Usage

<UsageImport imports={{ name: 'ContextMenu', filePath: 'context-menu' }} />

## Examples

## API Reference


# Dialog
URL: /docs/components/dialog



<ComponentPreview name="dialog" />

## Installation

<InstallTabs name="dialog" />

## Usage

<UsageImport imports={{ name: 'Dialog' }} />

## Examples

## API Reference


# Empty
URL: /docs/components/empty



<ComponentPreview name="empty" />

## Installation

<InstallTabs name="empty" />

## Usage

<UsageImport imports={[{ name: 'Empty' }]} />


# Field
URL: /docs/components/field



<ComponentPreview name="field" />

## Installation

<InstallTabs name="field" />

## Usage

<UsageImport imports={{ name: 'Field' }} />

## Examples

## API Reference


# Fieldset
URL: /docs/components/fieldset



<ComponentPreview name="fieldset" />

## Installation

<InstallTabs name="fieldset" />

## Usage

<UsageImport imports={{ name: 'Fieldset' }} />

## Examples

## API Reference


# Form
URL: /docs/components/form



<ComponentPreview name="form" />

## Installation

<InstallTabs name="form" />

## Usage

<UsageImport imports={{ name: 'Form', namespace: false }} />

## Examples

## API Reference


# Components
URL: /docs/components



<ComponentsView />

If you have any suggestions or feedback, please feel free to [open an issue](https://github.com/caprice-ui/ui/issues)
or [submit a pull request](https://github.com/caprice-ui/ui/pulls).

You can also check out the [source code](https://github.com/caprice-ui/ui) to see how the components are implemented.


# Input
URL: /docs/components/input



<ComponentPreview name="input" />

## Installation

<InstallTabs name="input" />

## Usage

<UsageImport imports={{ name: 'Input', namespace: false }} />

## Examples

## API Reference


# Kbd
URL: /docs/components/kbd



<ComponentPreview className="not-prose" name="kbd" />

## Installation

<InstallTabs name="kbd" />

## Usage

<UsageImport imports={[{ name: ['Kbd', 'KbdGroup'], namespace: false }]} />


# Menu
URL: /docs/components/menu



<ComponentPreview name="menu" />

## Installation

<InstallTabs name="menu" />

## Usage

<UsageImport imports={{ name: 'Menu' }} />

## Examples

## API Reference


# Menubar
URL: /docs/components/menubar



<ComponentPreview name="menubar" />

## Installation

<InstallTabs name="menubar" />

## Usage

<UsageImport imports={{ name: 'Menubar', namespace: false }} />

## Examples

## API Reference


# Meter
URL: /docs/components/meter



<ComponentPreview name="meter" />

## Installation

<InstallTabs name="meter" />

## Usage

<UsageImport imports={{ name: 'Meter' }} />

## Examples

## API Reference


# Navigation Menu
URL: /docs/components/navigation-menu



<ComponentPreview name="navigation-menu" />

## Installation

<InstallTabs name="navigation-menu" />

## Usage

<UsageImport imports={{ name: 'NavigationMenu', filePath: 'navigation-menu' }} />

## Examples

## API Reference


# Number Field
URL: /docs/components/number-field



<ComponentPreview name="number-field" />

## Installation

<InstallTabs name="number-field" />

## Usage

<UsageImport imports={{ name: 'NumberField', filePath: 'number-field' }} />

## Examples

## API Reference


# Popover
URL: /docs/components/popover



<ComponentPreview name="popover" />

## Installation

<InstallTabs name="popover" />

## Usage

<UsageImport imports={{ name: 'Popover' }} />

## Examples

## API Reference


# Preview Card
URL: /docs/components/preview-card



<ComponentPreview name="preview-card" />

## Installation

<InstallTabs name="preview-card" />

## Usage

<UsageImport imports={{ name: 'PreviewCard', filePath: 'preview-card' }} />

## Examples

## API Reference


# Progress
URL: /docs/components/progress



<ComponentPreview name="progress" />

## Installation

<InstallTabs name="progress" />

## Usage

<UsageImport imports={{ name: 'Progress' }} />

## Examples

## API Reference


# Radio
URL: /docs/components/radio



<ComponentPreview name="radio" />

## Installation

<InstallTabs name="radio" />

## Usage

<UsageImport imports={{ name: 'Radio' }} />

## Examples

## API Reference


# Scroll Area
URL: /docs/components/scroll-area



<ComponentPreview name="scroll-area" />

## Installation

<InstallTabs name="scroll-area" />

## Usage

<UsageImport imports={{ name: 'ScrollArea', namespace: false, filePath: 'scroll-area' }} />

## Examples

## API Reference


# Select
URL: /docs/components/select



<ComponentPreview name="select" />

## Installation

<InstallTabs name="select" />

## Usage

<UsageImport imports={{ name: 'Select' }} />

## Examples

## API Reference


# Separator
URL: /docs/components/separator



<ComponentPreview name="separator" />

## Installation

<InstallTabs name="separator" />

## Usage

<UsageImport imports={{ name: 'Separator', namespace: false }} />

## Examples

## API Reference


# Skip navigation
URL: /docs/components/skip-navigation



<ComponentPreview name="skip-navigation" />

## Installation

<InstallTabs name="skip-navigation" />

## Usage

<UsageImport imports={[{ name: 'SkipNavigation' }]} />


# Slider
URL: /docs/components/slider



<ComponentPreview name="slider" />

## Installation

<InstallTabs name="slider" />

## Usage

<UsageImport imports={{ name: 'Slider', namespace: false }} />

## Examples

## API Reference


# Spinner
URL: /docs/components/spinner



<ComponentPreview name="spinner" />

## Installation

<InstallTabs name="spinner" />

## Usage

<UsageImport imports={{ name: 'Spinner', namespace: false }} />

```tsx
<Spinner />
```


# Switch
URL: /docs/components/switch



<ComponentPreview name="switch" />

## Installation

<InstallTabs name="switch" />

## Usage

<UsageImport imports={{ name: 'Switch', namespace: false }} />

## Examples

## API Reference


# Tabs
URL: /docs/components/tabs



<ComponentPreview name="tabs" />

## Installation

<InstallTabs name="tabs" />

## Usage

<UsageImport imports={{ name: 'Tabs' }} />

## Examples

## API Reference


# Textarea
URL: /docs/components/textarea



<ComponentPreview name="textarea" />

## Installation

<InstallTabs name="textarea" />

## Usage

<UsageImport imports={{ name: 'Textarea', namespace: false }} />

## Examples

## API Reference

<AutoTypeTable path="./lib/component-types.tsx" name="TextareaProps" />


# Toast
URL: /docs/components/toast



<ComponentPreview name="toast" />

## Installation

<InstallTabs name="toast" />

## Usage

<UsageImport imports={{ name: 'Toast' }} />

## Examples

## API Reference


# Toggle Group
URL: /docs/components/toggle-group



<ComponentPreview name="toggle-group" />

## Installation

<InstallTabs name="toggle-group" />

## Usage

<UsageImport imports={[ {name: 'ToggleGroup', namespace: false, filePath: 'toggle-group' }, {name: 'Toggle', namespace: false, }]} />

## Examples

## API Reference


# Toggle
URL: /docs/components/toggle



<ComponentPreview name="toggle" />

## Installation

<InstallTabs name="toggle" />

## Usage

<UsageImport imports={{ name: 'Toggle', namespace: false }} />

## Examples

## API Reference


# Toolbar
URL: /docs/components/toolbar



<ComponentPreview name="toolbar" />

## Installation

<InstallTabs name="toolbar" />

## Usage

<UsageImport imports={{ name: 'Toolbar' }} />

## Examples

## API Reference


# Tooltip
URL: /docs/components/tooltip



<ComponentPreview name="tooltip" />

## Installation

<InstallTabs name="tooltip" />

## Usage

<UsageImport imports={{ name: 'Tooltip' }} />

## Examples

## API Reference


# Astro
URL: /docs/dark-mode/astro



<Steps>
  <Step>
    ## Create an inline theme script

    ```astro title="src/pages/index.astro"
    ---
    import '../styles/globals.css'
    ---

    <script is:inline>
    	const getThemePreference = () => {
    		if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
    			return localStorage.getItem('theme');
    		}
    		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    	};
    	const isDark = getThemePreference() === 'dark';
    	document.documentElement.classList[isDark ? 'add' : 'remove']('dark');

    	if (typeof localStorage !== 'undefined') {
    		const observer = new MutationObserver(() => {
    			const isDark = document.documentElement.classList.contains('dark');
    			localStorage.setItem('theme', isDark ? 'dark' : 'light');
    		});
    		observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
    	}
    </script>

    <html lang="en">
    	<body>
          <h1>Astro</h1>
    	</body>
    </html>
    ```
  </Step>

  <Step>
    ## Add a mode toggle

    ```tsx title="src/components/ModeToggle.tsx"
    import * as React from "react"
    import { Moon, Sun } from "lucide-react"

    import { Button } from "@/components/ui/button"
    import {
      DropdownMenu,
      DropdownMenuContent,
      DropdownMenuItem,
      DropdownMenuTrigger,
    } from "@/components/ui/dropdown-menu"

    export function ModeToggle() {
      const [theme, setThemeState] = React.useState<Step
        "theme-light" | "dark" | "system"
      >("theme-light")

      React.useEffect(() => {
        const isDarkMode = document.documentElement.classList.contains("dark")
        setThemeState(isDarkMode ? "dark" : "theme-light")
      }, [])

      React.useEffect(() => {
        const isDark =
          theme === "dark" ||
          (theme === "system" &&
            window.matchMedia("(prefers-color-scheme: dark)").matches)
        document.documentElement.classList[isDark ? "add" : "remove"]("dark")
      }, [theme])

      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" size="icon">
              <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
              <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
              <span className="sr-only">Toggle theme</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem onClick={() => setThemeState("theme-light")}>
              Light
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => setThemeState("dark")}>
              Dark
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => setThemeState("system")}>
              System
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      )
    }
    ```
  </Step>

  <Step>
    ## Display the mode toggle

    Place a mode toggle on your site to toggle between light and dark mode.

    ```astro title="src/pages/index.astro"
    ---
    import '../styles/globals.css'
    import { ModeToggle } from '@/components/ModeToggle';
    ---

    <!-- Inline script -->

    <html lang="en">
    	<body>
          <h1>Astro</h1>
          <ModeToggle client:load />
    	</body>
    </html>
    ```
  </Step>
</Steps>


# Dark Mode
URL: /docs/dark-mode



<Cards className="lg:grid-cols-3">
  <Card
    icon={ <svg
    role="img"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    className="size-10"
    fill="currentColor"
  >
    <title>Next.js</title>
    <path d="M11.5725 0c-.1763 0-.3098.0013-.3584.0067-.0516.0053-.2159.021-.3636.0328-3.4088.3073-6.6017 2.1463-8.624 4.9728C1.1004 6.584.3802 8.3666.1082 10.255c-.0962.659-.108.8537-.108 1.7474s.012 1.0884.108 1.7476c.652 4.506 3.8591 8.2919 8.2087 9.6945.7789.2511 1.6.4223 2.5337.5255.3636.04 1.9354.04 2.299 0 1.6117-.1783 2.9772-.577 4.3237-1.2643.2065-.1056.2464-.1337.2183-.1573-.0188-.0139-.8987-1.1938-1.9543-2.62l-1.919-2.592-2.4047-3.5583c-1.3231-1.9564-2.4117-3.556-2.4211-3.556-.0094-.0026-.0187 1.5787-.0235 3.509-.0067 3.3802-.0093 3.5162-.0516 3.596-.061.115-.108.1618-.2064.2134-.075.0374-.1408.0445-.495.0445h-.406l-.1078-.068a.4383.4383 0 01-.1572-.1712l-.0493-.1056.0053-4.703.0067-4.7054.0726-.0915c.0376-.0493.1174-.1125.1736-.143.0962-.047.1338-.0517.5396-.0517.4787 0 .5584.0187.6827.1547.0353.0377 1.3373 1.9987 2.895 4.3608a10760.433 10760.433 0 004.7344 7.1706l1.9002 2.8782.096-.0633c.8518-.5536 1.7525-1.3418 2.4657-2.1627 1.5179-1.7429 2.4963-3.868 2.8247-6.134.0961-.6591.1078-.854.1078-1.7475 0-.8937-.012-1.0884-.1078-1.7476-.6522-4.506-3.8592-8.2919-8.2087-9.6945-.7672-.2487-1.5836-.42-2.4985-.5232-.169-.0176-1.0835-.0366-1.6123-.037zm4.0685 7.217c.3473 0 .4082.0053.4857.047.1127.0562.204.1642.237.2767.0186.061.0234 1.3653.0186 4.3044l-.0067 4.2175-.7436-1.14-.7461-1.14v-3.066c0-1.982.0093-3.0963.0234-3.1502.0375-.1313.1196-.2346.2323-.2955.0961-.0494.1313-.054.4997-.054z" />
  </svg>}
    title="Next.js"
    href="/docs/dark-mode/nextjs"
  >
    Dark mode instructions for Next.js
  </Card>

  <Card
    icon={<svg
    role="img"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    className="h-10 w-10"
    fill="currentColor"
  >
    <title>Vite</title>
    <path d="m8.286 10.578.512-8.657a.306.306 0 0 1 .247-.282L17.377.006a.306.306 0 0 1 .353.385l-1.558 5.403a.306.306 0 0 0 .352.385l2.388-.46a.306.306 0 0 1 .332.438l-6.79 13.55-.123.19a.294.294 0 0 1-.252.14c-.177 0-.35-.152-.305-.369l1.095-5.301a.306.306 0 0 0-.388-.355l-1.433.435a.306.306 0 0 1-.389-.354l.69-3.375a.306.306 0 0 0-.37-.36l-2.32.536a.306.306 0 0 1-.374-.316zm14.976-7.926L17.284 3.74l-.544 1.887 2.077-.4a.8.8 0 0 1 .84.369.8.8 0 0 1 .034.783L12.9 19.93l-.013.025-.015.023-.122.19a.801.801 0 0 1-.672.37.826.826 0 0 1-.634-.302.8.8 0 0 1-.16-.67l1.029-4.981-1.12.34a.81.81 0 0 1-.86-.262.802.802 0 0 1-.165-.67l.63-3.08-2.027.468a.808.808 0 0 1-.768-.233.81.81 0 0 1-.217-.6l.389-6.57-7.44-1.33a.612.612 0 0 0-.64.906L11.58 23.691a.612.612 0 0 0 1.066-.004l11.26-20.135a.612.612 0 0 0-.644-.9z" />
  </svg>}
    title="Vite"
    href="/docs/dark-mode/vite"
  >
    Dark mode instructions for Vite
  </Card>

  <Card
    icon={<svg
    role="img"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    className="h-10 w-10"
    fill="currentColor"
  >
    <title>Astro</title>
    <path
      d="M16.074 16.86C15.354 17.476 13.917 17.895 12.262 17.895C10.23 17.895 8.527 17.263 8.075 16.412C7.914 16.9 7.877 17.458 7.877 17.814C7.877 17.814 7.771 19.564 8.988 20.782C8.988 20.15 9.501 19.637 10.133 19.637C11.216 19.637 11.215 20.582 11.214 21.349V21.418C11.214 22.582 11.925 23.579 12.937 24C12.7812 23.6794 12.7005 23.3275 12.701 22.971C12.701 21.861 13.353 21.448 14.111 20.968C14.713 20.585 15.383 20.161 15.844 19.308C16.0926 18.8493 16.2225 18.3357 16.222 17.814C16.2221 17.4903 16.1722 17.1685 16.074 16.86ZM15.551 0.6C15.747 0.844 15.847 1.172 16.047 1.829L20.415 16.176C18.7743 15.3246 17.0134 14.7284 15.193 14.408L12.35 4.8C12.3273 4.72337 12.2803 4.65616 12.2162 4.60844C12.152 4.56072 12.0742 4.53505 11.9943 4.53528C11.9143 4.5355 11.8366 4.56161 11.7727 4.60969C11.7089 4.65777 11.6623 4.72524 11.64 4.802L8.83 14.405C7.00149 14.724 5.23264 15.3213 3.585 16.176L7.974 1.827C8.174 1.171 8.274 0.843 8.471 0.6C8.64406 0.385433 8.86922 0.218799 9.125 0.116C9.415 0 9.757 0 10.443 0H13.578C14.264 0 14.608 0 14.898 0.117C15.1529 0.219851 15.3783 0.386105 15.551 0.6Z"
      fill="currentColor"
    />
  </svg>}
    title="Astro"
    href="/docs/dark-mode/astro"
  >
    Dark mode instructions for Astro
  </Card>
</Cards>


# Next.js
URL: /docs/dark-mode/nextjs



<Steps>
  <Step>
    ## Install next-themes

    Start by installing `next-themes`:

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install next-themes
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add next-themes
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add next-themes
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add next-themes
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Step>

  <Step>
    ## Create a theme provider

    ```tsx title="components/theme-provider.tsx" lineNumbers
    "use client"

    import * as React from "react"
    import { ThemeProvider as NextThemesProvider } from "next-themes"

    export function ThemeProvider({
      children,
      ...props
    }: React.ComponentProps<typeof NextThemesProvider>) {
      return <NextThemesProvider {...props}>{children}</NextThemesProvider>
    }
    ```
  </Step>

  <Step>
    ## Wrap your root layout

    Add the `ThemeProvider` to your root layout and add the `suppressHydrationWarning` prop to the `html` tag.

    ```tsx title="app/layout.tsx" showLineNumbers
    // [!code highlight]
    import { ThemeProvider } from "@/components/theme-provider"

    export default function RootLayout({ children }: RootLayoutProps) {
      return (
        <>
    // [!code highlight]
          <html lang="en" suppressHydrationWarning>
            <head />
            <body>
    // [!code highlight:6]
              <ThemeProvider
                attribute="class"
                defaultTheme="system"
                enableSystem
                disableTransitionOnChange
              >
                {children}
    // [!code highlight]
              </ThemeProvider>
            </body>
          </html>
        </>
      )
    }
    ```
  </Step>

  <Step>
    ## Add a mode toggle

    Place a mode toggle on your site to toggle between light and dark mode.

    <ComponentPreview name="mode-toggle" />
  </Step>
</Steps>


# Vite
URL: /docs/dark-mode/vite



<Steps>
  <Step>
    ## Create a theme provider

    ```tsx title="components/theme-provider.tsx" lineNumbers
    import { createContext, useContext, useEffect, useState } from "react"

    type Theme = "dark" | "light" | "system"

    type ThemeProviderProps = {
      children: React.ReactNode
      defaultTheme?: Theme
      storageKey?: string
    }

    type ThemeProviderState = {
      theme: Theme
      setTheme: (theme: Theme) => void
    }

    const initialState: ThemeProviderState = {
      theme: "system",
      setTheme: () => null,
    }

    const ThemeProviderContext = createContext<ThemeProviderState>(initialState)

    export function ThemeProvider({
      children,
      defaultTheme = "system",
      storageKey = "vite-ui-theme",
      ...props
    }: ThemeProviderProps) {
      const [theme, setTheme] = useState<Theme>(
        () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
      )

      useEffect(() => {
        const root = window.document.documentElement

        root.classList.remove("light", "dark")

        if (theme === "system") {
          const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
            .matches
            ? "dark"
            : "light"

          root.classList.add(systemTheme)
          return
        }

        root.classList.add(theme)
      }, [theme])

      const value = {
        theme,
        setTheme: (theme: Theme) => {
          localStorage.setItem(storageKey, theme)
          setTheme(theme)
        },
      }

      return (
        <ThemeProviderContext.Provider {...props} value={value}>
          {children}
        </ThemeProviderContext.Provider>
      )
    }

    export const useTheme = () => {
      const context = useContext(ThemeProviderContext)

      if (context === undefined)
        throw new Error("useTheme must be used within a ThemeProvider")

      return context
    }
    ```
  </Step>

  <Step>
    ## Wrap your root layout

    Add the `ThemeProvider` to your root layout.

    ```tsx {1,5-7} title="App.tsx" lineNumbers
    import { ThemeProvider } from "@/components/theme-provider"

    function App() {
      return (
        <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
          {children}
        </ThemeProvider>
      )
    }

    export default App
    ```
  </Step>

  <Step>
    ## Add a mode toggle

    Place a mode toggle on your site to toggle between light and dark mode.

    ```tsx title="components/mode-toggle.tsx" lineNumbers
    import { Moon, Sun } from "lucide-react"
    import { Button } from "@/components/caprice-ui/button"
    import * as Menu from "@/components/caprice-ui/menu"
    import { useTheme } from "@/components/theme-provider"

    export function ModeToggle() {
      const { setTheme } = useTheme()

      return (
        <Menu.Root>
          <Menu.Trigger
            render={
              <Button size="icon" variant="outline">
                <Sun className="dark:-rotate-90 h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:scale-0" />
                <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
                <span className="sr-only">Toggle theme</span>
              </Button>
            }
          />
          <Menu.Portal>
            <Menu.Positioner align="end">
              <Menu.Popup>
                <Menu.Item onClick={() => setTheme('light')}>Light</Menu.Item>
                <Menu.Item onClick={() => setTheme('dark')}>Dark</Menu.Item>
                <Menu.Item onClick={() => setTheme('system')}>System</Menu.Item>
              </Menu.Popup>
            </Menu.Positioner>
          </Menu.Portal>
        </Menu.Root>
      )
    }
    ```
  </Step>
</Steps>


# Colours
URL: /docs/foundations/colours



## Primitives

{/* Select between multiple primitives colour palettes */}


# Astro
URL: /docs/installation/astro



<Tabs itemClassName="text-base" className="border-none bg-transparent" items={["Using shadcn/ui (recommended)", "Using npm package"]}>
  <Tab value="Using shadcn/ui (recommended)">
    <Steps>
      <Step>
        ### Create project

        Start by creating a new Astro project:

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npx create-astro@latest astro-app  --template with-tailwindcss --install --add react --git
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm dlx create-astro@latest astro-app  --template with-tailwindcss --install --add react --git
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn dlx create-astro@latest astro-app  --template with-tailwindcss --install --add react --git
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun x create-astro@latest astro-app  --template with-tailwindcss --install --add react --git
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Edit tsconfig.json file

        Add the following code to the `tsconfig.json` file to resolve paths:

        ```ts title="tsconfig.json" lineNumbers
        {
          "compilerOptions": {
            // ...
            // [!code highlight:6]
            "baseUrl": ".",
            "paths": {
              "@/*": [
                "./src/*"
              ]
            }
            // ...
          }
        }
        ```
      </Step>

      <Step>
        ### Run the CLI

        Run the `shadcn` init command to setup your project:

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npx shadcn@latest init https://caprice-ui.com/r/init.json
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm dlx shadcn@latest init https://caprice-ui.com/r/init.json
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn dlx shadcn@latest init https://caprice-ui.com/r/init.json
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun x shadcn@latest init https://caprice-ui.com/r/init.json
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Add Caprice UI Registry to your `components.json`

        ```json title="components.json"
        {
          "registries": {
            "@caprice": "https://caprice-ui.com/r/{name}.json"
          }
        }
        ```
      </Step>

      <Step>
        ### Add Components

        You can now start adding components to your project.

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npx shadcn@latest add @caprice/button
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm dlx shadcn@latest add @caprice/button
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn dlx shadcn@latest add @caprice/button
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun x shadcn@latest add @caprice/button
            ```
          </CodeBlockTab>
        </CodeBlockTabs>

        The command above will add the `Button` component to your project. You can then import it like this:

        ```astro title="src/pages/index.astro" lineNumbers
        ---
        // [!code highlight]
        import { Button } from "@/components/caprice-ui/button"
        ---

        <html lang="en">
          <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width" />
            <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
            <meta name="generator" content={Astro.generator} />
            <title>Astro + TailwindCSS</title>
          </head>

          <body>
            <div className="grid place-items-center h-screen content-center">
        // [!code highlight]
              <Button>Button</Button>
            </div>
          </body>
        </html>
        ```
      </Step>

      ### Add all components at once

            <section id="all-components">
              You can install all Caprice UI components at once with a single command:

              <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
                <CodeBlockTabsList>
                  <CodeBlockTabsTrigger value="npm">
                    npm
                  </CodeBlockTabsTrigger>

                  <CodeBlockTabsTrigger value="pnpm">
                    pnpm
                  </CodeBlockTabsTrigger>

                  <CodeBlockTabsTrigger value="yarn">
                    yarn
                  </CodeBlockTabsTrigger>

                  <CodeBlockTabsTrigger value="bun">
                    bun
                  </CodeBlockTabsTrigger>
                </CodeBlockTabsList>

                <CodeBlockTab value="npm">
                  ```bash
                  npx shadcn@latest add @caprice/ui
                  ```
                </CodeBlockTab>

                <CodeBlockTab value="pnpm">
                  ```bash
                  pnpm dlx shadcn@latest add @caprice/ui
                  ```
                </CodeBlockTab>

                <CodeBlockTab value="yarn">
                  ```bash
                  yarn dlx shadcn@latest add @caprice/ui
                  ```
                </CodeBlockTab>

                <CodeBlockTab value="bun">
                  ```bash
                  bun x shadcn@latest add @caprice/ui
                  ```
                </CodeBlockTab>
              </CodeBlockTabs>

              The command above will add all caprice ui components to your project.
            </section>
    </Steps>
  </Tab>

  <Tab value="Using npm package">
    <Steps>
      <Step>
        ### Create project

        Start by creating a new Astro project:

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npx create-astro@latest astro-app  --template with-tailwindcss --install --add react --git
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm dlx create-astro@latest astro-app  --template with-tailwindcss --install --add react --git
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn dlx create-astro@latest astro-app  --template with-tailwindcss --install --add react --git
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun x create-astro@latest astro-app  --template with-tailwindcss --install --add react --git
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Install Caprice UI dependencies

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm install @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm add @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn add @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun add @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Configure styles

        Add the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the [theming section](/docs/theming).

        ```css title="src/styles/globals.css"
        @import "tailwindcss";
        @import "@caprice-ui/tailwind/themes/caprice";
        @import "@caprice-ui/tailwind/preset";

        @source "../../node_modules/@caprice-ui";

        @layer base {
          * {
            @apply border-border outline-ring/50;
          }
          body {
            @apply bg-background text-foreground;
          }
        }
        ```
      </Step>

      <Step>
        ### Import components

        ```astro title="src/pages/index.astro" lineNumbers
        ---
        // [!code highlight]
        import { Button } from "@caprice-ui/react/button"
        ---

        <html lang="en">
        <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width" />
          <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
          <meta name="generator" content={Astro.generator} />
          <title>Astro + TailwindCSS</title>
        </head>

        <body>
          <div className="grid place-items-center h-screen content-center">
        // [!code highlight]
            <Button>Button</Button>
          </div>
        </body>
        </html>
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>


# Installation
URL: /docs/installation



<Callout title="Caprice UI Registry">
  If you already have your project setup with [shadcn/ui](https://ui.shadcn.com), please skip to the [registry configuration](#configure-registry) section.
</Callout>

## Quick setup

<Tabs items={["shadcn/ui", "Package"]}>
  <Tab value="shadcn/ui">
    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npx shadcn@latest init https://caprice-ui.com/r/init.json
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest init https://caprice-ui.com/r/init.json
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn dlx shadcn@latest init https://caprice-ui.com/r/init.json
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun x shadcn@latest init https://caprice-ui.com/r/init.json
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Tab>

  <Tab value="Package">
    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install @caprice-ui/react @caprice-ui/tailwind
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add @caprice-ui/react @caprice-ui/tailwind
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add @caprice-ui/react @caprice-ui/tailwind
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add @caprice-ui/react @caprice-ui/tailwind
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Tab>
</Tabs>

## Pick Your Framework

Start by selecting your framework of choice. Then follow the instructions to install the dependencies and structure your app.

Caprice UI is built to work with all React frameworks.

<Cards>
  <Card
    icon={ <svg
    role="img"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    className="size-10"
    fill="currentColor"
  >
    <title>Next.js</title>
    <path d="M11.5725 0c-.1763 0-.3098.0013-.3584.0067-.0516.0053-.2159.021-.3636.0328-3.4088.3073-6.6017 2.1463-8.624 4.9728C1.1004 6.584.3802 8.3666.1082 10.255c-.0962.659-.108.8537-.108 1.7474s.012 1.0884.108 1.7476c.652 4.506 3.8591 8.2919 8.2087 9.6945.7789.2511 1.6.4223 2.5337.5255.3636.04 1.9354.04 2.299 0 1.6117-.1783 2.9772-.577 4.3237-1.2643.2065-.1056.2464-.1337.2183-.1573-.0188-.0139-.8987-1.1938-1.9543-2.62l-1.919-2.592-2.4047-3.5583c-1.3231-1.9564-2.4117-3.556-2.4211-3.556-.0094-.0026-.0187 1.5787-.0235 3.509-.0067 3.3802-.0093 3.5162-.0516 3.596-.061.115-.108.1618-.2064.2134-.075.0374-.1408.0445-.495.0445h-.406l-.1078-.068a.4383.4383 0 01-.1572-.1712l-.0493-.1056.0053-4.703.0067-4.7054.0726-.0915c.0376-.0493.1174-.1125.1736-.143.0962-.047.1338-.0517.5396-.0517.4787 0 .5584.0187.6827.1547.0353.0377 1.3373 1.9987 2.895 4.3608a10760.433 10760.433 0 004.7344 7.1706l1.9002 2.8782.096-.0633c.8518-.5536 1.7525-1.3418 2.4657-2.1627 1.5179-1.7429 2.4963-3.868 2.8247-6.134.0961-.6591.1078-.854.1078-1.7475 0-.8937-.012-1.0884-.1078-1.7476-.6522-4.506-3.8592-8.2919-8.2087-9.6945-.7672-.2487-1.5836-.42-2.4985-.5232-.169-.0176-1.0835-.0366-1.6123-.037zm4.0685 7.217c.3473 0 .4082.0053.4857.047.1127.0562.204.1642.237.2767.0186.061.0234 1.3653.0186 4.3044l-.0067 4.2175-.7436-1.14-.7461-1.14v-3.066c0-1.982.0093-3.0963.0234-3.1502.0375-.1313.1196-.2346.2323-.2955.0961-.0494.1313-.054.4997-.054z" />
  </svg>}
    title="Next.js"
    href="/docs/installation/nextjs"
  >
    Setup instructions for Next.js
  </Card>

  <Card
    icon={<svg
    role="img"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    className="h-10 w-10"
    fill="currentColor"
  >
    <title>Vite</title>
    <path d="m8.286 10.578.512-8.657a.306.306 0 0 1 .247-.282L17.377.006a.306.306 0 0 1 .353.385l-1.558 5.403a.306.306 0 0 0 .352.385l2.388-.46a.306.306 0 0 1 .332.438l-6.79 13.55-.123.19a.294.294 0 0 1-.252.14c-.177 0-.35-.152-.305-.369l1.095-5.301a.306.306 0 0 0-.388-.355l-1.433.435a.306.306 0 0 1-.389-.354l.69-3.375a.306.306 0 0 0-.37-.36l-2.32.536a.306.306 0 0 1-.374-.316zm14.976-7.926L17.284 3.74l-.544 1.887 2.077-.4a.8.8 0 0 1 .84.369.8.8 0 0 1 .034.783L12.9 19.93l-.013.025-.015.023-.122.19a.801.801 0 0 1-.672.37.826.826 0 0 1-.634-.302.8.8 0 0 1-.16-.67l1.029-4.981-1.12.34a.81.81 0 0 1-.86-.262.802.802 0 0 1-.165-.67l.63-3.08-2.027.468a.808.808 0 0 1-.768-.233.81.81 0 0 1-.217-.6l.389-6.57-7.44-1.33a.612.612 0 0 0-.64.906L11.58 23.691a.612.612 0 0 0 1.066-.004l11.26-20.135a.612.612 0 0 0-.644-.9z" />
  </svg>}
    title="Vite"
    href="/docs/installation/vite"
  >
    Setup instructions for Vite
  </Card>

  <Card
    icon={<svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    className="h-10 w-10"
    fill="currentColor"
  >
    <path d="M6.93 13.688a.343.343 0 0 1 .468.132l.063.106c.48.851.98 1.66 1.5 2.426a35.65 35.65 0 0 0 2.074 2.742.345.345 0 0 1-.039.484l-.074.066c-2.543 2.223-4.191 2.665-4.953 1.333-.746-1.305-.477-3.672.808-7.11a.344.344 0 0 1 .153-.18ZM17.75 16.3a.34.34 0 0 1 .395.27l.02.1c.628 3.286.187 4.93-1.325 4.93-1.48 0-3.36-1.402-5.649-4.203a.327.327 0 0 1-.074-.222c0-.188.156-.34.344-.34h.121a32.984 32.984 0 0 0 2.809-.098c1.07-.086 2.191-.23 3.359-.437zm.871-6.977a.353.353 0 0 1 .445-.21l.102.034c3.262 1.11 4.504 2.332 3.719 3.664-.766 1.305-2.993 2.254-6.684 2.848a.362.362 0 0 1-.238-.047.343.343 0 0 1-.125-.476l.062-.106a34.07 34.07 0 0 0 1.367-2.523c.477-.989.93-2.051 1.352-3.184zM7.797 8.34a.362.362 0 0 1 .238.047.343.343 0 0 1 .125.476l-.062.106a34.088 34.088 0 0 0-1.367 2.523c-.477.988-.93 2.051-1.352 3.184a.353.353 0 0 1-.445.21l-.102-.034C1.57 13.742.328 12.52 1.113 11.188 1.88 9.883 4.106 8.934 7.797 8.34Zm5.281-3.984c2.543-2.223 4.192-2.664 4.953-1.332.746 1.304.477 3.671-.808 7.109a.344.344 0 0 1-.153.18.343.343 0 0 1-.468-.133l-.063-.106a34.64 34.64 0 0 0-1.5-2.426 35.65 35.65 0 0 0-2.074-2.742.345.345 0 0 1 .039-.484ZM7.285 2.274c1.48 0 3.364 1.402 5.649 4.203a.349.349 0 0 1 .078.218.348.348 0 0 1-.348.344l-.117-.004a34.584 34.584 0 0 0-2.809.102 35.54 35.54 0 0 0-3.363.437.343.343 0 0 1-.394-.273l-.02-.098c-.629-3.285-.188-4.93 1.324-4.93Zm2.871 5.812h3.688a.638.638 0 0 1 .55.316l1.848 3.22a.644.644 0 0 1 0 .628l-1.847 3.223a.638.638 0 0 1-.551.316h-3.688a.627.627 0 0 1-.547-.316L7.758 12.25a.644.644 0 0 1 0-.629L9.61 8.402a.627.627 0 0 1 .546-.316Zm3.23.793a.638.638 0 0 1 .552.316l1.39 2.426a.644.644 0 0 1 0 .629l-1.39 2.43a.638.638 0 0 1-.551.316h-2.774a.627.627 0 0 1-.546-.316l-1.395-2.43a.644.644 0 0 1 0-.629l1.395-2.426a.627.627 0 0 1 .546-.316Zm-.491.867h-1.79a.624.624 0 0 0-.546.316l-.899 1.56a.644.644 0 0 0 0 .628l.899 1.563a.632.632 0 0 0 .547.316h1.789a.632.632 0 0 0 .547-.316l.898-1.563a.644.644 0 0 0 0-.629l-.898-1.558a.624.624 0 0 0-.547-.317Zm-.477.828c.227 0 .438.121.547.317l.422.73a.625.625 0 0 1 0 .629l-.422.734a.627.627 0 0 1-.547.317h-.836a.632.632 0 0 1-.547-.317l-.422-.734a.625.625 0 0 1 0-.629l.422-.73a.632.632 0 0 1 .547-.317zm-.418.817a.548.548 0 0 0-.473.273.547.547 0 0 0 0 .547.544.544 0 0 0 .473.27.544.544 0 0 0 .473-.27.547.547 0 0 0 0-.547.548.548 0 0 0-.473-.273Zm-4.422.546h.98M18.98 7.75c.391-1.895.477-3.344.223-4.398-.148-.63-.422-1.137-.84-1.508-.441-.39-1-.582-1.625-.582-1.035 0-2.12.472-3.281 1.367a14.9 14.9 0 0 0-1.473 1.316 1.206 1.206 0 0 0-.136-.144c-1.446-1.285-2.66-2.082-3.7-2.39-.617-.184-1.195-.2-1.722-.024-.559.187-1.004.574-1.317 1.117-.515.894-.652 2.074-.46 3.527.078.59.214 1.235.402 1.934a1.119 1.119 0 0 0-.215.047C3.008 8.62 1.71 9.269.926 10.015c-.465.442-.77.938-.883 1.481-.113.578 0 1.156.312 1.7.516.894 1.465 1.597 2.817 2.155.543.223 1.156.426 1.844.61a1.023 1.023 0 0 0-.07.226c-.391 1.891-.477 3.344-.223 4.395.148.629.425 1.14.84 1.508.44.39 1 .582 1.625.582 1.035 0 2.12-.473 3.28-1.364.477-.37.973-.816 1.489-1.336a1.2 1.2 0 0 0 .195.227c1.446 1.285 2.66 2.082 3.7 2.39.617.184 1.195.2 1.722.024.559-.187 1.004-.574 1.317-1.117.515-.894.652-2.074.46-3.527a14.941 14.941 0 0 0-.425-2.012 1.225 1.225 0 0 0 .238-.047c1.828-.61 3.125-1.258 3.91-2.004.465-.441.77-.937.883-1.48.113-.578 0-1.157-.313-1.7-.515-.894-1.464-1.597-2.816-2.156a14.576 14.576 0 0 0-1.906-.625.865.865 0 0 0 .059-.195z" />
  </svg>}
    title="TanStack Start"
    href="/docs/installation/tanstack-start"
  >
    Setup instructions for TanStack Start
  </Card>

  <Card
    icon={<svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    className="h-10 w-10"
    fill="currentColor"
  >
    <path d="M6.93 13.688a.343.343 0 0 1 .468.132l.063.106c.48.851.98 1.66 1.5 2.426a35.65 35.65 0 0 0 2.074 2.742.345.345 0 0 1-.039.484l-.074.066c-2.543 2.223-4.191 2.665-4.953 1.333-.746-1.305-.477-3.672.808-7.11a.344.344 0 0 1 .153-.18ZM17.75 16.3a.34.34 0 0 1 .395.27l.02.1c.628 3.286.187 4.93-1.325 4.93-1.48 0-3.36-1.402-5.649-4.203a.327.327 0 0 1-.074-.222c0-.188.156-.34.344-.34h.121a32.984 32.984 0 0 0 2.809-.098c1.07-.086 2.191-.23 3.359-.437zm.871-6.977a.353.353 0 0 1 .445-.21l.102.034c3.262 1.11 4.504 2.332 3.719 3.664-.766 1.305-2.993 2.254-6.684 2.848a.362.362 0 0 1-.238-.047.343.343 0 0 1-.125-.476l.062-.106a34.07 34.07 0 0 0 1.367-2.523c.477-.989.93-2.051 1.352-3.184zM7.797 8.34a.362.362 0 0 1 .238.047.343.343 0 0 1 .125.476l-.062.106a34.088 34.088 0 0 0-1.367 2.523c-.477.988-.93 2.051-1.352 3.184a.353.353 0 0 1-.445.21l-.102-.034C1.57 13.742.328 12.52 1.113 11.188 1.88 9.883 4.106 8.934 7.797 8.34Zm5.281-3.984c2.543-2.223 4.192-2.664 4.953-1.332.746 1.304.477 3.671-.808 7.109a.344.344 0 0 1-.153.18.343.343 0 0 1-.468-.133l-.063-.106a34.64 34.64 0 0 0-1.5-2.426 35.65 35.65 0 0 0-2.074-2.742.345.345 0 0 1 .039-.484ZM7.285 2.274c1.48 0 3.364 1.402 5.649 4.203a.349.349 0 0 1 .078.218.348.348 0 0 1-.348.344l-.117-.004a34.584 34.584 0 0 0-2.809.102 35.54 35.54 0 0 0-3.363.437.343.343 0 0 1-.394-.273l-.02-.098c-.629-3.285-.188-4.93 1.324-4.93Zm2.871 5.812h3.688a.638.638 0 0 1 .55.316l1.848 3.22a.644.644 0 0 1 0 .628l-1.847 3.223a.638.638 0 0 1-.551.316h-3.688a.627.627 0 0 1-.547-.316L7.758 12.25a.644.644 0 0 1 0-.629L9.61 8.402a.627.627 0 0 1 .546-.316Zm3.23.793a.638.638 0 0 1 .552.316l1.39 2.426a.644.644 0 0 1 0 .629l-1.39 2.43a.638.638 0 0 1-.551.316h-2.774a.627.627 0 0 1-.546-.316l-1.395-2.43a.644.644 0 0 1 0-.629l1.395-2.426a.627.627 0 0 1 .546-.316Zm-.491.867h-1.79a.624.624 0 0 0-.546.316l-.899 1.56a.644.644 0 0 0 0 .628l.899 1.563a.632.632 0 0 0 .547.316h1.789a.632.632 0 0 0 .547-.316l.898-1.563a.644.644 0 0 0 0-.629l-.898-1.558a.624.624 0 0 0-.547-.317Zm-.477.828c.227 0 .438.121.547.317l.422.73a.625.625 0 0 1 0 .629l-.422.734a.627.627 0 0 1-.547.317h-.836a.632.632 0 0 1-.547-.317l-.422-.734a.625.625 0 0 1 0-.629l.422-.73a.632.632 0 0 1 .547-.317zm-.418.817a.548.548 0 0 0-.473.273.547.547 0 0 0 0 .547.544.544 0 0 0 .473.27.544.544 0 0 0 .473-.27.547.547 0 0 0 0-.547.548.548 0 0 0-.473-.273Zm-4.422.546h.98M18.98 7.75c.391-1.895.477-3.344.223-4.398-.148-.63-.422-1.137-.84-1.508-.441-.39-1-.582-1.625-.582-1.035 0-2.12.472-3.281 1.367a14.9 14.9 0 0 0-1.473 1.316 1.206 1.206 0 0 0-.136-.144c-1.446-1.285-2.66-2.082-3.7-2.39-.617-.184-1.195-.2-1.722-.024-.559.187-1.004.574-1.317 1.117-.515.894-.652 2.074-.46 3.527.078.59.214 1.235.402 1.934a1.119 1.119 0 0 0-.215.047C3.008 8.62 1.71 9.269.926 10.015c-.465.442-.77.938-.883 1.481-.113.578 0 1.156.312 1.7.516.894 1.465 1.597 2.817 2.155.543.223 1.156.426 1.844.61a1.023 1.023 0 0 0-.07.226c-.391 1.891-.477 3.344-.223 4.395.148.629.425 1.14.84 1.508.44.39 1 .582 1.625.582 1.035 0 2.12-.473 3.28-1.364.477-.37.973-.816 1.489-1.336a1.2 1.2 0 0 0 .195.227c1.446 1.285 2.66 2.082 3.7 2.39.617.184 1.195.2 1.722.024.559-.187 1.004-.574 1.317-1.117.515-.894.652-2.074.46-3.527a14.941 14.941 0 0 0-.425-2.012 1.225 1.225 0 0 0 .238-.047c1.828-.61 3.125-1.258 3.91-2.004.465-.441.77-.937.883-1.48.113-.578 0-1.157-.313-1.7-.515-.894-1.464-1.597-2.816-2.156a14.576 14.576 0 0 0-1.906-.625.865.865 0 0 0 .059-.195z" />
  </svg>}
    title="TanStack Router"
    href="/docs/installation/tanstack-router"
  >
    Setup instructions for TanStack Router
  </Card>

  <Card
    icon={<svg
    role="img"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    className="h-10 w-10"
    fill="currentColor"
  >
    <title>Astro</title>
    <path
      d="M16.074 16.86C15.354 17.476 13.917 17.895 12.262 17.895C10.23 17.895 8.527 17.263 8.075 16.412C7.914 16.9 7.877 17.458 7.877 17.814C7.877 17.814 7.771 19.564 8.988 20.782C8.988 20.15 9.501 19.637 10.133 19.637C11.216 19.637 11.215 20.582 11.214 21.349V21.418C11.214 22.582 11.925 23.579 12.937 24C12.7812 23.6794 12.7005 23.3275 12.701 22.971C12.701 21.861 13.353 21.448 14.111 20.968C14.713 20.585 15.383 20.161 15.844 19.308C16.0926 18.8493 16.2225 18.3357 16.222 17.814C16.2221 17.4903 16.1722 17.1685 16.074 16.86ZM15.551 0.6C15.747 0.844 15.847 1.172 16.047 1.829L20.415 16.176C18.7743 15.3246 17.0134 14.7284 15.193 14.408L12.35 4.8C12.3273 4.72337 12.2803 4.65616 12.2162 4.60844C12.152 4.56072 12.0742 4.53505 11.9943 4.53528C11.9143 4.5355 11.8366 4.56161 11.7727 4.60969C11.7089 4.65777 11.6623 4.72524 11.64 4.802L8.83 14.405C7.00149 14.724 5.23264 15.3213 3.585 16.176L7.974 1.827C8.174 1.171 8.274 0.843 8.471 0.6C8.64406 0.385433 8.86922 0.218799 9.125 0.116C9.415 0 9.757 0 10.443 0H13.578C14.264 0 14.608 0 14.898 0.117C15.1529 0.219851 15.3783 0.386105 15.551 0.6Z"
      fill="currentColor"
    />
  </svg>}
    title="Astro"
    href="/docs/installation/astro"
  >
    Setup instructions for Astro
  </Card>

  <Card
    icon={<svg
    role="img"
    viewBox="0 0 62 65"
    fill="currentColor"
    xmlns="http://www.w3.org/2000/svg"
    className="h-10 w-10"
  >
    <path d="M61.8548 14.6253C61.8778 14.7102 61.8895 14.7978 61.8897 14.8858V28.5615C61.8898 28.737 61.8434 28.9095 61.7554 29.0614C61.6675 29.2132 61.5409 29.3392 61.3887 29.4265L49.9104 36.0351V49.1337C49.9104 49.4902 49.7209 49.8192 49.4118 49.9987L25.4519 63.7916C25.3971 63.8227 25.3372 63.8427 25.2774 63.8639C25.255 63.8714 25.2338 63.8851 25.2101 63.8913C25.0426 63.9354 24.8666 63.9354 24.6991 63.8913C24.6716 63.8838 24.6467 63.8689 24.6205 63.8589C24.5657 63.8389 24.5084 63.8215 24.456 63.7916L0.501061 49.9987C0.348882 49.9113 0.222437 49.7853 0.134469 49.6334C0.0465019 49.4816 0.000120578 49.3092 0 49.1337L0 8.10652C0 8.01678 0.0124642 7.92953 0.0348998 7.84477C0.0423783 7.8161 0.0598282 7.78993 0.0697995 7.76126C0.0884958 7.70891 0.105946 7.65531 0.133367 7.6067C0.152063 7.5743 0.179485 7.54812 0.20192 7.51821C0.230588 7.47832 0.256763 7.43719 0.290416 7.40229C0.319084 7.37362 0.356476 7.35243 0.388883 7.32751C0.425029 7.29759 0.457436 7.26518 0.498568 7.2415L12.4779 0.345059C12.6296 0.257786 12.8015 0.211853 12.9765 0.211853C13.1515 0.211853 13.3234 0.257786 13.475 0.345059L25.4531 7.2415H25.4556C25.4955 7.26643 25.5292 7.29759 25.5653 7.32626C25.5977 7.35119 25.6339 7.37362 25.6625 7.40104C25.6974 7.43719 25.7224 7.47832 25.7523 7.51821C25.7735 7.54812 25.8021 7.5743 25.8196 7.6067C25.8483 7.65656 25.8645 7.70891 25.8844 7.76126C25.8944 7.78993 25.9118 7.8161 25.9193 7.84602C25.9423 7.93096 25.954 8.01853 25.9542 8.10652V33.7317L35.9355 27.9844V14.8846C35.9355 14.7973 35.948 14.7088 35.9704 14.6253C35.9792 14.5954 35.9954 14.5692 36.0053 14.5405C36.0253 14.4882 36.0427 14.4346 36.0702 14.386C36.0888 14.3536 36.1163 14.3274 36.1375 14.2975C36.1674 14.2576 36.1923 14.2165 36.2272 14.1816C36.2559 14.1529 36.292 14.1317 36.3244 14.1068C36.3618 14.0769 36.3942 14.0445 36.4341 14.0208L48.4147 7.12434C48.5663 7.03694 48.7383 6.99094 48.9133 6.99094C49.0883 6.99094 49.2602 7.03694 49.4118 7.12434L61.3899 14.0208C61.4323 14.0457 61.4647 14.0769 61.5021 14.1055C61.5333 14.1305 61.5694 14.1529 61.5981 14.1803C61.633 14.2165 61.6579 14.2576 61.6878 14.2975C61.7103 14.3274 61.7377 14.3536 61.7551 14.386C61.7838 14.4346 61.8 14.4882 61.8199 14.5405C61.8312 14.5692 61.8474 14.5954 61.8548 14.6253ZM59.893 27.9844V16.6121L55.7013 19.0252L49.9104 22.3593V33.7317L59.8942 27.9844H59.893ZM47.9149 48.5566V37.1768L42.2187 40.4299L25.953 49.7133V61.2003L47.9149 48.5566ZM1.99677 9.83281V48.5566L23.9562 61.199V49.7145L12.4841 43.2219L12.4804 43.2194L12.4754 43.2169C12.4368 43.1945 12.4044 43.1621 12.3682 43.1347C12.3371 43.1097 12.3009 43.0898 12.2735 43.0624L12.271 43.0586C12.2386 43.0275 12.2162 42.9888 12.1887 42.9539C12.1638 42.9203 12.1339 42.8916 12.114 42.8567L12.1127 42.853C12.0903 42.8156 12.0766 42.7707 12.0604 42.7283C12.0442 42.6909 12.023 42.656 12.013 42.6161C12.0005 42.5688 11.998 42.5177 11.9931 42.4691C11.9881 42.4317 11.9781 42.3943 11.9781 42.3569V15.5801L6.18848 12.2446L1.99677 9.83281ZM12.9777 2.36177L2.99764 8.10652L12.9752 13.8513L22.9541 8.10527L12.9752 2.36177H12.9777ZM18.1678 38.2138L23.9574 34.8809V9.83281L19.7657 12.2459L13.9749 15.5801V40.6281L18.1678 38.2138ZM48.9133 9.14105L38.9344 14.8858L48.9133 20.6305L58.8909 14.8846L48.9133 9.14105ZM47.9149 22.3593L42.124 19.0252L37.9323 16.6121V27.9844L43.7219 31.3174L47.9149 33.7317V22.3593ZM24.9533 47.987L39.59 39.631L46.9065 35.4555L36.9352 29.7145L25.4544 36.3242L14.9907 42.3482L24.9533 47.987Z" />
  </svg>}
    title="Laravel"
    href="/docs/installation/laravel"
  >
    Setup instructions for Laravel
  </Card>

  <Card
    icon={ <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    className="h-10 w-10"
    fill="currentColor"
  >
    <path d="M12.118 5.466a2.306 2.306 0 0 0-.623.08c-.278.067-.702.332-.953.583-.41.423-.49.609-.662 1.469-.08.423.41 1.43.847 1.734.45.317 1.085.502 2.065.608 1.429.16 1.84.636 1.84 2.197 0 1.377-.385 1.747-1.96 1.906-1.707.172-2.58.834-2.765 2.117-.106.781.41 1.76 1.125 2.091 1.627.768 3.15-.198 3.467-2.196.211-1.284.622-1.642 1.998-1.747 1.588-.133 2.409-.675 2.713-1.787.278-1.02-.304-2.157-1.297-2.554-.264-.106-.873-.238-1.35-.291-1.495-.16-1.879-.424-2.038-1.39-.225-1.337-.317-1.562-.794-2.09a2.174 2.174 0 0 0-1.613-.73zm-4.785 4.36a2.145 2.145 0 0 0-.497.048c-1.469.318-2.17 2.051-1.35 3.295 1.178 1.774 3.944.953 3.97-1.177.012-1.193-.98-2.143-2.123-2.166zM2.089 14.19a2.22 2.22 0 0 0-.427.052c-2.158.476-2.237 3.626-.106 4.182.53.145.582.145 1.111.013 1.191-.318 1.866-1.456 1.549-2.607-.278-1.02-1.144-1.664-2.127-1.64zm19.824.008c-.233.002-.477.058-.784.162-1.39.477-1.866 2.092-.98 3.336.557.794 1.96 1.058 2.82.516 1.416-.874 1.363-3.057-.093-3.746-.38-.186-.663-.271-.963-.268z" />
  </svg>}
    title="React Router"
    href="/docs/installation/react-router"
  >
    Setup instructions for React Router
  </Card>

  <Card
    icon={ <svg
    role="img"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    className="h-10 w-10"
    fill="currentColor"
  >
    <title>React</title>
    <path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
  </svg>}
    title="Manual"
    href="/docs/installation/manual"
  >
    Setup instructions for any React related framework
  </Card>
</Cards>

## Configure registry

<Steps>
  <Step>
    ### Add the Caprice UI registry to your `components.json` file.

    ```json title="components.json"
    {
      "registries": {
        "@caprice": "https://caprice-ui.com/r/{name}.json"
      }
    }
    ```

    <Callout type="info">
      Learn more about [namespaces](https://ui.shadcn.com/docs/registry/namespace) and how to use them in your project.
    </Callout>
  </Step>

  <Step>
    ### Install Caprice UI core & utils

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npx shadcn@latest add @caprice/setup
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest add @caprice/setup
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn dlx shadcn@latest add @caprice/setup
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun x shadcn@latest add @caprice/setup
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    It install the key dependencies, theme and utils.ts.
  </Step>

  <Step>
    ### Setup Base UI Portals

    Base UI uses portals for components that render popups, such as Dialog and Popover. To make portaled components always appear on top of the entire page, add the following style to your application layout root. [Learn more](https://base-ui.com/react/overview/quick-start#set-up)

    ```jsx title="layout.tsx"
    // [!code word:relative]
    // [!code word:isolate]
    <body className="relative">
      <div className="isolate">
        {children}
      </div>
    </body>
    ```
  </Step>

  <Step>
    ### 🎉 Voilà!

    You can now start adding components to your project.

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npx shadcn@latest add @caprice/button
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest add @caprice/button
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn dlx shadcn@latest add @caprice/button
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun x shadcn@latest add @caprice/button
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    Alternatively, you can add all components at once with the following command:

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npx shadcn@latest add @caprice/ui
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest add @caprice/ui
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn dlx shadcn@latest add @caprice/ui
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun x shadcn@latest add @caprice/ui
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    This will add all caprice ui components to your project.
  </Step>
</Steps>


# Laravel
URL: /docs/installation/laravel



<Tabs itemClassName="text-base" className="border-none bg-transparent" items={["Using shadcn/ui (recommended)", "Using npm package"]}>
  <Tab value="Using shadcn/ui (recommended)">
    <Steps>
      <Step>
        ### Create project

        Start by creating a new Laravel project with Inertia and React using the laravel installer `laravel new my-app`:

        ```bash
        laravel new my-app --react
        ```
      </Step>

      <Step>
        ### Add Caprice UI Registry to your `components.json`

        ```json title="components.json"
        {
          "registries": {
            "@caprice": "https://caprice-ui.com/r/{name}.json"
          }
        }
        ```
      </Step>

      <Step>
        ### Add Components

        You can now start adding components to your project.

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npx shadcn@latest add @caprice/switch
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm dlx shadcn@latest add @caprice/switch
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn dlx shadcn@latest add @caprice/switch
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun x shadcn@latest add @caprice/switch
            ```
          </CodeBlockTab>
        </CodeBlockTabs>

        The command above will add the `Switch` component to `resources/js/components/caprice-ui/switch.tsx`. You can then import it like this:

        ```tsx title="resources/js/pages/index.tsx" lineNumbers
        // [!code highlight]
        import { Switch } from "@/components/caprice-ui/switch"

        const MyPage = () => {
          return (
            <div>
        // [!code highlight]
              <Switch />
            </div>
          )
        }

        export default MyPage
        ```
      </Step>

      ### Add all components at once

            <section id="all-components">
              You can install all Caprice UI components at once with a single command:

              <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
                <CodeBlockTabsList>
                  <CodeBlockTabsTrigger value="npm">
                    npm
                  </CodeBlockTabsTrigger>

                  <CodeBlockTabsTrigger value="pnpm">
                    pnpm
                  </CodeBlockTabsTrigger>

                  <CodeBlockTabsTrigger value="yarn">
                    yarn
                  </CodeBlockTabsTrigger>

                  <CodeBlockTabsTrigger value="bun">
                    bun
                  </CodeBlockTabsTrigger>
                </CodeBlockTabsList>

                <CodeBlockTab value="npm">
                  ```bash
                  npx shadcn@latest add @caprice/ui
                  ```
                </CodeBlockTab>

                <CodeBlockTab value="pnpm">
                  ```bash
                  pnpm dlx shadcn@latest add @caprice/ui
                  ```
                </CodeBlockTab>

                <CodeBlockTab value="yarn">
                  ```bash
                  yarn dlx shadcn@latest add @caprice/ui
                  ```
                </CodeBlockTab>

                <CodeBlockTab value="bun">
                  ```bash
                  bun x shadcn@latest add @caprice/ui
                  ```
                </CodeBlockTab>
              </CodeBlockTabs>

              The command above will add all caprice ui components to your project.
            </section>
    </Steps>
  </Tab>

  <Tab value="Using npm package">
    <Steps>
      <Step>
        ### Create project

        Start by creating a new Laravel project with Inertia and React using the laravel installer `laravel new my-app`:

        ```bash
        laravel new my-app --react
        ```
      </Step>

      <Step>
        ### Install Caprice UI dependencies

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm install @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm add @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn add @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun add @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Configure styles

        Add the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the [theming section](/docs/theming).

        ```css title="resources/css/app.css"
        @import "tailwindcss";
        @import "@caprice-ui/tailwind/themes/caprice";
        @import "@caprice-ui/tailwind/preset";

        @source "../../node_modules/@caprice-ui";

        @layer base {
          * {
            @apply border-border outline-ring/50;
          }
          body {
            @apply bg-background text-foreground;
          }
        }
        ```
      </Step>

      <Step>
        ### Import components

        ```tsx title="resources/js/pages/index.tsx" lineNumbers
        // [!code highlight]
        import { Switch } from "@caprice-ui/react/switch"

        const MyPage = () => {
          return (
            <div>
        // [!code highlight]
              <Switch />
            </div>
          )
        }

        export default MyPage
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>


# Manual Installation
URL: /docs/installation/manual



<Steps>
  <Step>
    ### Add Tailwind CSS

    Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project.

    [Follow the Tailwind CSS installation instructions to get started.](https://tailwindcss.com/docs/installation)
  </Step>

  <Step>
    ### Add dependencies

    Add the following dependencies to your project:

    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npm install @base-ui/react cva@beta  lucide-react react-aria tailwind-merge tw-animate-css
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm add @base-ui/react cva@beta lucide-react react-aria tailwind-merge tw-animate-css
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn add @base-ui/react cva@beta lucide-react react-aria tailwind-merge tw-animate-css
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun add @base-ui/react cva@beta lucide-react react-aria tailwind-merge tw-animate-css
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Step>

  <Step>
    ### Configure path aliases

    Configure the path aliases in your `tsconfig.json` file.

    ```json title="tsconfig.json" lineNumbers
    {
      "compilerOptions": {
        // [!code highlight:4]
        "baseUrl": ".",
        "paths": {
          "@/*": ["./*"]
        }
      }
    }
    ```

    The `@` alias is a preference. You can use other aliases if you want.
  </Step>

  <Step>
    ### Configure styles

    Add the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the [theming section](/docs/theming).

    <CodeCollapsibleWrapper>
      ```css title="src/styles/globals.css"
      @import "tailwindcss";
      @import "tw-animate-css";

      @custom-variant dark (&:is(.dark *));

      :root {
        --background: var(--color-white);
        --foreground: var(--color-neutral-950);
        --card: var(--color-white);
        --card-foreground: var(--color-neutral-950);
        --popover: var(--color-white);
        --popover-foreground: var(--color-neutral-950);
        --primary: var(--color-zinc-900);
        --primary-foreground: var(--color-neutral-50);
        --secondary: var(--color-neutral-100);
        --secondary-foreground: var(--color-neutral-900);
        --muted: var(--color-neutral-100);
        --muted-foreground: var(--color-neutral-500);
        --accent: var(--color-neutral-100);
        --accent-foreground: var(--color-neutral-900);
        --destructive: var(--color-red-600);
        --destructive-foreground: var(--color-red-600);
        --border: var(--color-neutral-200);
        --input: var(--color-neutral-200);
        --ring: var(--color-neutral-400);
        --chart-1: var(--color-orange-600);
        --chart-2: var(--color-teal-600);
        --chart-3: var(--color-cyan-900);
        --chart-4: var(--color-amber-400);
        --chart-5: var(--color-amber-500);
        --radius: 0.625rem;
        --sidebar: var(--color-neutral-50);
        --sidebar-foreground: var(--color-neutral-950);
        --sidebar-primary: var(--color-neutral-900);
        --sidebar-primary-foreground: var(--color-neutral-50);
        --sidebar-accent: var(--color-neutral-100);
        --sidebar-accent-foreground: var(--color-neutral-900);
        --sidebar-border: var(--color-neutral-200);
        --sidebar-ring: var(--color-neutral-400);
      }

      .dark {
        --background: var(--color-neutral-950);
        --foreground: var(--color-neutral-50);
        --card: var(--color-neutral-950);
        --card-foreground: var(--color-neutral-50);
        --popover: var(--color-neutral-950);
        --popover-foreground: var(--color-neutral-50);
        --primary: var(--color-neutral-50);
        --primary-foreground: var(--color-neutral-900);
        --secondary: var(--color-neutral-800);
        --secondary-foreground: var(--color-neutral-50);
        --muted: var(--color-neutral-800);
        --muted-foreground: var(--color-neutral-400);
        --accent: var(--color-neutral-800);
        --accent-foreground: var(--color-neutral-50);
        --destructive: var(--color-red-400);
        --destructive-foreground: var(--color-red-600);
        --border: var(--color-neutral-800);
        --input: var(--color-neutral-800);
        --ring: var(--color-neutral-600);
        --chart-1: var(--color-blue-700);
        --chart-2: var(--color-emerald-500);
        --chart-3: var(--color-amber-500);
        --chart-4: var(--color-purple-500);
        --chart-5: var(--color-rose-500);
        --sidebar: var(--color-neutral-900);
        --sidebar-foreground: var(--color-neutral-50);
        --sidebar-primary: var(--color-blue-700);
        --sidebar-primary-foreground: var(--color-neutral-50);
        --sidebar-accent: var(--color-neutral-800);
        --sidebar-accent-foreground: var(--color-neutral-50);
        --sidebar-border: var(--color-neutral-800);
        --sidebar-ring: var(--color-neutral-600);
      }

      @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);
        --radius-sm: calc(var(--radius) - 4px);
        --radius-md: calc(var(--radius) - 2px);
        --radius-lg: var(--radius);
        --radius-xl: calc(var(--radius) + 4px);
        --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);
      }

      @layer base {
        * {
          @apply border-border outline-ring/50;
        }
        body {
          @apply bg-background text-foreground;
        }
      }
      ```
    </CodeCollapsibleWrapper>

    Alternatively, you can use the `@caprice-ui/tailwind` preset:

    ```css title="src/styles/globals.css"
    @import "tailwindcss";
    @import "@caprice-ui/tailwind/themes/caprice";
    @import "@caprice-ui/tailwind/preset";

    @layer base {
      * {
        @apply border-border outline-ring/50;
      }
      body {
        @apply bg-background text-foreground;
      }
    }
    ```
  </Step>

  <Step>
    ### Add a cn helper

    ```ts lineNumbers title="lib/utils.ts"
    import { defineConfig, type VariantProps } from 'cva';
    import { twMerge } from 'tailwind-merge';

    export const {
      compose,
      cva,
      cx: cn,
    } = defineConfig({
      hooks: {
        onComplete: (className: string) => twMerge(className),
      },
    });

    export type { VariantProps };
    ```
  </Step>

  <Step>
    ### Create a `components.json` file

    Create a `components.json` file in the root of your project.

    ```json title="components.json" lineNumbers
    {
      "$schema": "https://ui.shadcn.com/schema.json",
      "style": "new-york",
      "rsc": false,
      "tsx": true,
      "registries": {
        "@caprice": "https://caprice-ui.com/r/{name}.json"
      },
      "tailwind": {
        "config": "",
        "css": "src/styles/globals.css",
        "baseColor": "neutral",
        "cssVariables": true,
        "prefix": ""
      },
      "aliases": {
        "components": "@/components",
        "utils": "@/lib/utils",
        "ui": "@/components/ui",
        "lib": "@/lib",
        "hooks": "@/hooks"
      },
      "iconLibrary": "lucide"
    }
    ```
  </Step>

  <Step>
    ### That's it!

    You can now start adding components to your project.
  </Step>
</Steps>


# Next.js
URL: /docs/installation/nextjs



<Tabs itemClassName="text-base" className="border-none bg-transparent" items={["Using shadcn/ui (recommended)", "Using npm package"]}>
  <Tab value="Using shadcn/ui (recommended)">
    <Steps>
      <Step>
        ### Create project

        Run the `init` command to create a new Next.js project or to setup an existing one:

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npx shadcn@latest init https://caprice-ui.com/r/init.json
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm dlx shadcn@latest init https://caprice-ui.com/r/init.json
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn dlx shadcn@latest init https://caprice-ui.com/r/init.json
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun x shadcn@latest init https://caprice-ui.com/r/init.json
            ```
          </CodeBlockTab>
        </CodeBlockTabs>

        Run the `init` command to create a new Next.js project or to setup an existing one:

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npx shadcn@latest init https://caprice-ui.com/r/init.json
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm dlx shadcn@latest init https://caprice-ui.com/r/init.json
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn dlx shadcn@latest init https://caprice-ui.com/r/init.json
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun x shadcn@latest init https://caprice-ui.com/r/init.json
            ```
          </CodeBlockTab>
        </CodeBlockTabs>

        Choose between a Next.js project or a Monorepo.
      </Step>

      <Step>
        ### Add Caprice UI Registry to your `components.json`

        ```json title="components.json"
        {
          "registries": {
            "@caprice": "https://caprice-ui.com/r/{name}.json"
          }
        }
        ```
      </Step>

      <Step>
        ### Add Components

        You can now start adding components to your project.

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npx shadcn@latest add @caprice/button
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm dlx shadcn@latest add @caprice/button
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn dlx shadcn@latest add @caprice/button
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun x shadcn@latest add @caprice/button
            ```
          </CodeBlockTab>
        </CodeBlockTabs>

        The command above will add the `Button` component to your project. You can then import it like this:

        ```tsx title="app/page.tsx"
        // [!code highlight]
        import { Button } from "@/components/caprice-ui/button"

        export default function Home() {
          return (
            <div>
            // [!code highlight]
              <Button>Click me</Button>
            </div>
          )
        }
        ```
      </Step>

      Alternatively, you can add all components at once with the following command:

      <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
        <CodeBlockTabsList>
          <CodeBlockTabsTrigger value="npm">
            npm
          </CodeBlockTabsTrigger>

          <CodeBlockTabsTrigger value="pnpm">
            pnpm
          </CodeBlockTabsTrigger>

          <CodeBlockTabsTrigger value="yarn">
            yarn
          </CodeBlockTabsTrigger>

          <CodeBlockTabsTrigger value="bun">
            bun
          </CodeBlockTabsTrigger>
        </CodeBlockTabsList>

        <CodeBlockTab value="npm">
          ```bash
          npx shadcn@latest add @caprice/ui
          ```
        </CodeBlockTab>

        <CodeBlockTab value="pnpm">
          ```bash
          pnpm dlx shadcn@latest add @caprice/ui
          ```
        </CodeBlockTab>

        <CodeBlockTab value="yarn">
          ```bash
          yarn dlx shadcn@latest add @caprice/ui
          ```
        </CodeBlockTab>

        <CodeBlockTab value="bun">
          ```bash
          bun x shadcn@latest add @caprice/ui
          ```
        </CodeBlockTab>
      </CodeBlockTabs>

      This will add all caprice ui components to your project.
    </Steps>
  </Tab>

  <Tab value="Using npm package">
    <Steps>
      <Step>
        ### Create a new Next.js project

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npx create-next-app@latest my-app
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm dlx create-next-app@latest my-app
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn dlx create-next-app@latest my-app
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun x create-next-app@latest my-app
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Install Caprice UI dependencies

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm install @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm add @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn add @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun add @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Configure styles

        Add the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the [theming section](/docs/theming).

        ```css title="app/globals.css"
        @import "tailwindcss";
        @import "@caprice-ui/tailwind/themes/caprice";
        @import "@caprice-ui/tailwind/preset";

        @source "../node_modules/@caprice-ui";

        @layer base {
          * {
            @apply border-border outline-ring/50;
          }
          body {
            @apply bg-background text-foreground;
          }
        }
        ```
      </Step>

      <Step>
        ### Import components

        ```tsx title="app/page.tsx"
        // [!code highlight]
        import { Button } from "@caprice-ui/react/button"
        // or import { Button } from "@caprice-ui/react"

        export default function Home() {
          return (
            <div>
            // [!code highlight]
              <Button>Click me</Button>
            </div>
          )
        }
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>


# React Router
URL: /docs/installation/react-router



<Tabs itemClassName="text-base" className="border-none bg-transparent" items={["Using shadcn/ui (recommended)", "Using npm package"]}>
  <Tab value="Using shadcn/ui (recommended)">
    <Steps>
      <Step>
        ### Create project

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npx create-react-router@latest my-app
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm dlx create-react-router@latest my-app
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn dlx create-react-router@latest my-app
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun x create-react-router@latest my-app
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Run the CLI

        Run the `shadcn` init command to setup your project:

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npx shadcn@latest init https://caprice-ui.com/r/init.json
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm dlx shadcn@latest init https://caprice-ui.com/r/init.json
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn dlx shadcn@latest init https://caprice-ui.com/r/init.json
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun x shadcn@latest init https://caprice-ui.com/r/init.json
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Add Caprice UI Registry to your `components.json`

        ```json title="components.json"
        {
          "registries": {
            "@caprice": "https://caprice-ui.com/r/{name}.json"
          }
        }
        ```
      </Step>

      <Step>
        ### Add Components

        You can now start adding components to your project.

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npx shadcn@latest add @caprice/button
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm dlx shadcn@latest add @caprice/button
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn dlx shadcn@latest add @caprice/button
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun x shadcn@latest add @caprice/button
            ```
          </CodeBlockTab>
        </CodeBlockTabs>

        The command above will add the `Button` component to your project. You can then import it like this:

        ```tsx lineNumbers title="app/routes/home.tsx"
        // [!code highlight]
        import { Button } from "~/components/caprice-ui/button"

        import type { Route } from "./+types/home"

        export function meta({}: Route.MetaArgs) {
          return [
            { title: "New React Router App" },
            { name: "description", content: "Welcome to React Router!" },
          ]
        }

        export default function Home() {
          return (
            <div className="flex min-h-svh flex-col items-center justify-center">
        // [!code highlight]
              <Button>Click me</Button>
            </div>
          )
        }
        ```
      </Step>

      ### Add all components at once

            <section id="all-components">
              You can install all Caprice UI components at once with a single command:

              <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
                <CodeBlockTabsList>
                  <CodeBlockTabsTrigger value="npm">
                    npm
                  </CodeBlockTabsTrigger>

                  <CodeBlockTabsTrigger value="pnpm">
                    pnpm
                  </CodeBlockTabsTrigger>

                  <CodeBlockTabsTrigger value="yarn">
                    yarn
                  </CodeBlockTabsTrigger>

                  <CodeBlockTabsTrigger value="bun">
                    bun
                  </CodeBlockTabsTrigger>
                </CodeBlockTabsList>

                <CodeBlockTab value="npm">
                  ```bash
                  npx shadcn@latest add @caprice/ui
                  ```
                </CodeBlockTab>

                <CodeBlockTab value="pnpm">
                  ```bash
                  pnpm dlx shadcn@latest add @caprice/ui
                  ```
                </CodeBlockTab>

                <CodeBlockTab value="yarn">
                  ```bash
                  yarn dlx shadcn@latest add @caprice/ui
                  ```
                </CodeBlockTab>

                <CodeBlockTab value="bun">
                  ```bash
                  bun x shadcn@latest add @caprice/ui
                  ```
                </CodeBlockTab>
              </CodeBlockTabs>

              The command above will add all caprice ui components to your project.
            </section>
    </Steps>
  </Tab>

  <Tab value="Using npm package">
    <Steps>
      <Step>
        ### Create project

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npx create-react-router@latest my-app
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm dlx create-react-router@latest my-app
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn dlx create-react-router@latest my-app
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun x create-react-router@latest my-app
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Install Caprice UI dependencies

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm install @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm add @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn add @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun add @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Configure styles

        Add the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the [theming section](/docs/theming).

        ```css title="app/app.css"
        @import "tailwindcss";
        @import "@caprice-ui/tailwind/themes/caprice";
        @import "@caprice-ui/tailwind/preset";

        @source "../node_modules/@caprice-ui";

        @layer base {
          * {
            @apply border-border outline-ring/50;
          }
          body {
            @apply bg-background text-foreground;
          }
        }
        ```
      </Step>

      <Step>
        ### Import components

        ```tsx lineNumbers title="app/routes/home.tsx"
        // [!code highlight]
        import { Button } from "@caprice-ui/react/button"
        // or import { Button } from "@caprice-ui/react"

        import type { Route } from "./+types/home"

        export function meta({}: Route.MetaArgs) {
          return [
            { title: "New React Router App" },
            { name: "description", content: "Welcome to React Router!" },
          ]
        }

        export default function Home() {
          return (
            <div className="flex min-h-svh flex-col items-center justify-center">
        // [!code highlight]
              <Button>Click me</Button>
            </div>
          )
        }
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>


# TanStack Router
URL: /docs/installation/tanstack-router



<Tabs itemClassName="text-base" className="border-none bg-transparent" items={["Using shadcn/ui (recommended)", "Using npm package"]}>
  <Tab value="Using shadcn/ui (recommended)">
    <Steps>
      <Step>
        ### Create project

        Start by creating a new TanStack Router project:

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npx create-tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcn
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm dlx create-tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcn
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn dlx create-tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcn
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun x create-tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcn
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Add Caprice UI Registry to your `components.json`

        ```json title="components.json"
        {
          "registries": {
            "@caprice": "https://caprice-ui.com/r/{name}.json"
          }
        }
        ```
      </Step>

      <Step>
        ### Add Components

        You can now start adding components to your project.

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npx shadcn@latest add @caprice/button
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm dlx shadcn@latest add @caprice/button
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn dlx shadcn@latest add @caprice/button
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun x shadcn@latest add @caprice/button
            ```
          </CodeBlockTab>
        </CodeBlockTabs>

        The command above will add the `Button` component to your project. You can then import it like this:

        ```tsx title="src/routes/index.tsx" lineNumbers
        import { createFileRoute } from "@tanstack/react-router"
        // [!code highlight]
        import { Button } from "@/components/caprice-ui/button"

        export const Route = createFileRoute("/")({
          component: App,
        })

        function App() {
          return (
            <div>
        // [!code highlight]
              <Button>Click me</Button>
            </div>
          )
        }
        ```
      </Step>

      ### Add all components at once

            <section id="all-components">
              You can install all Caprice UI components at once with a single command:

              <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
                <CodeBlockTabsList>
                  <CodeBlockTabsTrigger value="npm">
                    npm
                  </CodeBlockTabsTrigger>

                  <CodeBlockTabsTrigger value="pnpm">
                    pnpm
                  </CodeBlockTabsTrigger>

                  <CodeBlockTabsTrigger value="yarn">
                    yarn
                  </CodeBlockTabsTrigger>

                  <CodeBlockTabsTrigger value="bun">
                    bun
                  </CodeBlockTabsTrigger>
                </CodeBlockTabsList>

                <CodeBlockTab value="npm">
                  ```bash
                  npx shadcn@latest add @caprice/ui
                  ```
                </CodeBlockTab>

                <CodeBlockTab value="pnpm">
                  ```bash
                  pnpm dlx shadcn@latest add @caprice/ui
                  ```
                </CodeBlockTab>

                <CodeBlockTab value="yarn">
                  ```bash
                  yarn dlx shadcn@latest add @caprice/ui
                  ```
                </CodeBlockTab>

                <CodeBlockTab value="bun">
                  ```bash
                  bun x shadcn@latest add @caprice/ui
                  ```
                </CodeBlockTab>
              </CodeBlockTabs>

              The command above will add all caprice ui components to your project.
            </section>
    </Steps>
  </Tab>

  <Tab value="Using npm package">
    <Steps>
      <Step>
        ### Create project

        Start by creating a new TanStack Router project:

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npx create-tsrouter-app@latest my-app --template file-router --tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm dlx create-tsrouter-app@latest my-app --template file-router --tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn dlx create-tsrouter-app@latest my-app --template file-router --tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun x create-tsrouter-app@latest my-app --template file-router --tailwind
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Install Caprice UI dependencies

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm install @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm add @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn add @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun add @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Configure styles

        Add the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the [theming section](/docs/theming).

        ```css title="src/styles.css"
        @import "tailwindcss";
        @import "@caprice-ui/tailwind/themes/caprice";
        @import "@caprice-ui/tailwind/preset";

        @source "../node_modules/@caprice-ui";

        @layer base {
          * {
            @apply border-border outline-ring/50;
          }
          body {
            @apply bg-background text-foreground;
          }
        }
        ```
      </Step>

      <Step>
        ### Import components

        ```tsx title="src/routes/index.tsx" lineNumbers
        import { createFileRoute } from "@tanstack/react-router"
        // [!code highlight]
        import { Button } from "@caprice-ui/react/button"
        // or import { Button } from "@caprice-ui/react"

        export const Route = createFileRoute("/")({
          component: App,
        })

        function App() {
          return (
            <div>
        // [!code highlight]
              <Button>Click me</Button>
            </div>
          )
        }
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>


# TanStack Start
URL: /docs/installation/tanstack-start



<Tabs itemClassName="text-base" className="border-none bg-transparent" items={["Using shadcn/ui (recommended)", "Using npm package"]}>
  <Tab value="Using shadcn/ui (recommended)">
    <Steps>
      <Step>
        ### Create project

        Run the following command to create a new TanStack Start project with shadcn/ui:

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm create @tanstack/start@latest --tailwind --add-ons shadcn
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm create @tanstack/start --tailwind --add-ons shadcn
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn create @tanstack/start --tailwind --add-ons shadcn
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bunx @tanstack/create-start@latest --tailwind --add-ons shadcn
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Add Caprice UI Registry to your `components.json`

        ```json title="components.json"
        {
          "registries": {
            "@caprice": "https://caprice-ui.com/r/{name}.json"
          }
        }
        ```
      </Step>

      <Step>
        ### Add Components

        You can now start adding components to your project.

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npx shadcn@latest add @caprice/button
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm dlx shadcn@latest add @caprice/button
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn dlx shadcn@latest add @caprice/button
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun x shadcn@latest add @caprice/button
            ```
          </CodeBlockTab>
        </CodeBlockTabs>

        The command above will add the `Button` component to your project. You can then import it like this:

        ```tsx title="app/routes/index.tsx" lineNumbers
        import { Button } from "@/components/caprice-ui/button"

        function App() {
          return (
            <div>
              <Button>Click me</Button>
            </div>
          )
        }
        ```
      </Step>
    </Steps>

    ### Add all components at once

        <section id="all-components">
          You can install all Caprice UI components at once with a single command:

          <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
            <CodeBlockTabsList>
              <CodeBlockTabsTrigger value="npm">
                npm
              </CodeBlockTabsTrigger>

              <CodeBlockTabsTrigger value="pnpm">
                pnpm
              </CodeBlockTabsTrigger>

              <CodeBlockTabsTrigger value="yarn">
                yarn
              </CodeBlockTabsTrigger>

              <CodeBlockTabsTrigger value="bun">
                bun
              </CodeBlockTabsTrigger>
            </CodeBlockTabsList>

            <CodeBlockTab value="npm">
              ```bash
              npx shadcn@latest add @caprice/ui
              ```
            </CodeBlockTab>

            <CodeBlockTab value="pnpm">
              ```bash
              pnpm dlx shadcn@latest add @caprice/ui
              ```
            </CodeBlockTab>

            <CodeBlockTab value="yarn">
              ```bash
              yarn dlx shadcn@latest add @caprice/ui
              ```
            </CodeBlockTab>

            <CodeBlockTab value="bun">
              ```bash
              bun x shadcn@latest add @caprice/ui
              ```
            </CodeBlockTab>
          </CodeBlockTabs>

          The command above will add all caprice ui components to your project.
        </section>
  </Tab>

  <Tab value="Using npm package">
    <Steps>
      <Step>
        ### Create project

        Run the following command to create a new TanStack Start project with shadcn/ui:

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm create @tanstack/start@latest --tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm create @tanstack/start --tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn create @tanstack/start --tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bunx @tanstack/create-start@latest --tailwind
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Install Caprice UI dependencies

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm install @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm add @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn add @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun add @caprice-ui/react @caprice-ui/tailwind
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Configure styles

        Add the following to your styles/globals.css file. You can learn more about using CSS variables for theming in the [theming section](/docs/theming).

        ```css title="src/styles.css"
        @import "tailwindcss";
        @import "@caprice-ui/tailwind/themes/caprice";
        @import "@caprice-ui/tailwind/preset";

        @source "../node_modules/@caprice-ui";

        @layer base {
          * {
            @apply border-border outline-ring/50;
          }
          body {
            @apply bg-background text-foreground;
          }
        }
        ```
      </Step>

      <Step>
        ### Import components

        ```tsx title="app/routes/index.tsx" lineNumbers
        import { Button } from "@caprice-ui/react/button"
        // or import { Button } from "@caprice-ui/react"

        function App() {
          return (
            <div>
              <Button>Click me</Button>
            </div>
          )
        }
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>


# Vite
URL: /docs/installation/vite



<Tabs itemClassName="text-base" className="border-none bg-transparent" items={["Using shadcn/ui (recommended)", "Using npm package"]}>
  <Tab value="Using shadcn/ui (recommended)">
    <Steps>
      <Step>
        ### Create project

        Start by creating a new React project using `vite`. Select the **React + TypeScript** template:

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm create vite@latest
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm create vite
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn create vite
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bunx create-vite
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Add Tailwind CSS

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm install tailwindcss @tailwindcss/vite
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm add tailwindcss @tailwindcss/vite
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn add tailwindcss @tailwindcss/vite
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun add tailwindcss @tailwindcss/vite
            ```
          </CodeBlockTab>
        </CodeBlockTabs>

        Replace everything in `src/index.css` with the following:

        ```css title="src/index.css"
        @import "tailwindcss";
        ```
      </Step>

      <Step>
        ### Edit tsconfig.json file

        The current version of Vite splits TypeScript configuration into three files, two of which need to be edited.
        Add the `baseUrl` and `paths` properties to the `compilerOptions` section of the `tsconfig.json` and
        `tsconfig.app.json` files:

        ```ts title="tsconfig.json" lineNumbers
        {
          "files": [],
          "references": [
            {
              "path": "./tsconfig.app.json"
            },
            {
              "path": "./tsconfig.node.json"
            }
          ],
          // [!code focus:6]
          // [!code highlight:6]
          "compilerOptions": {
            "baseUrl": ".",
            "paths": {
              "@/*": ["./src/*"]
            }
          }
        }
        ```
      </Step>

      <Step>
        ### Edit tsconfig.app.json file

        Add the following code to the `tsconfig.app.json` file to resolve paths, for your IDE:

        ```ts title="tsconfig.app.json" lineNumbers
        {
          "compilerOptions": {
            // ...
            // [!code highlight:6]
            "baseUrl": ".",
            "paths": {
              "@/*": [
                "./src/*"
              ]
            }
            // ...
          }
        }
        ```
      </Step>

      <Step>
        ### Update vite.config.ts

        Add the following code to the vite.config.ts so your app can resolve paths without error:

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm install -D @types/node
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm add -D @types/node
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn add --dev @types/node
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun add --dev @types/node
            ```
          </CodeBlockTab>
        </CodeBlockTabs>

        ```typescript title="vite.config.ts" lineNumbers
        // [!code highlight:2]
        import path from "path"
        import tailwindcss from "@tailwindcss/vite"
        import react from "@vitejs/plugin-react"
        import { defineConfig } from "vite"

        // https://vite.dev/config/
        export default defineConfig({
        // [!code highlight:6]
          plugins: [react(), tailwindcss()],
          resolve: {
            alias: {
              "@": path.resolve(__dirname, "./src"),
            },
          },
        })
        ```
      </Step>

      <Step>
        ### Run the CLI

        Run the `shadcn` init command to setup your project:

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npx shadcn@latest init https://caprice-ui.com/r/init.json
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm dlx shadcn@latest init https://caprice-ui.com/r/init.json
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn dlx shadcn@latest init https://caprice-ui.com/r/init.json
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun x shadcn@latest init https://caprice-ui.com/r/init.json
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Add Caprice UI Registry to your `components.json`

        ```json title="components.json"
        {
          "registries": {
            "@caprice": "https://caprice-ui.com/r/{name}.json"
          }
        }
        ```
      </Step>

      <Step>
        ### Add Components

        You can now start adding components to your project.

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npx shadcn@latest add button
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm dlx shadcn@latest add button
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn dlx shadcn@latest add button
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun x shadcn@latest add button
            ```
          </CodeBlockTab>
        </CodeBlockTabs>

        The command above will add the `Button` component to your project. You can then import it like this:

        ```tsx lineNumbers title="src/App.tsx"
        import { Button } from "@/components/caprice-ui/button"

        function App() {
          return (
            <div className="flex min-h-svh flex-col items-center justify-center">
              <Button>Click me</Button>
            </div>
          )
        }

        export default App
        ```
      </Step>

      ### Add all components at once

            <section id="all-components">
              You can install all Caprice UI components at once with a single command:

              <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
                <CodeBlockTabsList>
                  <CodeBlockTabsTrigger value="npm">
                    npm
                  </CodeBlockTabsTrigger>

                  <CodeBlockTabsTrigger value="pnpm">
                    pnpm
                  </CodeBlockTabsTrigger>

                  <CodeBlockTabsTrigger value="yarn">
                    yarn
                  </CodeBlockTabsTrigger>

                  <CodeBlockTabsTrigger value="bun">
                    bun
                  </CodeBlockTabsTrigger>
                </CodeBlockTabsList>

                <CodeBlockTab value="npm">
                  ```bash
                  npx shadcn@latest add @caprice/ui
                  ```
                </CodeBlockTab>

                <CodeBlockTab value="pnpm">
                  ```bash
                  pnpm dlx shadcn@latest add @caprice/ui
                  ```
                </CodeBlockTab>

                <CodeBlockTab value="yarn">
                  ```bash
                  yarn dlx shadcn@latest add @caprice/ui
                  ```
                </CodeBlockTab>

                <CodeBlockTab value="bun">
                  ```bash
                  bun x shadcn@latest add @caprice/ui
                  ```
                </CodeBlockTab>
              </CodeBlockTabs>

              The command above will add all caprice ui components to your project.
            </section>
    </Steps>
  </Tab>

  <Tab value="Using npm package">
    <Steps>
      <Step>
        ### Create project

        Start by creating a new React project using `vite`. Select the **React + TypeScript** template:

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm create vite@latest
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm create vite
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn create vite
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bunx create-vite
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Install Caprice UI dependencies

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm install @caprice-ui/react @caprice-ui/tailwind tailwindcss @tailwindcss/vite
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm add @caprice-ui/react @caprice-ui/tailwind tailwindcss @tailwindcss/vite
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn add @caprice-ui/react @caprice-ui/tailwind tailwindcss @tailwindcss/vite
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun add @caprice-ui/react @caprice-ui/tailwind tailwindcss @tailwindcss/vite
            ```
          </CodeBlockTab>
        </CodeBlockTabs>

        Replace everything in `src/index.css` with the following:

        ```css title="src/index.css"
        @import "tailwindcss";
        @import "@caprice-ui/tailwind/themes/caprice";
        @import "@caprice-ui/tailwind/preset";

        @source "../node_modules/@caprice-ui";

        @layer base {
          * {
            @apply border-border outline-ring/50;
          }
          body {
            @apply bg-background text-foreground;
          }
        }
        ```
      </Step>

      <Step>
        ### Update vite.config.ts

        Add the following code to the vite.config.ts so your app can resolve paths without error:

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm install -D @types/node
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm add -D @types/node
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn add --dev @types/node
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun add --dev @types/node
            ```
          </CodeBlockTab>
        </CodeBlockTabs>

        ```typescript title="vite.config.ts" lineNumbers
        // [!code highlight:2]
        import tailwindcss from "@tailwindcss/vite"
        import react from "@vitejs/plugin-react"
        import { defineConfig } from "vite"

        // https://vite.dev/config/
        export default defineConfig({
        // [!code highlight:6]
          plugins: [react(), tailwindcss()],
        })
        ```
      </Step>

      <Step>
        ### Import components

        ```tsx lineNumbers title="src/App.tsx"
        import { Button } from "@caprice-ui/react/button"
        // or import { Button } from "@caprice-ui/react"

        function App() {
          return (
            <div className="flex min-h-svh flex-col items-center justify-center">
              <Button>Click me</Button>
            </div>
          )
        }

        export default App
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>


# Corner Shape
URL: /docs/utilities/corner-shape



<ComponentPreview name="corner-shape" />

## Installation

<Tabs items={['CLI', 'Package', 'Manual']}>
  <Tab value="CLI">
    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npx shadcn@latest add @caprice/corner-shape
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest add @caprice/corner-shape
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn dlx shadcn@latest add @caprice/corner-shape
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun x shadcn@latest add @caprice/corner-shape
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Tab>

  <Tab value="Package">
    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        @caprice-ui/tailwind
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        @caprice-ui/tailwind
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        @caprice-ui/tailwind
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        @caprice-ui/tailwind
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Tab>

  <Tab value="Manual">
    <Steps>
      <Step>
        ### Install the following dependencies:

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm install @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm add @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn add @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun add @caprice-ui/tailwind
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Copy and paste the following code into your project.

        <ComponentSource src="packages/tailwind/utility/corner-shape.css" />
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Usage

Import the utility into your global.css file:

```css title="global.css"
@import "tailwindcss";
// [!code ++]
@import "@caprice-ui/tailwind/utility/corner-shape";
```

Add the utility classes to your markup / components:

```tsx title="example.tsx" lineNumbers
// [!code word:corner-smooth]
// [!code word:supports-corner\:rounded-2xl]
<div class="rounded-lg bg-neutral-100 p-4 corner-smooth supports-corner:rounded-2xl">
  I'm smooth on chromium, but have similar radius on non corner-shape supporting browsers with the supports media query
</div>
```


# Touch Hitbox
URL: /docs/utilities/touch-hitbox



<ComponentPreview name="touch-hitbox" />

## Installation

<Tabs items={['CLI', 'Package', 'Manual']}>
  <Tab value="CLI">
    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npx shadcn@latest add @caprice/touch-hitbox
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest add @caprice/touch-hitbox
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn dlx shadcn@latest add @caprice/touch-hitbox
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun x shadcn@latest add @caprice/touch-hitbox
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Tab>

  <Tab value="Package">
    <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        @caprice-ui/tailwind
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        @caprice-ui/tailwind
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        @caprice-ui/tailwind
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        @caprice-ui/tailwind
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Tab>

  <Tab value="Manual">
    <Steps>
      <Step>
        ### Install the following dependencies:

        <CodeBlockTabs defaultValue="npm" groupId="package-manager" persist>
          <CodeBlockTabsList>
            <CodeBlockTabsTrigger value="npm">
              npm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="pnpm">
              pnpm
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="yarn">
              yarn
            </CodeBlockTabsTrigger>

            <CodeBlockTabsTrigger value="bun">
              bun
            </CodeBlockTabsTrigger>
          </CodeBlockTabsList>

          <CodeBlockTab value="npm">
            ```bash
            npm install @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="pnpm">
            ```bash
            pnpm add @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="yarn">
            ```bash
            yarn add @caprice-ui/tailwind
            ```
          </CodeBlockTab>

          <CodeBlockTab value="bun">
            ```bash
            bun add @caprice-ui/tailwind
            ```
          </CodeBlockTab>
        </CodeBlockTabs>
      </Step>

      <Step>
        ### Copy and paste the following code into your project.

        <ComponentSource src="packages/tailwind/utility/touch-hitbox.css" />
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Usage

Import the utility into your global.css file:

```css title="global.css"
@import "tailwindcss";
// [!code ++]
@import "@caprice-ui/tailwind/utility/touch-hitbox";
```

Add the utility classes to your markup / components:

```tsx title="example.tsx" lineNumbers
// [!code word:touch-hitbox]
<button type="button" class="touch-hitbox">
  <Icon size="size-4">
</button>
```

Additionally, you can use the `pointer-coarse:` variant to apply the expanded touch target only on touchscreen devices:

```tsx title="example.tsx" lineNumbers
// [!code word:pointer-coarse:touch-hitbox]
<button type="button" class="pointer-coarse:touch-hitbox">
  <Icon size="size-4">
</button>
```


# Heading
URL: /docs/foundations/typography/heading



## Installation

<InstallTabs name="heading" />

## Usage

## Examples

## API Reference


# Text
URL: /docs/foundations/typography/text



## Installation

<InstallTabs name="text" />

## Usage

## Examples

## API Reference