# Introduction (/docs/introduction)

---
title: Introduction
description: A set of perfect-designed components built on top of React Aria and Motion.
---

**Kanpeki** is a collection of beautifully designed, accessible, and composable components for your React apps. Built on top of [React Aria Components](https://react-aria.adobe.com/) and styled with [Tailwind CSS](https://tailwindcss.com/), it's designed for you to copy, paste, and own.

We think React Aria Components is the best foundation for modern web applications. We've taken its powerful, accessible primitives and given them a design system that's ready to go, right out of the box.

## How It Works

Our approach is simple: you should own your code. We're inspired by the copy-paste ethos of **shadcn/ui**.

Instead of installing a package, you get the source code. This means:

- **No abstractions:** You have full control over how components look and behave.
- **Endless customization:** Need to change something? Just edit the file.
- **Learn by doing:** See how components are built and adapt them to your needs.

**What do you mean by not a component library?**

You do not install it as a dependency. It is not available or distributed via npm. Pick the components you need. Copy and paste the code into your project and customize to your needs. The code is yours.

## Like shadcn/ui, but with React Aria

If you've used shadcn/ui, you'll feel right at home. The main difference is the foundation: **shadcn/ui uses Radix UI**, while **Kanpeki uses React Aria Components**.

We chose React Aria Components for its robust, accessible, and unopinionated primitives. It handles the hard parts—like accessibility, keyboard navigation, and focus management—without imposing any styles. This gives us the freedom to create a design system that is both beautiful and flexible.

## Modern Tooling

Kanpeki uses modern tools that improve developer experience:

### CVA Beta (Class Variance Authority)

Instead of the old `class-variance-authority` package, we use the new beta version simply called [`cva`](https://beta.cva.style/). This new version addresses one of the biggest complaints: the name was just too long.

**Key improvements:**

- **Simpler configuration:** No more `cn` utility hack. Configure `tailwind-merge` directly:

```ts title="lib/cva.ts"
import { defineConfig } from "cva";
import { twMerge } from "tailwind-merge";

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

Compare this to the old shadcn approach:

```ts title="lib/utils.ts"
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

- **New features:**
  - [`compose`](https://beta.cva.style/getting-started/composing-components) - Shallow merge multiple `cva` components
  - [`defineConfig`](https://beta.cva.style/api-reference#defineconfig) - Generate `cva`, `cx` and `compose` functions based on your preferred configuration
  - [Cleaner API with single parameter (base styles via `base` property)](https://beta.cva.style/getting-started/whats-new#2-cva-now-accepts-a-single-parameter)
  - [Better TypeScript support](https://beta.cva.style/getting-started/whats-new#4-clearer-type-guards)

This is why Kanpeki doesn't need `class-variance-authority` or `clsx`.

### Tailwind CSS Motion

Instead of `tw-animate-css`, we use [`tailwindcss-motion`](https://docs.rombo.co/tailwind) for animations. It provides:

- More animation presets out of the box
- Better customization options
- More flexible animation controls
- Modern animation utilities

## Open Source

This project is open source and built in public. We welcome contributions, feedback, and improvements.

## Inspirations

Here are some cool projects that inspired Kanpeki:

- [shadcn/ui](https://ui.shadcn.com)
- [coss ui](https://coss.com/ui/docs)
- [Intent UI](https://intentui.com)
- [Radix Themes](https://www.radix-ui.com)
- [dotUI](https://dotui.org)
- [JollyUI](https://www.jollyui.dev)
- [Magic UI](https://magicui.design)
- [Aceternity UI](https://ui.aceternity.com)
- [Luxe](https://www.luxeui.com)


# Typography (/docs/typography)

---
title: Typography
description: Styles for headings, paragraphs, lists...etc
---

## Component Preview: typography-demo

```tsx
export function TypographyDemo() {
  return (
    <div>
      <h1 className="heading-1">The Joke Tax Chronicles</h1>
      <p className="p">
        Once upon a time, in a far-off land, there was a very lazy king who
        spent all day lounging on his throne. One day, his advisors came to him
        with a problem: the kingdom was running out of money.
      </p>
      <h2 className="heading-2 mt-10">The King's Plan</h2>
      <p className="p">
        The king thought long and hard, and finally came up with{" "}
        <a
          className="font-medium text-primary underline underline-offset-4"
          href="##"
        >
          a brilliant plan
        </a>
        : he would tax the jokes in the kingdom.
      </p>
      <blockquote className="blockquote">
        "After all," he said, "everyone enjoys a good joke, so it's only fair
        that they should pay for the privilege."
      </blockquote>
      <h3 className="heading-3 mt-8">The Joke Tax</h3>
      <p className="p">
        The king's subjects were not amused. They grumbled and complained, but
        the king was firm:
      </p>
      <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
        <li>1st level of puns: 5 gold coins</li>
        <li>2nd level of jokes: 10 gold coins</li>
        <li>3rd level of one-liners : 20 gold coins</li>
      </ul>
      <p className="p">
        As a result, people stopped telling jokes, and the kingdom fell into a
        gloom. But there was one person who refused to let the king's
        foolishness get him down: a court jester named Jokester.
      </p>
      <h3 className="heading-3 mt-8">Jokester's Revolt</h3>
      <p className="p">
        Jokester began sneaking into the castle in the middle of the night and
        leaving jokes all over the place: under the king's pillow, in his soup,
        even in the royal toilet. The king was furious, but he couldn't seem to
        stop Jokester.
      </p>
      <p className="p">
        And then, one day, the people of the kingdom discovered that the jokes
        left by Jokester were so funny that they couldn't help but laugh. And
        once they started laughing, they couldn't stop.
      </p>
      <h3 className="heading-3 mt-8">The People's Rebellion</h3>
      <p className="p">
        The people of the kingdom, feeling uplifted by the laughter, started to
        tell jokes and puns again, and soon the entire kingdom was in on the
        joke.
      </p>
      <div className="my-6 w-full overflow-y-auto">
        <table className="w-full">
          <thead>
            <tr className="m-0 border-t p-0 even:bg-muted">
              <th className="border px-4 py-2 text-left font-bold [[align=center]]:text-center [[align=right]]:text-right">
                King's Treasury
              </th>
              <th className="border px-4 py-2 text-left font-bold [[align=center]]:text-center [[align=right]]:text-right">
                People's happiness
              </th>
            </tr>
          </thead>
          <tbody>
            <tr className="m-0 border-t p-0 even:bg-muted">
              <td className="border px-4 py-2 text-left [[align=center]]:text-center [[align=right]]:text-right">
                Empty
              </td>
              <td className="border px-4 py-2 text-left [[align=center]]:text-center [[align=right]]:text-right">
                Overflowing
              </td>
            </tr>
            <tr className="m-0 border-t p-0 even:bg-muted">
              <td className="border px-4 py-2 text-left [[align=center]]:text-center [[align=right]]:text-right">
                Modest
              </td>
              <td className="border px-4 py-2 text-left [[align=center]]:text-center [[align=right]]:text-right">
                Satisfied
              </td>
            </tr>
            <tr className="m-0 border-t p-0 even:bg-muted">
              <td className="border px-4 py-2 text-left [[align=center]]:text-center [[align=right]]:text-right">
                Full
              </td>
              <td className="border px-4 py-2 text-left [[align=center]]:text-center [[align=right]]:text-right">
                Ecstatic
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <p className="p">
        The king, seeing how much happier his subjects were, realized the error
        of his ways and repealed the joke tax. Jokester was declared a hero, and
        the kingdom lived happily ever after.
      </p>
      <p className="p">
        The moral of the story is: never underestimate the power of a good laugh
        and always be careful of bad ideas.
      </p>
    </div>
  );
}
```


## Installation

```css title="typography.css"
@utility heading-1 {
  @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
}

@utility heading-2 {
  @apply scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0;
}

@utility heading-3 {
  @apply scroll-m-20 text-2xl font-semibold tracking-tight;
}

@utility heading-4 {
  @apply scroll-m-20 text-xl font-semibold tracking-tight;
}

@utility p {
  @apply leading-7 not-first:mt-6;
}

@utility blockquote {
  @apply mt-6 border-l-2 pl-6 italic;
}
```

```css title="globals.css"
@import "tailwindcss";
@import "./typography.css"; /* [!code highlight] */
```

## Examples

### h1

## Component Preview: typography-h1-demo

```tsx
export function TypographyH1Demo() {
  return (
    <h1 className="heading-1">Taxing Laughter: The Joke Tax Chronicles</h1>
  );
}
```


### h2

## Component Preview: typography-h2-demo

```tsx
export function TypographyH2Demo() {
  return <h2 className="heading-2">The People of the Kingdom</h2>;
}
```


### h3

## Component Preview: typography-h3-demo

```tsx
export function TypographyH3Demo() {
  return <h3 className="heading-3">The Joke Tax</h3>;
}
```


### h4

## Component Preview: typography-h4-demo

```tsx
export function TypographyH4Demo() {
  return <h4 className="heading-4">People stopped telling jokes</h4>;
}
```


### p

## Component Preview: typography-p-demo

```tsx
export function TypographyPDemo() {
  return (
    <p className="p">
      The king, seeing how much happier his subjects were, realized the error of
      his ways and repealed the joke tax.
    </p>
  );
}
```


### blockquote

## Component Preview: typography-blockquote-demo

```tsx
export function TypographyBlockquoteDemo() {
  return (
    <blockquote className="blockquote">
      "After all," he said, "everyone enjoys a good joke, so it's only fair that
      they should pay for the privilege."
    </blockquote>
  );
}
```



# Accordion (/docs/components/accordion)

---
title: Accordion
description: A vertically stacked set of interactive headings that each reveal a section of content.
links:
  docs: https://react-aria.adobe.com/DisclosureGroup
---

## Component Preview: accordion-demo

```tsx
import { Accordion } from "~/components/ui/accordion";

export function AccordionDemo() {
  return (
    <Accordion.Root
      className="w-full max-w-96"
      defaultExpandedKeys={["item-1"]}
    >
      <Accordion.Item id="item-1">
        <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
        <Accordion.Content>
          Yes. It adheres to the WAI-ARIA design pattern.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item id="item-2">
        <Accordion.Trigger>Is it styled?</Accordion.Trigger>
        <Accordion.Content>
          Yes. It comes with default styles that matches the other
          components&apos; aesthetic.
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item id="item-3">
        <Accordion.Trigger>Is it animated?</Accordion.Trigger>
        <Accordion.Content>
          Yes. It's animated by default, but you can disable it if you prefer.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn-ui@latest add @kanpeki/accordion
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: accordion

```tsx
// File: index.ts

export * from "./accordion";
export * as Accordion from "./namespace";


// File: accordion.tsx

"use client";

import { ChevronDownIcon } from "lucide-react";
import {
  Button,
  composeRenderProps,
  Disclosure,
  DisclosureGroup,
  DisclosurePanel,
} from "react-aria-components";
import { AccordionStyles } from "./styles";

export interface AccordionRootProps
  extends React.ComponentProps<typeof DisclosureGroup> {}

export function AccordionRoot(props: AccordionRootProps) {
  return <DisclosureGroup data-slot="accordion-root" {...props} />;
}

export interface AccordionItemProps
  extends React.ComponentProps<typeof Disclosure> {}

export function AccordionItem({ className, ...props }: AccordionItemProps) {
  return (
    <Disclosure
      className={composeRenderProps(className, (className) =>
        AccordionStyles.Item({ className })
      )}
      data-slot="accordion-item"
      {...props}
    />
  );
}

export interface AccordionTriggerProps
  extends Omit<React.ComponentProps<typeof Button>, "slot"> {}

export function AccordionTrigger({
  className,
  children,
  ...props
}: AccordionTriggerProps) {
  return (
    <Button
      className={composeRenderProps(className, (className) =>
        AccordionStyles.Trigger({ className })
      )}
      data-slot="accordion-trigger"
      slot="trigger"
      {...props}
    >
      {composeRenderProps(children, (children) => (
        <>
          {children}
          <ChevronDownIcon className={AccordionStyles.Icon()} />
        </>
      ))}
    </Button>
  );
}

export interface AccordionContentProps
  extends React.ComponentProps<typeof DisclosurePanel> {}

export function AccordionContent({
  className,
  children,
  ...props
}: AccordionContentProps) {
  return (
    <DisclosurePanel
      className={composeRenderProps(className, (className) =>
        AccordionStyles.Content({ className })
      )}
      data-slot="accordion-content"
      {...props}
    >
      <div>{children}</div>
    </DisclosurePanel>
  );
}


// File: styles.ts

import { compose, cva } from "~/lib/cva";
import { CollapsibleStyles } from "~/components/ui/collapsible";

export const AccordionStyles = {
  Content: compose(
    CollapsibleStyles.Content,
    cva({
      base: ["*:pb-4"],
    })
  ),
  Icon: cva({
    base: [
      "pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200 group-expanded:rotate-180",
    ],
  }),
  Item: cva({
    base: ["group border-b last:border-b-0"],
  }),
  Trigger: cva({
    base: [
      "flex w-full flex-1 items-start justify-between gap-4 rounded-md py-4 text-left font-medium text-sm outline-none transition-all",
      "hover:underline",
      "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
      "disabled:pointer-events-none disabled:opacity-50",
    ],
  }),
};


// File: namespace.ts

export {
  AccordionContent as Content,
  AccordionItem as Item,
  AccordionRoot as Root,
  AccordionTrigger as Trigger,
} from "./accordion";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { Accordion } from "~/components/ui/accordion";

<Accordion.Root defaultExpandedKeys={["item-1"]}>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
    <Accordion.Content>
      Yes. It adheres to the WAI-ARIA design pattern.
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>;
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import {
  AccordionContent,
  AccordionItem,
  AccordionRoot,
  AccordionTrigger,
} from "~/components/ui/accordion";

<AccordionRoot defaultExpandedKeys={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</AccordionRoot>;
```

</Tabs.Content>

</Tabs.Root>

## Animation

The accordion uses the `--disclosure-panel-height{:css}` CSS variable to animate the height of the content area.

## Customization

If you need to customize the internal padding of the accordion content, you can use the `*:` Tailwind variant to target the content area directly.

```tsx
<Accordion.Content className="*:pb-12">
  Customized padding for the content area.
</Accordion.Content>
```


# Alert (/docs/components/alert)

---
title: Alert
description: Displays a callout for user attention.
links:
  docs: https://ui.shadcn.com/docs/components/alert
---

## Component Preview: alert-demo

```tsx
import { CheckCircle2Icon } from "lucide-react";
import { Alert } from "~/components/ui/alert";

export function AlertDemo() {
  return (
    <Alert.Root>
      <CheckCircle2Icon />
      <Alert.Title>Success! Your changes have been saved</Alert.Title>
      <Alert.Description>
        This is an alert. with icon, title and description.
      </Alert.Description>
    </Alert.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

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

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: alert

```tsx
// File: index.ts

export * from "./alert";
export * as Alert from "./namespace";
export * from "./styles";


// File: alert.tsx

import type { VariantProps } from "cva";
import { AlertStyles } from "./styles";

export interface AlertRootProps
  extends React.ComponentProps<"div">,
    VariantProps<typeof AlertStyles.Root> {}

export function AlertRoot({ className, variant, ...props }: AlertRootProps) {
  return (
    <div
      className={AlertStyles.Root({ className, variant })}
      data-slot="alert-root"
      role="alert"
      {...props}
    />
  );
}

export interface AlertTitleProps extends React.ComponentProps<"div"> {}

export function AlertTitle({ className, ...props }: AlertTitleProps) {
  return (
    <div
      className={AlertStyles.Title({ className })}
      data-slot="alert-title"
      {...props}
    />
  );
}

export interface AlertDescriptionProps extends React.ComponentProps<"div"> {}

export function AlertDescription({
  className,
  ...props
}: AlertDescriptionProps) {
  return (
    <div
      className={AlertStyles.Description({ className })}
      data-slot="alert-description"
      {...props}
    />
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const AlertStyles = {
  Description: cva({
    base: [
      "col-start-2 grid justify-items-start gap-1 text-muted-foreground text-sm [&_p]:leading-relaxed",
    ],
  }),
  Root: cva({
    base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
    defaultVariants: {
      variant: "default",
    },

    variants: {
      variant: {
        default: "bg-card text-card-foreground",
        destructive:
          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
        warning:
          "bg-card text-amber-400 *:data-[slot=alert-description]:text-amber-400/90 [&>svg]:text-current",
      },
    },
  }),
  Title: cva({
    base: ["col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight"],
  }),
};


// File: namespace.ts

export {
  AlertDescription as Description,
  AlertRoot as Root,
  AlertTitle as Title,
} from "./alert";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { TerminalIcon } from "lucide-react";
import { Alert } from "~/components/ui/alert";

<Alert.Root>
  <TerminalIcon className="size-4" />
  <Alert.Title>Heads up!</Alert.Title>
  <Alert.Description>
    You can add components and dependencies to your app using the cli.
  </Alert.Description>
</Alert.Root>
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import { TerminalIcon } from "lucide-react";
import { AlertRoot, AlertDescription, AlertTitle } from "~/components/ui/alert";

<AlertRoot>
  <TerminalIcon className="size-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</AlertRoot>
```

</Tabs.Content>

</Tabs.Root>

## Examples

### Destructive

## Component Preview: alert-destructive-demo

```tsx
import { AlertCircleIcon } from "lucide-react";
import { Alert } from "~/components/ui/alert";

export function AlertDestructiveDemo() {
  return (
    <Alert.Root variant="destructive">
      <AlertCircleIcon />
      <Alert.Title>Something went wrong!</Alert.Title>
      <Alert.Description>
        Your session has expired. Please log in again.
      </Alert.Description>
    </Alert.Root>
  );
}
```


## API Reference

<PropsTable
  data={[
    {
      name: "variant",
      required: false,
      typeSimple: "enum",
      type: '"default" | "danger" | "warning"',
      default: '"default"',
      description: "The visual style of the alert.",
    },
  ]}
/>


# Autocomplete (/docs/components/autocomplete)

---
title: Autocomplete
description: An autocomplete combines a TextField or SearchField with a Menu or ListBox, allowing users to search or filter a list of suggestions.
links:
  docs: https://react-aria.adobe.com/Autocomplete
---

## Component Preview: autocomplete-demo

```tsx
"use client";

import {
  CalculatorIcon,
  CalendarIcon,
  CreditCardIcon,
  SearchIcon,
  SettingsIcon,
  SmileIcon,
  UserIcon,
} from "lucide-react";
import { Autocomplete } from "~/components/ui/autocomplete";
import { Card } from "~/components/ui/card";
import { InputGroup } from "~/components/ui/input-group";
import { Keyboard } from "~/components/ui/keyboard";
import { Menu } from "~/components/ui/menu";
import { SearchField } from "~/components/ui/search-field";

export function AutocompleteDemo() {
  return (
    <Card.Root className="w-full">
      <Autocomplete>
        <Card.Header>
          <InputGroup.Root
            render={<SearchField.Root aria-label="Search" className="px-0" />}
          >
            <InputGroup.Addon>
              <SearchIcon />
            </InputGroup.Addon>
            <InputGroup.Input placeholder="Type a command or search..." />
            <InputGroup.Addon align="inline-end">
              <SearchField.Button />
            </InputGroup.Addon>
          </InputGroup.Root>
        </Card.Header>

        <Card.Content>
          <Menu.Content
            renderEmptyState={() => <Menu.Empty>No results found.</Menu.Empty>}
          >
            <Menu.Group>
              <Menu.Label>Suggestions</Menu.Label>

              <Menu.Item textValue="Calendar">
                <CalendarIcon />
                <span>Calendar</span>
              </Menu.Item>
              <Menu.Item textValue="Search Emoji">
                <SmileIcon />
                <span>Search Emoji</span>
              </Menu.Item>
              <Menu.Item textValue="Calculator">
                <CalculatorIcon />
                <span>Calculator</span>
              </Menu.Item>
            </Menu.Group>
            <Menu.Separator />
            <Menu.Group>
              <Menu.Label>Settings</Menu.Label>

              <Menu.Item textValue="Profile">
                <UserIcon />
                <span>Profile</span>
                <Keyboard variant="menu">⌘P</Keyboard>
              </Menu.Item>
              <Menu.Item textValue="Billing">
                <CreditCardIcon />
                <span>Billing</span>
                <Keyboard variant="menu">⌘B</Keyboard>
              </Menu.Item>
              <Menu.Item textValue="Settings">
                <SettingsIcon />
                <span>Settings</span>
                <Keyboard variant="menu">⌘S</Keyboard>
              </Menu.Item>
            </Menu.Group>
          </Menu.Content>
        </Card.Content>
      </Autocomplete>
    </Card.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/autocomplete
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: autocomplete

```tsx
"use client";

import {
  Autocomplete as RACAutocomplete,
  useFilter,
} from "react-aria-components";

export interface AutocompleteProps
  extends React.ComponentProps<typeof RACAutocomplete> {
  options?: Intl.CollatorOptions;
}

export function Autocomplete({ filter, options, ...props }: AutocompleteProps) {
  const { contains } = useFilter({ sensitivity: "base", ...options });

  return <RACAutocomplete filter={filter ?? contains} {...props} />;
}
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

```tsx
import { Autocomplete } from "~/components/ui/autocomplete";
import { Menu } from "~/components/ui/menu";
import { SearchField } from "~/components/ui/search-field";

<Autocomplete>
  <SearchField /> or <TextField />
  <Menu /> or <ListBox />
</Autocomplete>;
```

## Examples

### Dialog

## Component Preview: autocomplete-dialog-demo

```tsx
"use client";

import {
  CalculatorIcon,
  CalendarIcon,
  CreditCardIcon,
  SearchIcon,
  SettingsIcon,
  SmileIcon,
  UserIcon,
} from "lucide-react";

import { useEffect, useState } from "react";
import { Autocomplete } from "~/components/ui/autocomplete";
import { Dialog } from "~/components/ui/dialog";
import { InputGroup } from "~/components/ui/input-group";
import { Keyboard } from "~/components/ui/keyboard";
import { Menu } from "~/components/ui/menu";
import { SearchField } from "~/components/ui/search-field";

export function AutocompleteDialogDemo() {
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    const controller = new AbortController();

    document.addEventListener(
      "keydown",
      (e) => {
        if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
          e.preventDefault();
          setIsOpen((isOpen) => !isOpen);
        }
      },
      {
        signal: controller.signal,
      }
    );

    return () => controller.abort();
  }, []);

  return (
    <Dialog.Root isOpen={isOpen} onOpenChange={setIsOpen}>
      <p className="text-muted-foreground text-sm">
        Press{" "}
        <Keyboard>
          <span className="text-xs">⌘</span>J
        </Keyboard>
      </p>

      <Dialog.Overlay>
        <Dialog.Modal className="bg-popover p-0 text-popover-foreground">
          <Dialog.Content className="gap-0">
            <Autocomplete>
              <InputGroup.Root
                render={
                  <SearchField.Root
                    aria-label="Search"
                    autoFocus
                    className="h-12"
                  />
                }
              >
                <InputGroup.Addon>
                  <SearchIcon />
                </InputGroup.Addon>
                <InputGroup.Input placeholder="Type a command or search..." />
                <InputGroup.Addon align="inline-end">
                  <SearchField.Button />
                </InputGroup.Addon>
              </InputGroup.Root>

              <Menu.Content
                renderEmptyState={() => (
                  <Menu.Empty>No results found.</Menu.Empty>
                )}
                variant="command"
              >
                <Menu.Group>
                  <Menu.Label>Suggestions</Menu.Label>

                  <Menu.Item textValue="Calendar">
                    <CalendarIcon />
                    <span>Calendar</span>
                  </Menu.Item>
                  <Menu.Item textValue="Search Emoji">
                    <SmileIcon />
                    <span>Search Emoji</span>
                  </Menu.Item>
                  <Menu.Item textValue="Calculator">
                    <CalculatorIcon />
                    <span>Calculator</span>
                  </Menu.Item>
                </Menu.Group>
                <Menu.Separator />
                <Menu.Group>
                  <Menu.Label>Settings</Menu.Label>

                  <Menu.Item textValue="Profile">
                    <UserIcon />
                    <span>Profile</span>
                    <Keyboard variant="menu">⌘P</Keyboard>
                  </Menu.Item>
                  <Menu.Item textValue="Billing">
                    <CreditCardIcon />
                    <span>Billing</span>
                    <Keyboard variant="menu">⌘B</Keyboard>
                  </Menu.Item>
                  <Menu.Item textValue="Settings">
                    <SettingsIcon />
                    <span>Settings</span>
                    <Keyboard variant="menu">⌘S</Keyboard>
                  </Menu.Item>
                </Menu.Group>
              </Menu.Content>
            </Autocomplete>
          </Dialog.Content>
        </Dialog.Modal>
      </Dialog.Overlay>
    </Dialog.Root>
  );
}
```



# Avatar (/docs/components/avatar)

---
title: Avatar
description: An image element with a fallback for representing the user.
---

## Component Preview: avatar-demo

```tsx
import { UserIcon } from "lucide-react";
import { Avatar } from "~/components/ui/avatar";

export function AvatarDemo() {
  return (
    <Avatar.Root>
      <Avatar.Image
        alt="@fellipeutaka"
        src="https://github.com/fellipeutaka.png"
      />
      <Avatar.Placeholder>
        <UserIcon />
      </Avatar.Placeholder>
      <Avatar.Fallback>FU</Avatar.Fallback>
    </Avatar.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

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

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: avatar

```tsx
// File: index.ts

export * from "./avatar";
export * as Avatar from "./namespace";
export * from "./styles";


// File: avatar.tsx

"use client";

import { createContext, use, useLayoutEffect, useState } from "react";
import { AvatarStyles } from "./styles";

type Status = "idle" | "loading" | "success" | "error";
const AvatarContext = createContext<{
  status: Status;
  onStatusChange: (status: Status) => void;
} | null>(null);

function useAvatarContext() {
  const context = use(AvatarContext);
  if (!context) {
    throw new Error("Avatar components must be rendered within the AvatarRoot");
  }
  return context;
}

export interface AvatarRootProps extends React.ComponentProps<"span"> {}

export function AvatarRoot({ className, ...props }: AvatarRootProps) {
  const [status, setStatus] = useState<Status>("idle");

  return (
    <AvatarContext value={{ onStatusChange: setStatus, status }}>
      <span
        className={AvatarStyles.Root({ className })}
        data-slot="avatar-root"
        data-status={status}
        {...props}
      />
    </AvatarContext>
  );
}

function useImageLoadingStatus(src?: string) {
  const [status, setStatus] = useState<Status>("idle");

  useLayoutEffect(() => {
    if (!src) {
      setStatus("error");
      return;
    }
    let isMounted = true;
    const image = new window.Image();
    const updateStatus = (status: Status) => () => {
      if (!isMounted) {
        return;
      }
      setStatus(status);
    };
    setStatus("loading");
    image.onload = updateStatus("success");
    image.onerror = updateStatus("error");
    image.src = src;
    return () => {
      isMounted = false;
    };
  }, [src]);

  return status;
}

export interface AvatarImageProps extends React.ComponentProps<"img"> {
  src?: string;
}

export function AvatarImage({
  className,
  src,
  width,
  height,
  ...props
}: AvatarImageProps) {
  const context = useAvatarContext();
  const status = useImageLoadingStatus(src);

  useLayoutEffect(() => {
    if (status !== "idle") {
      context.onStatusChange(status);
    }
  }, [status, context.onStatusChange]);

  if (status !== "success") {
    return null;
  }

  return (
    <img
      {...props}
      alt={props.alt}
      className={AvatarStyles.Image({ className })}
      data-slot="avatar-image"
      height={height}
      src={src}
      width={width}
    />
  );
}

export interface AvatarFallbackProps extends React.ComponentProps<"span"> {}

export function AvatarFallback({ className, ...props }: AvatarFallbackProps) {
  const { status } = useAvatarContext();

  return (
    <span
      {...props}
      aria-hidden={status !== "error"}
      className={AvatarStyles.Fallback({ className })}
      data-slot="avatar-fallback"
    />
  );
}

export interface AvatarPlaceholderProps extends React.ComponentProps<"span"> {}

export function AvatarPlaceholder({
  className,
  ...props
}: AvatarPlaceholderProps) {
  const { status } = useAvatarContext();

  if (status !== "idle" && status !== "loading") {
    return null;
  }

  return (
    <span
      {...props}
      className={AvatarStyles.Placeholder({ className })}
      data-slot="avatar-placeholder"
    />
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const AvatarStyles = {
  Fallback: cva({
    base: [
      "col-start-1 row-start-1 size-full select-none place-content-center rounded-full bg-muted",
      "grid group-data-[status=success]:hidden",
    ],
  }),
  Image: cva({
    base: ["aspect-square size-full"],
  }),
  Placeholder: cva({
    base: [
      "col-start-1 row-start-1 grid size-full animate-pulse place-content-center bg-muted",
    ],
  }),
  Root: cva({
    base: ["group relative grid size-8 shrink-0 overflow-hidden rounded-full"],
  }),
};


// File: namespace.ts

export {
  AvatarFallback as Fallback,
  AvatarImage as Image,
  AvatarPlaceholder as Placeholder,
  AvatarRoot as Root,
} from "./avatar";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { UserIcon } from "lucide-react";
import { Avatar } from "~/components/ui/avatar";

<Avatar.Root>
  <Avatar.Image src="https://github.com/fellipeutaka.png" alt="@fellipeutaka" />
  <Avatar.Fallback>FU</Avatar.Fallback>
  <Avatar.Placeholder>
    <UserIcon className="size-6" />
  </Avatar.Placeholder>
</Avatar.Root>
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import { UserIcon } from "lucide-react";
import {
  AvatarRoot,
  AvatarFallback,
  AvatarImage,
  AvatarPlaceholder,
} from "~/components/ui/avatar";

<AvatarRoot>
  <AvatarImage src="https://github.com/fellipeutaka.png" alt="@fellipeutaka" />
  <AvatarFallback>FU</AvatarFallback>
  <AvatarPlaceholder>
    <UserIcon className="size-6" />
  </AvatarPlaceholder>
</AvatarRoot>
```

</Tabs.Content>

</Tabs.Root>

## Examples

### Group

## Component Preview: avatar-group-demo

```tsx
import { UserIcon } from "lucide-react";
import { Avatar } from "~/components/ui/avatar";

const avatars = [
  {
    src: "https://github.com/fellipeutaka.png",
    alt: "@fellipeutaka",
    fallback: "FU",
  },
  {
    src: "https://github.com/shadcn.png",
    alt: "@shadcn",
    fallback: "SN",
  },
  {
    src: "https://github.com/devongovett.png",
    alt: "@devongovett",
    fallback: "DG",
  },
  {
    src: "https://github.com/benoitgrelard.png",
    alt: "@benoitgrelard",
    fallback: "BG",
  },
  {
    src: "https://github.com/adamwathan.png",
    alt: "@adamwathan",
    fallback: "AW",
  },
] as const satisfies {
  src: string;
  alt: string;
  fallback: string;
}[];

export function AvatarGroupDemo() {
  return (
    <div className="flex -space-x-2">
      {avatars.map((avatar) => (
        <Avatar.Root className="ring ring-background" key={avatar.alt}>
          <Avatar.Image alt={avatar.alt} src={avatar.src} />
          <Avatar.Fallback>{avatar.fallback}</Avatar.Fallback>
          <Avatar.Placeholder>
            <UserIcon className="size-6" />
          </Avatar.Placeholder>
        </Avatar.Root>
      ))}
      <Avatar.Root>
        <Avatar.Placeholder className="animate-none text-muted-foreground">
          +3
        </Avatar.Placeholder>
      </Avatar.Root>
    </div>
  );
}
```


## API Reference

### Root

Contains all the parts of an avatar.

### Image

The image to render. By default it will only render when it has loaded.

### Fallback

An element that renders when the image hasn't loaded. This means whilst it's loading, or if there was an error.

### Placeholder

An element that renders when the image is loading.


# Badge (/docs/components/badge)

---
title: Badge
description: Displays a badge or a component that looks like a badge.
---

## Component Preview: badge-demo

```tsx
import { Badge } from "~/components/ui/badge";

export function BadgeDemo() {
  return <Badge>Badge</Badge>;
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

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

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: badge

```tsx
// File: index.ts

export * from "./badge";
export * from "./styles";


// File: badge.tsx

import type { VariantProps } from "cva";
import { BadgeStyles } from "./styles";

export interface BadgeProps
  extends React.ComponentProps<"span">,
    VariantProps<typeof BadgeStyles> {}

export function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <span
      className={BadgeStyles({ className, variant })}
      data-slot="badge"
      {...props}
    />
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const BadgeStyles = cva({
  base: "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border px-2 py-0.5 font-medium text-xs transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3",
  variants: {
    variant: {
      default:
        "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
      secondary:
        "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
      destructive:
        "border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
      outline:
        "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

```tsx
import { Badge } from "~/components/ui/badge";

<Badge variant="outline">Badge</Badge>
```

## Link

You can use the `BadgeStyles` helper to create a link that looks like a badge.

```tsx
import { BadgeStyles } from "~/components/ui/badge";

<Link className={BadgeStyles({ variant: "outline" })}>Badge</Link>
```

## Examples

### Secondary

## Component Preview: badge-secondary-demo

```tsx
import { Badge } from "~/components/ui/badge";

export function BadgeSecondaryDemo() {
  return <Badge variant="secondary">Badge</Badge>;
}
```


### Outline

## Component Preview: badge-outline-demo

```tsx
import { Badge } from "~/components/ui/badge";

export function BadgeOutlineDemo() {
  return <Badge variant="outline">Badge</Badge>;
}
```


### Destructive

## Component Preview: badge-destructive-demo

```tsx
import { Badge } from "~/components/ui/badge";

export function BadgeDestructiveDemo() {
  return <Badge variant="destructive">Badge</Badge>;
}
```


## API Reference

<PropsTable
  data={[
    {
      name: "variant",
      required: false,
      typeSimple: "enum",
      type: '"default" | "secondary" | "outline" | "danger"',
      default: '"default"',
      description: "The visual style of the badge.",
    },
  ]}
/>


# Breadcrumb (/docs/components/breadcrumb)

---
title: Breadcrumb
description: Breadcrumbs display a hierarchy of links to the current page or resource in an application.
links:
  docs: https://react-aria.adobe.com/Breadcrumbs
---

## Component Preview: breadcrumb-demo

```tsx
import { Breadcrumb } from "~/components/ui/breadcrumb";
import { Button } from "~/components/ui/button/button";
import { Link } from "~/components/ui/link/link";
import { Menu } from "~/components/ui/menu";
import { Popover } from "~/components/ui/popover";

export function BreadcrumbDemo() {
  return (
    <Breadcrumb.Root>
      <Breadcrumb.Item>
        <Link href="/">Home</Link>
      </Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item>
        <Menu.Root>
          <Button size="icon" variant="unstyled">
            <Breadcrumb.Ellipsis />
          </Button>

          <Popover.Content>
            <Menu.Content>
              <Menu.Item>Documentation</Menu.Item>
              <Menu.Item>Themes</Menu.Item>
              <Menu.Item>GitHub</Menu.Item>
            </Menu.Content>
          </Popover.Content>
        </Menu.Root>
      </Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item>
        <Link href="/docs/components">Components</Link>
      </Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item>
        <Link>Breadcrumb</Link>
      </Breadcrumb.Item>
    </Breadcrumb.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

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

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: breadcrumb

```tsx
// File: index.ts

export * from "./breadcrumb";
export * as Breadcrumb from "./namespace";
export * from "./styles";


// File: breadcrumb.tsx

"use client";

import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
import {
  Breadcrumb,
  Breadcrumbs,
  composeRenderProps,
} from "react-aria-components";
import { BreadcrumbStyles } from "./styles";

export interface BreadcrumbRootProps<T extends object>
  extends React.ComponentProps<typeof Breadcrumbs<T>> {}

export function BreadcrumbRoot<T extends object>({
  className,
  ...props
}: BreadcrumbRootProps<T>) {
  return (
    <Breadcrumbs
      className={BreadcrumbStyles.Root({ className })}
      data-slot="breadcrumb-root"
      {...props}
    />
  );
}

export interface BreadcrumbItemProps
  extends React.ComponentProps<typeof Breadcrumb> {}

export function BreadcrumbItem({ className, ...props }: BreadcrumbItemProps) {
  return (
    <Breadcrumb
      className={BreadcrumbStyles.Item({ className })}
      data-slot="breadcrumb-item"
      {...props}
    />
  );
}

export interface BreadcrumbSeparatorProps
  extends React.ComponentProps<typeof Breadcrumb> {}

export function BreadcrumbSeparator({
  children,
  className,
  ...props
}: BreadcrumbSeparatorProps) {
  return (
    <Breadcrumb
      className={composeRenderProps(className, (className) =>
        BreadcrumbStyles.Separator({ className })
      )}
      data-slot="breadcrumb-separator"
      {...props}
    >
      {children ?? <ChevronRightIcon />}
    </Breadcrumb>
  );
}

export interface BreadcrumbEllipsisProps extends React.ComponentProps<"span"> {}

export function BreadcrumbEllipsis({
  className,
  ...props
}: BreadcrumbEllipsisProps) {
  return (
    <span
      aria-hidden="true"
      className={BreadcrumbStyles.Ellipsis({ className })}
      data-slot="breadcrumb-ellipsis"
      role="presentation"
      {...props}
    >
      <MoreHorizontalIcon className="size-4" />
      <span className="sr-only">More</span>
    </span>
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const BreadcrumbStyles = {
  Ellipsis: cva({
    base: ["flex size-9 items-center justify-center"],
  }),
  Item: cva({
    base: ["inline-flex items-center gap-1.5"],
  }),
  Root: cva({
    base: [
      "flex flex-wrap items-center gap-1.5 break-words text-muted-foreground text-sm sm:gap-2.5",
    ],
  }),
  Separator: cva({
    base: ["[&>svg]:size-3.5"],
  }),
};


// File: namespace.ts

export {
  BreadcrumbEllipsis as Ellipsis,
  BreadcrumbItem as Item,
  BreadcrumbRoot as Root,
  BreadcrumbSeparator as Separator,
} from "./breadcrumb";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { Breadcrumb } from "~/components/ui/breadcrumb";
import { Link } from "~/components/ui/link";

<Breadcrumb.Root>
  <Breadcrumb.Item>
    <Link />
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item>
    <Breadcrumb.Ellipsis />
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item>
    <Link />
  </Breadcrumb.Item>
</Breadcrumb.Root>;
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import {
  BreadcrumbRoot,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
  BreadcrumbPage,
} from "~/components/ui/breadcrumb";
import { Link } from "~/components/ui/link";

<BreadcrumbRoot>
  <BreadcrumbItem>
    <Link />
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbEllipsis />
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <Link />
  </BreadcrumbItem>
</BreadcrumbRoot>;
```

</Tabs.Content>

</Tabs.Root>

## Examples

### Custom Separator

Use a custom component as `children` for `<BreadcrumbSeparator />{:tsx}` to create a custom separator.

## Component Preview: breadcrumb-custom-separator-demo

```tsx
import { SlashIcon } from "lucide-react";
import { Breadcrumb } from "~/components/ui/breadcrumb";
import { Link } from "~/components/ui/link";

export function BreadcrumbCustomSeparatorDemo() {
  return (
    <Breadcrumb.Root>
      <Breadcrumb.Item>
        <Link href="/">Home</Link>
      </Breadcrumb.Item>
      <Breadcrumb.Separator>
        <SlashIcon className="size-4" />
      </Breadcrumb.Separator>
      <Breadcrumb.Item>
        <Link href="/docs/components">Components</Link>
      </Breadcrumb.Item>
      <Breadcrumb.Separator>
        <SlashIcon className="size-4" />
      </Breadcrumb.Separator>
      <Breadcrumb.Item>
        <Link>Breadcrumb</Link>
      </Breadcrumb.Item>
    </Breadcrumb.Root>
  );
}
```


```tsx
import { Breadcrumb } from "~/components/ui/breadcrumb";
import { SlashIcon } from "lucide-react"; // [!code highlight]

<Breadcrumb.Root>
  {/* ... */}
  {/* [!code highlight:3] */}
  <Breadcrumb.Separator>
    <Icons.Slash className="size-4" />
  </Breadcrumb.Separator>
  {/* ... */}
</Breadcrumb.Root>;
```

### Dropdown

You can compose `<BreadcrumbItem />{:tsx}` with a `<Menu />{:tsx}` to create a dropdown in the breadcrumb.

## Component Preview: breadcrumb-dropdown-demo

```tsx
import { Breadcrumb } from "~/components/ui/breadcrumb";
import { RACButton } from "~/components/ui/button";
import { Link } from "~/components/ui/link";
import { LinkStyles } from "~/components/ui/link/styles";
import { Menu } from "~/components/ui/menu";
import { Popover } from "~/components/ui/popover";

export function BreadcrumbDropdownDemo() {
  return (
    <Breadcrumb.Root>
      <Breadcrumb.Item>
        <Link href="/docs">Docs</Link>
      </Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item>
        <Menu.Root>
          <RACButton className={LinkStyles({ variant: "default" })}>
            Components
          </RACButton>

          <Popover.Content>
            <Popover.Arrow />

            <Menu.Content>
              <Menu.Item>Documentation</Menu.Item>
              <Menu.Item>Themes</Menu.Item>
              <Menu.Item>GitHub</Menu.Item>
            </Menu.Content>
          </Popover.Content>
        </Menu.Root>
      </Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item>
        <Link>Breadcrumb</Link>
      </Breadcrumb.Item>
    </Breadcrumb.Root>
  );
}
```


```tsx
import { Button } from "react-aria-components"; // [!code highlight]
import { Breadcrumb } from "~/components/ui/breadcrumb"; // [!code highlight]
import { Menu } from "~/components/ui/menu"; // [!code highlight]
import { LinkStyles } from "~/components/ui/link"; // [!code highlight]
import { Popover } from "~/components/ui/popover"; // [!code highlight]

<Breadcrumb.Root>
  {/* ... */}
  <Breadcrumb.Item>
    <Menu.Root>
      <Button className={LinkStyles({ variant: "default" })}>Components</Button>

      <Popover.Content>
        <Popover.Arrow />

        <Menu.Content>
          <Menu.Item>Documentation</Menu.Item>
          <Menu.Item>Themes</Menu.Item>
          <Menu.Item>GitHub</Menu.Item>
        </Menu.Content>
      </Popover.Content>
    </Menu.Root>
  </Breadcrumb.Item>
  {/* ... */}
</Breadcrumb.Root>;
```

### Collapsed

There's a `<BreadcrumbEllipsis />{:tsx}` component to show a collapsed state when the breadcrumb is too long.

## Component Preview: breadcrumb-collapsed-demo

```tsx
import { Breadcrumb } from "~/components/ui/breadcrumb";
import { Link } from "~/components/ui/link";

export function BreadcrumbCollapsedDemo() {
  return (
    <Breadcrumb.Root>
      <Breadcrumb.Item>
        <Link href="/">Home</Link>
      </Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item>
        <Breadcrumb.Ellipsis className="size-4" />
      </Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item>
        <Link href="/docs/components">Components</Link>
      </Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Item>
        <Link>Breadcrumb</Link>
      </Breadcrumb.Item>
    </Breadcrumb.Root>
  );
}
```


```tsx
import { Breadcrumb } from "~/components/ui/breadcrumb"; // [!code highlight]

<Breadcrumb.Root>
  {/* ... */}
  <Breadcrumb.Item>
    {/* [!code highlight] */}
    <Breadcrumb.Ellipsis className="size-4" />
  </Breadcrumb.Item>
  {/* ... */}
</Breadcrumb.Root>;
```


# Button (/docs/components/button)

---
title: Button
description: Displays a button or a component that looks like a button.
links:
  docs: https://react-aria.adobe.com/Button
---

## Component Preview: button-demo

```tsx
import { Button } from "~/components/ui/button";

export function ButtonDemo() {
  return <Button>Button</Button>;
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

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

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: button

```tsx
// File: index.ts

export * from "./button";
export * from "./styles";


// File: button.tsx

"use client";

import type { VariantProps } from "cva";
import { composeRenderProps, Button as RACButton } from "react-aria-components";
import { ButtonStyles } from "./styles";

export interface ButtonProps
  extends React.ComponentProps<typeof RACButton>,
    VariantProps<typeof ButtonStyles> {}

export function Button({ className, variant, size, ...props }: ButtonProps) {
  return (
    <RACButton
      className={composeRenderProps(className, (className) =>
        ButtonStyles({ className, size, variant })
      )}
      data-slot="button"
      {...props}
    />
  );
}

export { RACButton };


// File: styles.ts

import { cva } from "~/lib/cva";

export const ButtonStyles = cva({
  base: [
    "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all",
    "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
    "disabled:cursor-not-allowed disabled:opacity-50",
    "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
    "[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
    "pressed:scale-95",
  ],

  variants: {
    variant: {
      default: "bg-primary text-primary-foreground hover:bg-primary/90",
      destructive:
        "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
      outline:
        "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
      ghost:
        "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
      link: "text-primary underline-offset-4 hover:underline",
      unstyled: null,
    },
    size: {
      default: "h-9 px-4 py-2 has-[>svg]:px-3",
      sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
      lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
      icon: "size-9",
      "icon-sm": "size-8",
      "icon-lg": "size-10",
    },
  },
  defaultVariants: {
    variant: "default",
    size: "default",
  },
});
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

```tsx
import { Button } from "~/components/ui/button";

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

## Examples

### Sizes

## Component Preview: button-sizes-demo

```tsx
import { ArrowUpRightIcon } from "lucide-react";

import { Button } from "~/components/ui/button/button";

export function ButtonSizesDemo() {
  return (
    <div className="flex flex-col items-start gap-8 sm:flex-row">
      <Button className="sr-only focus:not-sr-only">Skip to content</Button>
      <div className="flex items-start gap-2">
        <Button size="sm" variant="outline">
          Small
        </Button>
        <Button aria-label="Submit" size="icon-sm" variant="outline">
          <ArrowUpRightIcon />
        </Button>
      </div>
      <div className="flex items-start gap-2">
        <Button variant="outline">Default</Button>
        <Button aria-label="Submit" size="icon" variant="outline">
          <ArrowUpRightIcon />
        </Button>
      </div>
      <div className="flex items-start gap-2">
        <Button size="lg" variant="outline">
          Large
        </Button>
        <Button aria-label="Submit" size="icon-lg" variant="outline">
          <ArrowUpRightIcon />
        </Button>
      </div>
    </div>
  );
}
```


### Custom Variants

## Component Preview: button-variants-demo

```tsx
import { Button } from "~/components/ui/button/button";

export function ButtonVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2 md:flex-row">
      <Button>Default</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Danger</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}
```


### Icon

## Component Preview: button-icon-demo

```tsx
import { SearchIcon } from "lucide-react";

import { Button } from "~/components/ui/button/button";

export function ButtonIconDemo() {
  return (
    <Button aria-label="Search" size="icon">
      <SearchIcon />
    </Button>
  );
}
```


<Card.Root className="mt-6">
  <Card.Header className="flex items-center gap-2">
    <Card.Action className="grid place-content-center rounded-full bg-secondary/80 p-2">
      <AlertIcon variant="warning" className="text-amber-400" />
    </Card.Action>

    <Card.Title>Icon-only buttons need accessible labels.</Card.Title>

  </Card.Header>
  <Card.Content>
    <Card.Description>
      Choose your preferred approach:

      ```tsx
      // Option 1: aria-label (concise)
      // [!code word:aria-label="Search"]
      <Button size="icon" aria-label="Search">
        <SearchIcon />
      </Button>

      // Option 2: visually hidden text
      <Button size="icon">
        <SearchIcon />
        // [!code highlight]
        <span className="sr-only">Search</span>
      </Button>
      ```

      Both work identically. Use `aria-label` for brevity or `sr-only` for visibility in your code.
    </Card.Description>

  </Card.Content>
</Card.Root>

## API Reference

<PropsTable
  data={[
    {
      name: "variant",
      required: false,
      typeSimple: "enum",
      type: '"default" | "secondary" | "outline" | "danger" | "ghost" | "link" | "unset"',
      default: '"default"',
      description: "The visual style of the button.",
    },
    {
      name: "size",
      required: false,
      typeSimple: "enum",
      type: '"default" | "sm" | "lg" | "icon"',
      default: '"default"',
      description: "The size of the button.",
    },
    {
      name: "isDisabled",
      required: false,
      typeSimple: "boolean",
      description: "Whether the button is disabled.",
    },
    {
      name: "isPending",
      required: false,
      typeSimple: "boolean",
      description:
        "Whether the button is in a pending state. This disables press and hover events while retaining focusability, and announces the pending state to screen readers.",
    },
    {
      name: "type",
      required: false,
      typeSimple: "enum",
      type: '"button" | "reset" | "submit"',
      default: '"button"',
      description: "The behavior of the button when used in an HTML form.",
    },
  ]}
/>


# Calendar (/docs/components/calendar)

---
title: Calendar
description: A calendar displays one or more date grids and allows users to select a single date.
links:
  docs: https://react-aria.adobe.com/Calendar
---

## Component Preview: calendar-demo

```tsx
"use client";

import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
import { Button } from "~/components/ui/button/button";
import { Calendar } from "~/components/ui/calendar";

export function CalendarDemo() {
  return (
    <Calendar.Root variant="outline">
      <Calendar.Header>
        <Calendar.Nav>
          <Button
            className="size-8 text-muted-foreground sm:size-7"
            size="icon"
            slot="previous"
            variant="outline"
          >
            <ChevronLeftIcon className="size-4" />
          </Button>

          <Calendar.Month />

          <Button
            className="size-8 text-muted-foreground sm:size-7"
            size="icon"
            slot="next"
            variant="outline"
          >
            <ChevronRightIcon className="size-4" />
          </Button>
        </Calendar.Nav>
      </Calendar.Header>

      <Calendar.Grid weekdayStyle="short">
        <Calendar.GridHeader>
          {(weekDay) => <Calendar.HeaderCell>{weekDay}</Calendar.HeaderCell>}
        </Calendar.GridHeader>

        <Calendar.GridBody>
          {(date) => <Calendar.Cell date={date} shape="rounded" />}
        </Calendar.GridBody>
      </Calendar.Grid>
    </Calendar.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

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

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @internationalized/date
```

<Step>Copy and paste the following code into your project.</Step>

## Component Source: calendar

```tsx
// File: index.ts

export * from "./calendar";
export * as Calendar from "./namespace";
export * from "./styles";


// File: calendar.tsx

"use client";

import { getLocalTimeZone, isToday } from "@internationalized/date";
import type { VariantProps } from "cva";
import {
  Calendar,
  composeRenderProps,
  type DateValue,
  Heading,
  CalendarCell as RACCalendarCell,
  CalendarGrid as RACCalendarGrid,
  CalendarGridBody as RACCalendarGridBody,
  CalendarGridHeader as RACCalendarGridHeader,
  CalendarHeaderCell as RACCalendarHeaderCell,
  RangeCalendar,
} from "react-aria-components";
import { CalendarStyles } from "./styles";

export interface CalendarRootProps<T extends DateValue>
  extends React.ComponentProps<typeof Calendar<T>>,
    VariantProps<typeof CalendarStyles.Root> {}

export function CalendarRoot<T extends DateValue>({
  className,
  variant,
  ...props
}: CalendarRootProps<T>) {
  return (
    <Calendar
      className={composeRenderProps(className, (className) =>
        CalendarStyles.Root({
          className,
          variant,
        })
      )}
      data-slot="calendar-root"
      {...props}
    />
  );
}

export interface RangeCalendarRootProps<T extends DateValue>
  extends React.ComponentProps<typeof RangeCalendar<T>>,
    VariantProps<typeof CalendarStyles.Root> {}

export function RangeCalendarRoot<T extends DateValue>({
  className,
  variant,
  ...props
}: RangeCalendarRootProps<T>) {
  return (
    <RangeCalendar
      className={composeRenderProps(className, (className) =>
        CalendarStyles.Root({
          className,
          variant,
        })
      )}
      data-slot="range-calendar-root"
      {...props}
    />
  );
}

export interface CalendarHeaderProps extends React.ComponentProps<"header"> {}

export function CalendarHeader({ className, ...props }: CalendarHeaderProps) {
  return (
    <header
      className={CalendarStyles.Header({ className })}
      data-slot="calendar-header"
      {...props}
    />
  );
}

export interface CalendarMonthProps
  extends React.ComponentProps<typeof Heading> {}

export function CalendarMonth({ className, ...props }: CalendarMonthProps) {
  return (
    <Heading
      {...props}
      className={CalendarStyles.Heading({ className })}
      data-slot="calendar-month"
    />
  );
}

export interface CalendarNavProps extends React.ComponentProps<"nav"> {}

export function CalendarNav({ className, ...props }: CalendarNavProps) {
  return (
    <nav
      {...props}
      className={CalendarStyles.Nav({ className })}
      data-slot="calendar-nav"
    />
  );
}

export interface CalendarGridProps
  extends React.ComponentProps<typeof RACCalendarGrid> {}
export function CalendarGrid({ className, ...props }: CalendarGridProps) {
  return (
    <RACCalendarGrid
      {...props}
      className={CalendarStyles.Grid({ className })}
      data-slot="calendar-grid"
    />
  );
}

export interface CalendarGridHeaderProps
  extends React.ComponentProps<typeof RACCalendarGridHeader> {}
export function CalendarGridHeader(props: CalendarGridHeaderProps) {
  return <RACCalendarGridHeader {...props} data-slot="calendar-grid-header" />;
}

export interface CalendarHeaderCellProps
  extends React.ComponentProps<typeof RACCalendarHeaderCell> {}

export function CalendarHeaderCell({
  className,
  ...props
}: CalendarHeaderCellProps) {
  return (
    <RACCalendarHeaderCell
      {...props}
      className={CalendarStyles.HeaderCell({ className })}
      data-slot="calendar-header-cell"
    />
  );
}

export interface CalendarGridBodyProps
  extends React.ComponentProps<typeof RACCalendarGridBody> {}
export function CalendarGridBody(props: CalendarGridBodyProps) {
  return <RACCalendarGridBody {...props} data-slot="calendar-grid-body" />;
}

export interface CalendarCellProps
  extends React.ComponentProps<typeof RACCalendarCell>,
    Omit<VariantProps<(typeof CalendarStyles)["Cell"]>, "isToday"> {}

export function CalendarCell({
  className,
  shape,
  ...props
}: CalendarCellProps) {
  return (
    <RACCalendarCell
      {...props}
      className={composeRenderProps(className, (className, values) =>
        CalendarStyles.Cell({
          className,
          isToday: isToday(values.date, getLocalTimeZone()),
          shape,
        })
      )}
      data-shape={shape}
      data-slot="calendar-cell"
    />
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const CalendarStyles = {
  Cell: cva({
    base: [
      "relative grid size-8 select-none place-content-center whitespace-nowrap text-accent-foreground text-sm outline-hidden transition",
      "hover:bg-accent hover:text-accent-foreground",
      "disabled:cursor-not-allowed disabled:opacity-50",
      "aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
      "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",

      "selected:bg-primary selected:text-primary-foreground",
      "group-data-[slot=range-calendar-root]:selected:bg-accent group-data-[slot=range-calendar-root]:selected:text-accent-foreground",
      "group-data-[slot=range-calendar-root]:selection-start:bg-primary group-data-[slot=range-calendar-root]:selection-start:text-primary-foreground",
      "group-data-[slot=range-calendar-root]:selection-end:bg-primary group-data-[slot=range-calendar-root]:selection-end:text-primary-foreground",
    ],
    defaultVariants: {
      shape: "default",
    },
    variants: {
      isToday: {
        true: [
          "after:absolute after:start-1/2 after:bottom-1 after:z-10 after:-translate-x-1/2",
          "after:size-[3px] after:rounded-full after:bg-current",
        ],
      },
      shape: {
        default: [
          "rounded-md group-data-[slot=range-calendar-root]:not-selection-start:not-selection-end:selected:rounded-none",
        ],
        rounded: "rounded-full",
      },
    },
  }),
  Grid: cva({
    base: [
      "w-full",
      "[&_tr]:mt-2 [&_tr]:flex [&_tr]:w-full [&_tr]:justify-between",

      "[&_tr_td[aria-selected=true]]:bg-accent",
      "[&_tr_td[aria-selected=true]:has([data-selection-start])]:rounded-l-md",
      "[&_tr_td[aria-selected=true]:has([data-selection-end])]:rounded-r-md",
      "group-data-[slot=calendar-root]:[&_tr_td[aria-selected=true]]:rounded-md",

      "[&_tr_td[aria-selected=true]:has([data-selection-start][data-shape=rounded])]:rounded-l-full",
      "[&_tr_td[aria-selected=true]:has([data-selection-end][data-shape=rounded])]:rounded-r-full",
      "group-data-[slot=calendar-root]:[&_tr_td:has([data-shape=rounded])[aria-selected=true]]:rounded-full",
    ],
  }),
  Header: cva({
    base: ["flex w-full justify-center gap-1 px-1 pb-5 sm:pb-4"],
  }),
  HeaderCell: cva({
    base: ["w-8 rounded-md font-normal text-[0.8rem] text-muted-foreground"],
  }),
  Heading: cva({
    base: ["font-medium text-sm"],
  }),
  Nav: cva({
    base: ["flex w-full items-center justify-between gap-1"],
  }),
  Root: cva({
    base: ["group"],
    variants: {
      variant: {
        outline: "rounded-md border p-3 shadow-sm",
      },
    },
  }),
};


// File: namespace.ts

export {
  CalendarCell as Cell,
  CalendarGrid as Grid,
  CalendarGridBody as GridBody,
  CalendarGridHeader as GridHeader,
  CalendarHeader as Header,
  CalendarHeaderCell as HeaderCell,
  CalendarMonth as Month,
  CalendarNav as Nav,
  CalendarRoot as Root,
  RangeCalendarRoot as Range,
} from "./calendar";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { Button } from "~/components/ui/button";
import { Calendar } from "~/components/ui/calendar";

<Calendar.Root>
  <Calendar.Header>
    <Calendar.Nav>
      <Button slot="previous"></Button>
      <Calendar.Month />
      <Button slot="next"></Button>
    </Calendar.Nav>
  </Calendar.Header>

  <Calendar.Grid>
    <Calendar.GridHeader>
      {(weekDay) => <Calendar.HeaderCell>{weekDay}</Calendar.HeaderCell>}
    </Calendar.GridHeader>
    <Calendar.GridBody>
      {(date) => <Calendar.Cell date={date} />}
    </Calendar.GridBody>
  </Calendar.Grid>
</Calendar.Root>;
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import { Button } from "~/components/ui/button";
import {
  CalendarCell,
  CalendarGrid,
  CalendarGridBody,
  CalendarGridHeader,
  CalendarHeader,
  CalendarHeaderCell,
  CalendarMonth,
  CalendarNav,
  CalendarRoot,
} from "~/components/ui/calendar";

<CalendarRoot>
  <CalendarHeader>
    <CalendarNav>
      <Button slot="previous"></Button>
      <CalendarMonth />
      <Button slot="next"></Button>
    </CalendarNav>
  </CalendarHeader>

  <CalendarGrid>
    <CalendarGridHeader>
      {(weekDay) => <CalendarHeaderCell>{weekDay}</CalendarHeaderCell>}
    </CalendarGridHeader>
    <CalendarGridBody>
      {(date) => <CalendarCell date={date} />}
    </CalendarGridBody>
  </CalendarGrid>
</CalendarRoot>;
```

</Tabs.Content>

</Tabs.Root>

## Examples

### Range

## Component Preview: calendar-range-demo

```tsx
"use client";

import { getLocalTimeZone, today } from "@internationalized/date";
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
import { Button } from "~/components/ui/button/button";
import { Calendar } from "~/components/ui/calendar";

export function CalendarRangeDemo() {
  return (
    <Calendar.Range
      isDateUnavailable={(date) => date.compare(today(getLocalTimeZone())) > 0}
      variant="outline"
      visibleDuration={{ months: 2 }}
    >
      <Calendar.Header>
        <Calendar.Nav>
          <Button
            className="size-8 text-muted-foreground sm:size-7"
            size="icon"
            slot="previous"
            variant="outline"
          >
            <ChevronLeftIcon className="size-4" />
          </Button>

          <Calendar.Month />

          <Button
            className="size-8 text-muted-foreground sm:size-7"
            size="icon"
            slot="next"
            variant="outline"
          >
            <ChevronRightIcon className="size-4" />
          </Button>
        </Calendar.Nav>
      </Calendar.Header>

      <div className="flex gap-2">
        <Calendar.Grid weekdayStyle="short">
          <Calendar.GridHeader>
            {(weekDay) => <Calendar.HeaderCell>{weekDay}</Calendar.HeaderCell>}
          </Calendar.GridHeader>

          <Calendar.GridBody>
            {(date) => <Calendar.Cell date={date} />}
          </Calendar.GridBody>
        </Calendar.Grid>

        <Calendar.Grid offset={{ months: 1 }} weekdayStyle="short">
          <Calendar.GridHeader>
            {(weekDay) => <Calendar.HeaderCell>{weekDay}</Calendar.HeaderCell>}
          </Calendar.GridHeader>

          <Calendar.GridBody>
            {(date) => <Calendar.Cell date={date} />}
          </Calendar.GridBody>
        </Calendar.Grid>
      </div>
    </Calendar.Range>
  );
}
```



# Card (/docs/components/card)

---
title: Card
description: Displays a card with header, content, and footer.
links:
  docs: https://ui.shadcn.com/docs/components/card
---

## Component Preview: card-demo

```tsx
import { Button } from "~/components/ui/button/button";
import { Card } from "~/components/ui/card";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label/label";

export function CardDemo() {
  return (
    <Card.Root className="w-full max-w-sm">
      <Card.Header>
        <Card.Title>Login to your account</Card.Title>
        <Card.Description>
          Enter your email below to login to your account
        </Card.Description>
        <Card.Action>
          <Button variant="link">Sign Up</Button>
        </Card.Action>
      </Card.Header>
      <Card.Content>
        <form>
          <div className="flex flex-col gap-6">
            <div className="grid gap-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                placeholder="m@example.com"
                required
                type="email"
              />
            </div>
            <div className="grid gap-2">
              <div className="flex items-center">
                <Label htmlFor="password">Password</Label>
                <a
                  className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
                  href="/reset-password"
                >
                  Forgot your password?
                </a>
              </div>
              <Input id="password" required type="password" />
            </div>
          </div>
        </form>
      </Card.Content>
      <Card.Footer className="flex-col gap-2">
        <Button className="w-full" type="submit">
          Login
        </Button>
        <Button className="w-full" variant="outline">
          Login with Google
        </Button>
      </Card.Footer>
    </Card.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

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

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: card

```tsx
// File: index.ts

export * from "./card";
export * as Card from "./namespace";
export * from "./styles";


// File: card.tsx

import { CardStyles } from "./styles";

export interface CardRootProps extends React.ComponentProps<"div"> {}

export function CardRoot({ className, ...props }: CardRootProps) {
  return (
    <div
      className={CardStyles.Root({ className })}
      data-slot="card-root"
      {...props}
    />
  );
}

export interface CardHeaderProps extends React.ComponentProps<"div"> {}

export function CardHeader({ className, ...props }: CardHeaderProps) {
  return (
    <div
      className={CardStyles.Header({ className })}
      data-slot="card-header"
      {...props}
    />
  );
}

export interface CardTitleProps extends React.ComponentProps<"div"> {}

export function CardTitle({ className, ...props }: CardTitleProps) {
  return (
    <div
      className={CardStyles.Title({ className })}
      data-slot="card-title"
      {...props}
    />
  );
}

export interface CardDescriptionProps extends React.ComponentProps<"div"> {}

export function CardDescription({ className, ...props }: CardDescriptionProps) {
  return (
    <div
      className={CardStyles.Description({ className })}
      data-slot="card-description"
      {...props}
    />
  );
}

export interface CardActionProps extends React.ComponentProps<"div"> {}

export function CardAction({ className, ...props }: CardActionProps) {
  return (
    <div
      className={CardStyles.Action({ className })}
      data-slot="card-action"
      {...props}
    />
  );
}

export interface CardContentProps extends React.ComponentProps<"div"> {}

export function CardContent({ className, ...props }: CardContentProps) {
  return (
    <div
      className={CardStyles.Content({ className })}
      data-slot="card-content"
      {...props}
    />
  );
}

export interface CardFooterProps extends React.ComponentProps<"div"> {}

export function CardFooter({ className, ...props }: CardFooterProps) {
  return (
    <div
      className={CardStyles.Footer({ className })}
      data-slot="card-footer"
      {...props}
    />
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const CardStyles = {
  Action: cva({
    base: ["col-start-2 row-span-2 row-start-1 self-start justify-self-end"],
  }),
  Content: cva({
    base: ["px-6"],
  }),
  Description: cva({
    base: ["text-muted-foreground text-sm"],
  }),
  Footer: cva({
    base: ["flex items-center px-6 [.border-t]:pt-6"],
  }),
  Header: cva({
    base: [
      "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
    ],
  }),
  Root: cva({
    base: [
      "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
    ],
  }),
  Title: cva({
    base: ["font-semibold leading-none"],
  }),
};


// File: namespace.ts

export {
  CardAction as Action,
  CardContent as Content,
  CardDescription as Description,
  CardFooter as Footer,
  CardHeader as Header,
  CardRoot as Root,
  CardTitle as Title,
} from "./card";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { Card } from "~/components/ui/card";

<Card.Root>
  <Card.Header>
    <Card.Title>Card Title</Card.Title>
    <Card.Description>Card Description</Card.Description>
    <Card.Action>Card Action</Card.Action>
  </Card.Header>
  <Card.Content>
    <p>Card Content</p>
  </Card.Content>
  <Card.Footer>
    <p>Card Footer</p>
  </Card.Footer>
</Card.Root>
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import {
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardRoot,
  CardTitle,
} from "~/components/ui/card";

<CardRoot>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
    <CardAction>Card Action</CardAction>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</CardRoot>
```

</Tabs.Content>

</Tabs.Root>

## Examples

## Component Preview: card-demo

```tsx
import { Button } from "~/components/ui/button/button";
import { Card } from "~/components/ui/card";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label/label";

export function CardDemo() {
  return (
    <Card.Root className="w-full max-w-sm">
      <Card.Header>
        <Card.Title>Login to your account</Card.Title>
        <Card.Description>
          Enter your email below to login to your account
        </Card.Description>
        <Card.Action>
          <Button variant="link">Sign Up</Button>
        </Card.Action>
      </Card.Header>
      <Card.Content>
        <form>
          <div className="flex flex-col gap-6">
            <div className="grid gap-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                placeholder="m@example.com"
                required
                type="email"
              />
            </div>
            <div className="grid gap-2">
              <div className="flex items-center">
                <Label htmlFor="password">Password</Label>
                <a
                  className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
                  href="/reset-password"
                >
                  Forgot your password?
                </a>
              </div>
              <Input id="password" required type="password" />
            </div>
          </div>
        </form>
      </Card.Content>
      <Card.Footer className="flex-col gap-2">
        <Button className="w-full" type="submit">
          Login
        </Button>
        <Button className="w-full" variant="outline">
          Login with Google
        </Button>
      </Card.Footer>
    </Card.Root>
  );
}
```



# Carousel (/docs/components/carousel)

---
title: Carousel
description: A carousel with motion and swipe built using Embla.
links:
  docs: https://www.embla-carousel.com/get-started/react
  api: https://www.embla-carousel.com/api
---

## Component Preview: carousel-demo

```tsx
import { Card } from "~/components/ui/card";
import { Carousel } from "~/components/ui/carousel";

export function CarouselDemo() {
  return (
    <Carousel.Root className="w-full max-w-xs">
      <Carousel.Content>
        {Array.from({ length: 5 }).map((_, index) => (
          // biome-ignore lint/suspicious/noArrayIndexKey: This is fine
          <Carousel.Item key={index}>
            <div className="p-1">
              <Card.Root>
                <Card.Content className="flex aspect-square items-center justify-center p-6">
                  <span className="font-semibold text-4xl">{index + 1}</span>
                </Card.Content>
              </Card.Root>
            </div>
          </Carousel.Item>
        ))}
      </Carousel.Content>
      <Carousel.Previous />
      <Carousel.Next />
    </Carousel.Root>
  );
}
```


## About

The carousel component is built using the [Embla Carousel](https://www.embla-carousel.com/) library.

## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

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

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Install the following dependencies:</Step>

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

<Step>Copy and paste the following code into your project.</Step>

## Component Source: carousel

```tsx
// File: index.ts

export * from "./carousel";
export * as Carousel from "./namespace";


// File: carousel.tsx

"use client";

import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from "embla-carousel-react";
import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";

import { createContext, use, useCallback, useEffect, useState } from "react";
import { cn } from "~/lib/cva";
import { Button, type ButtonProps } from "~/components/ui/button/button";

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

export interface CarouselProps extends React.ComponentProps<"div"> {
  opts?: CarouselOptions;
  plugins?: CarouselPlugin;
  orientation?: "horizontal" | "vertical";
  setApi?: (api: CarouselApi) => void;
}

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

const CarouselContext = createContext<CarouselContextProps | null>(null);

function useCarousel() {
  const context = use(CarouselContext);

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

  return context;
}

export function CarouselRoot({
  orientation = "horizontal",
  opts,
  setApi,
  plugins,
  className,
  children,
  ...props
}: CarouselProps) {
  const [carouselRef, api] = useEmblaCarousel(
    {
      ...opts,
      axis: orientation === "horizontal" ? "x" : "y",
    },
    plugins
  );
  const [canScrollPrev, setCanScrollPrev] = useState(false);
  const [canScrollNext, setCanScrollNext] = useState(false);

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

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

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

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

  useEffect(() => {
    if (!(api && setApi)) {
      return;
    }
    setApi(api);
  }, [api, setApi]);

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

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

  return (
    <CarouselContext.Provider
      value={{
        api,
        canScrollNext,
        canScrollPrev,
        carouselRef,
        opts,
        orientation:
          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
        scrollNext,
        scrollPrev,
      }}
    >
      {/** biome-ignore lint/a11y/useAriaPropsSupportedByRole: The role is correct. */}
      <section
        aria-roledescription="carousel"
        className={cn("relative", className)}
        data-slot="carousel"
        onKeyDownCapture={handleKeyDown}
        {...props}
      >
        {children}
      </section>
    </CarouselContext.Provider>
  );
}

export interface CarouselContentProps extends React.ComponentProps<"div"> {}

export function CarouselContent({ className, ...props }: CarouselContentProps) {
  const { carouselRef, orientation } = useCarousel();

  return (
    <div
      className="overflow-hidden"
      data-slot="carousel-content"
      ref={carouselRef}
    >
      <div
        className={cn(
          "flex",
          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
          className
        )}
        {...props}
      />
    </div>
  );
}

export interface CarouselItemProps extends React.ComponentProps<"div"> {}

export function CarouselItem({ className, ...props }: CarouselItemProps) {
  const { orientation } = useCarousel();

  return (
    <div
      aria-roledescription="slide"
      className={cn(
        "min-w-0 shrink-0 grow-0 basis-full",
        orientation === "horizontal" ? "pl-4" : "pt-4",
        className
      )}
      data-slot="carousel-item"
      role="group"
      {...props}
    />
  );
}

export interface CarouselPreviousProps extends ButtonProps {}

export function CarouselPrevious({
  className,
  variant = "outline",
  size = "icon",
  ...props
}: CarouselPreviousProps) {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel();

  return (
    <Button
      className={cn(
        "absolute size-8 rounded-full",
        orientation === "horizontal"
          ? "top-1/2 -left-12 -translate-y-1/2"
          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      data-slot="carousel-previous"
      isDisabled={!canScrollPrev}
      onClick={scrollPrev}
      size={size}
      variant={variant}
      {...props}
    >
      <ArrowLeftIcon />
      <span className="sr-only">Previous slide</span>
    </Button>
  );
}

export interface CarouselNextProps extends ButtonProps {}

export function CarouselNext({
  className,
  variant = "outline",
  size = "icon",
  ...props
}: CarouselNextProps) {
  const { orientation, scrollNext, canScrollNext } = useCarousel();

  return (
    <Button
      className={cn(
        "absolute size-8 rounded-full",
        orientation === "horizontal"
          ? "top-1/2 -right-12 -translate-y-1/2"
          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      data-slot="carousel-next"
      isDisabled={!canScrollNext}
      onClick={scrollNext}
      size={size}
      variant={variant}
      {...props}
    >
      <ArrowRightIcon />
      <span className="sr-only">Next slide</span>
    </Button>
  );
}


// File: namespace.ts

export {
  CarouselContent as Content,
  CarouselItem as Item,
  CarouselNext as Next,
  CarouselPrevious as Previous,
  CarouselRoot as Root,
} from "./carousel";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

```tsx
import { Carousel } from "~/components/ui/carousel";

<Carousel.Root>
  <Carousel.Content>
    <Carousel.Item>...</Carousel.Item>
    <Carousel.Item>...</Carousel.Item>
    <Carousel.Item>...</Carousel.Item>
  </Carousel.Content>
  <Carousel.Previous />
  <Carousel.Next />
</Carousel.Root>;
```

## Examples

### Sizes

To set the size of the items, you can use the `basis{:tsx}` utility class on the `<Carousel.Item>{:tsx}`.

## Component Preview: carousel-size-demo

```tsx
import { Card } from "~/components/ui/card";
import { Carousel } from "~/components/ui/carousel";

export function CarouselSizeDemo() {
  return (
    <Carousel.Root
      className="w-full max-w-sm"
      opts={{
        align: "start",
      }}
    >
      <Carousel.Content>
        {Array.from({ length: 5 }).map((_, index) => (
          // biome-ignore lint/suspicious/noArrayIndexKey: This is fine
          <Carousel.Item className="md:basis-1/2 lg:basis-1/3" key={index}>
            <div className="p-1">
              <Card.Root>
                <Card.Content className="flex aspect-square items-center justify-center p-6">
                  <span className="font-semibold text-3xl">{index + 1}</span>
                </Card.Content>
              </Card.Root>
            </div>
          </Carousel.Item>
        ))}
      </Carousel.Content>
      <Carousel.Previous />
      <Carousel.Next />
    </Carousel.Root>
  );
}
```


```tsx
// [!code word:basis-1/3]
// 33% of the carousel width.
<Carousel.Root>
  <Carousel.Content>
    <Carousel.Item className="basis-1/3">...</Carousel.Item>
    <Carousel.Item className="basis-1/3">...</Carousel.Item>
    <Carousel.Item className="basis-1/3">...</Carousel.Item>
  </Carousel.Content>
</Carousel.Root>
```

```tsx
// [!code word:md\:basis-1/2]
// [!code word:lg\:basis-1/3]
// 50% on small screens and 33% on larger screens.
<Carousel.Root>
  <Carousel.Content>
    <Carousel.Item className="md:basis-1/2 lg:basis-1/3">...</Carousel.Item>
    <Carousel.Item className="md:basis-1/2 lg:basis-1/3">...</Carousel.Item>
    <Carousel.Item className="md:basis-1/2 lg:basis-1/3">...</Carousel.Item>
  </Carousel.Content>
</Carousel.Root>
```

### Spacing

To set the spacing between the items, we use a `pl-[VALUE]{:tsx}` utility on the `<Carousel.Item>{:tsx}` and a negative `-ml-[VALUE]{:tsx}` on the `<Carousel.Content>{:tsx}`.

<Alert.Root>
  <AlertIcon variant="info" />
  <Alert.Description>
    **Why:** I tried to use the `gap{:tsx}` property or a `grid{:tsx}` layout on the `<Carousel.Content>{:tsx}` but it required a lot of math and mental effort to get the spacing right. I found `pl-[VALUE]{:tsx}` and `-ml-[VALUE]{:tsx}` utilities much easier to use.

    You can always adjust this in your own project if you need to.

  </Alert.Description>
</Alert.Root>

## Component Preview: carousel-spacing-demo

```tsx
import { Card } from "~/components/ui/card";
import { Carousel } from "~/components/ui/carousel";

export function CarouselSpacingDemo() {
  return (
    <Carousel.Root className="w-full max-w-sm">
      <Carousel.Content className="-ml-1">
        {Array.from({ length: 5 }).map((_, index) => (
          // biome-ignore lint/suspicious/noArrayIndexKey: This is fine
          <Carousel.Item className="pl-1 md:basis-1/2 lg:basis-1/3" key={index}>
            <div className="p-1">
              <Card.Root>
                <Card.Content className="flex aspect-square items-center justify-center p-6">
                  <span className="font-semibold text-2xl">{index + 1}</span>
                </Card.Content>
              </Card.Root>
            </div>
          </Carousel.Item>
        ))}
      </Carousel.Content>
      <Carousel.Previous />
      <Carousel.Next />
    </Carousel.Root>
  );
}
```


```tsx
// [!code word:-ml-4]
// [!code word:pl-4]
<Carousel.Root>
  <Carousel.Content className="-ml-4">
    <Carousel.Item className="pl-4">...</Carousel.Item>
    <Carousel.Item className="pl-4">...</Carousel.Item>
    <Carousel.Item className="pl-4">...</Carousel.Item>
  </Carousel.Content>
</Carousel.Root>
```

```tsx
// [!code word:-ml-2]
// [!code word:md\:-ml-4]
// [!code word:pl-2]
// [!code word:md\:pl-4]
<Carousel.Root>
  <Carousel.Content className="-ml-2 md:-ml-4">
    <Carousel.Item className="pl-2 md:pl-4">...</Carousel.Item>
    <Carousel.Item className="pl-2 md:pl-4">...</Carousel.Item>
    <Carousel.Item className="pl-2 md:pl-4">...</Carousel.Item>
  </Carousel.Content>
</Carousel.Root>
```

### Orientation

Use the `orientation{:tsx}` prop to set the orientation of the carousel.

## Component Preview: carousel-orientation-demo

```tsx
import { Card } from "~/components/ui/card";
import { Carousel } from "~/components/ui/carousel";

export function CarouselOrientationDemo() {
  return (
    <Carousel.Root
      className="w-full max-w-xs"
      opts={{
        align: "start",
      }}
      orientation="vertical"
    >
      <Carousel.Content className="-mt-1 h-50">
        {Array.from({ length: 5 }).map((_, index) => (
          // biome-ignore lint/suspicious/noArrayIndexKey: This is fine
          <Carousel.Item className="pt-1 md:basis-1/2" key={index}>
            <div className="p-1">
              <Card.Root>
                <Card.Content className="flex items-center justify-center p-6">
                  <span className="font-semibold text-3xl">{index + 1}</span>
                </Card.Content>
              </Card.Root>
            </div>
          </Carousel.Item>
        ))}
      </Carousel.Content>
      <Carousel.Previous />
      <Carousel.Next />
    </Carousel.Root>
  );
}
```


```tsx
// [!code word:orientation]
<Carousel.Root orientation="vertical | horizontal">
  <Carousel.Content>
    <Carousel.Item>...</Carousel.Item>
    <Carousel.Item>...</Carousel.Item>
    <Carousel.Item>...</Carousel.Item>
  </Carousel.Content>
</Carousel.Root>
```

## Options

You can pass options to the carousel using the `opts{:tsx}` prop. See the [Embla Carousel docs](https://www.embla-carousel.com/api/options/) for more information.

```tsx
<Carousel.Root
  // [!code highlight:4]
  opts={{
    align: "start",
    loop: true,
  }}
>
  <Carousel.Content>
    <Carousel.Item>...</Carousel.Item>
    <Carousel.Item>...</Carousel.Item>
    <Carousel.Item>...</Carousel.Item>
  </Carousel.Content>
</Carousel.Root>
```

## API

Use a state and the `setApi{:tsx}` prop to get an instance of the carousel API.

## Component Preview: carousel-api-demo

```tsx
"use client";

import { useEffect, useState } from "react";
import { Card } from "~/components/ui/card";
import { Carousel, type CarouselApi } from "~/components/ui/carousel";

export function CarouselApiDemo() {
  const [api, setApi] = useState<CarouselApi>();
  const [current, setCurrent] = useState(0);
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (!api) {
      return;
    }

    setCount(api.scrollSnapList().length);
    setCurrent(api.selectedScrollSnap() + 1);

    api.on("select", () => {
      setCurrent(api.selectedScrollSnap() + 1);
    });
  }, [api]);

  return (
    <div className="space-y-2">
      <Carousel.Root className="w-full max-w-sm" setApi={setApi}>
        <Carousel.Content>
          {Array.from({ length: 5 }).map((_, index) => (
            // biome-ignore lint/suspicious/noArrayIndexKey: This is fine
            <Carousel.Item key={index}>
              <div className="p-1">
                <Card.Root>
                  <Card.Content className="flex aspect-square items-center justify-center p-6">
                    <span className="font-semibold text-3xl">{index + 1}</span>
                  </Card.Content>
                </Card.Root>
              </div>
            </Carousel.Item>
          ))}
        </Carousel.Content>
        <Carousel.Previous />
        <Carousel.Next />
      </Carousel.Root>
      <div className="py-2 text-center text-muted-foreground text-sm">
        Slide {current} of {count}
      </div>
    </div>
  );
}
```


```tsx
import { useEffect, useState } from "react";
import { Carousel, type CarouselApi } from "~/registry/ui/carousel"; // [!code highlight]

export function Example() {
  const [api, setApi] = useState<CarouselApi>(); // [!code highlight]
  const [current, setCurrent] = useState(0);
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (!api) {
      return;
    }

    setCount(api.scrollSnapList().length);
    setCurrent(api.selectedScrollSnap() + 1);

    api.on("select", () => {
      setCurrent(api.selectedScrollSnap() + 1);
    });
  }, [api]);

  return (
    // [!code highlight]
    <Carousel.Root setApi={setApi}>
      <Carousel.Content>
        <Carousel.Item>...</Carousel.Item>
        <Carousel.Item>...</Carousel.Item>
        <Carousel.Item>...</Carousel.Item>
      </Carousel.Content>
    </Carousel.Root>
  );
}
```

## Events

You can listen to events using the api instance from `setApi{:tsx}`.

```tsx
import type { CarouselApi } from "~/components/ui/carousel"; // [!code highlight]

export function Example() {
  // [!code highlight:11]
  const [api, setApi] = useState<CarouselApi>();

  useEffect(() => {
    if (!api) {
      return;
    }

    api.on("select", () => {
      // Do something on select.
    });
  }, [api]);

  return (
    // [!code highlight]
    <Carousel.Root setApi={setApi}>
      <Carousel.Content>
        <Carousel.Item>...</Carousel.Item>
        <Carousel.Item>...</Carousel.Item>
        <Carousel.Item>...</Carousel.Item>
      </Carousel.Content>
    </Carousel.Root>
  );
}
```

See the [Embla Carousel docs](https://www.embla-carousel.com/api/events/) for more information on using events.

## Plugins

You can use the `plugins{:tsx}` prop to add plugins to the carousel.

```tsx
import Autoplay from "embla-carousel-autoplay"; // [!code highlight]

export function Example() {
  return (
    <Carousel.Root
      // [!code highlight:5]
      plugins={[
        Autoplay({
          delay: 2000,
        }),
      ]}
    >
      // ...
    </Carousel.Root>
  );
}
```

## Component Preview: carousel-plugin-demo

```tsx
"use client";

import Autoplay from "embla-carousel-autoplay";
import { useRef } from "react";
import { Card } from "~/components/ui/card";
import { Carousel } from "~/components/ui/carousel";

export function CarouselPluginDemo() {
  const plugin = useRef(Autoplay({ delay: 2000 }));

  return (
    <Carousel.Root
      className="w-full max-w-xs"
      onMouseEnter={plugin.current.stop}
      onMouseLeave={plugin.current.reset}
      opts={{
        loop: true,
      }}
      plugins={[plugin.current]}
    >
      <Carousel.Content>
        {Array.from({ length: 5 }).map((_, index) => (
          // biome-ignore lint/suspicious/noArrayIndexKey: This is fine
          <Carousel.Item key={index}>
            <div className="p-1">
              <Card.Root>
                <Card.Content className="flex aspect-square items-center justify-center p-6">
                  <span className="font-semibold text-4xl">{index + 1}</span>
                </Card.Content>
              </Card.Root>
            </div>
          </Carousel.Item>
        ))}
      </Carousel.Content>
      <Carousel.Previous />
      <Carousel.Next />
    </Carousel.Root>
  );
}
```


See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.


# Checkbox (/docs/components/checkbox)

---
title: Checkbox
description: A control that allows the user to toggle between checked and not checked.
links:
  docs: https://react-aria.adobe.com/Checkbox
---

## Component Preview: checkbox-demo

```tsx
import { Checkbox } from "~/components/ui/checkbox";

export function CheckboxDemo() {
  return (
    <Checkbox.Provider>
      <Checkbox.Root>
        <Checkbox.Indicator />
      </Checkbox.Root>
      Accept terms and conditions
    </Checkbox.Provider>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/checkbox
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: checkbox

```tsx
// File: index.ts

export * from "./checkbox";
export * as Checkbox from "./namespace";
export * from "./styles";


// File: checkbox.tsx

"use client";

import { CheckIcon, MinusIcon } from "lucide-react";
import { Checkbox, composeRenderProps } from "react-aria-components";
import { CheckboxStyles } from "./styles";

export interface CheckboxProviderProps
  extends React.ComponentProps<typeof Checkbox> {}

export function CheckboxProvider({
  className,
  ...props
}: CheckboxProviderProps) {
  return (
    <Checkbox
      {...props}
      className={composeRenderProps(className, (className) =>
        CheckboxStyles.Provider({ className })
      )}
      data-slot="checkbox-provider"
    />
  );
}

export interface CheckboxRootProps extends React.ComponentProps<"div"> {}

export function CheckboxRoot({ className, ...props }: CheckboxRootProps) {
  return (
    <div
      {...props}
      className={CheckboxStyles.Root({ className })}
      data-slot="checkbox-root"
    />
  );
}

export interface CheckboxIndicatorProps extends React.ComponentProps<"svg"> {}

export function CheckboxIndicator({
  className,
  ...props
}: CheckboxIndicatorProps) {
  return (
    <>
      <MinusIcon
        {...props}
        className={CheckboxStyles.Indicator({
          className: [className, "group-indeterminate:block"],
        })}
        data-slot="checkbox-indicator"
      />

      <CheckIcon
        {...props}
        className={CheckboxStyles.Indicator({
          className: [className, "group-selected:block"],
        })}
        data-slot="checkbox-indicator"
      />
    </>
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const CheckboxStyles = {
  Indicator: cva({
    base: ["hidden size-3"],
  }),
  Provider: cva({
    base: [
      "group flex items-center gap-3 font-medium text-sm leading-none transition",
      "disabled:opacity-50",
    ],
  }),
  Root: cva({
    base: [
      "grid size-4 shrink-0 place-content-center rounded-sm border border-toggle bg-secondary text-background transition",

      "group-selected:border-primary/70 group-selected:bg-primary group-selected:text-primary-foreground",
      "group-selected:group-invalid:border-destructive/70 group-selected:group-invalid:bg-destructive group-selected:group-invalid:text-destructive-foreground",

      "group-focus-visible:border-primary/70 group-focus-visible:ring-4 group-focus-visible:ring-primary/20",
      "group-focus-visible:group-invalid:border-destructive/70 group-focus-visible:group-invalid:text-destructive-foreground group-focus-visible:group-invalid:ring-destructive/20",

      "group-invalid:border-destructive/70 group-invalid:bg-destructive/20 group-invalid:text-destructive-foreground group-invalid:ring-destructive/20",
      "group-disabled:cursor-not-allowed",
    ],
  }),
};


// File: namespace.ts

export {
  CheckboxIndicator as Indicator,
  CheckboxProvider as Provider,
  CheckboxRoot as Root,
} from "./checkbox";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { Checkbox } from "~/components/ui/checkbox";

<Checkbox.Provider>
  <Checkbox.Root>
    <Checkbox.Indicator />
  </Checkbox.Root>
  Label
</Checkbox.Provider>;
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import {
  CheckboxIndicator,
  CheckboxProvider,
  CheckboxRoot,
} from "~/components/ui/checkbox";

<CheckboxProvider>
  <CheckboxRoot>
    <CheckboxIndicator />
  </CheckboxRoot>
  Label
</CheckboxProvider>;
```

</Tabs.Content>

</Tabs.Root>

## Examples

### Disabled

## Component Preview: checkbox-disabled-demo

```tsx
import { Checkbox } from "~/components/ui/checkbox";

export function CheckboxDisabledDemo() {
  return (
    <Checkbox.Provider isDisabled>
      <Checkbox.Root>
        <Checkbox.Indicator />
      </Checkbox.Root>
      Enable notifications
    </Checkbox.Provider>
  );
}
```


### Group

## Component Preview: checkbox-group-demo

```tsx
import { Checkbox } from "~/components/ui/checkbox";

export function CheckboxGroupDemo() {
  return (
    <Checkbox.Provider className="items-start rounded-lg border selected:border-blue-600 selected:bg-blue-50 p-3 hover:bg-accent/50 dark:selected:border-blue-900 dark:selected:bg-blue-950">
      <Checkbox.Root className="group-selected:border-blue-600 group-selected:bg-blue-600 group-selected:text-white dark:group-selected:border-blue-700 dark:group-selected:bg-blue-700">
        <Checkbox.Indicator />
      </Checkbox.Root>
      <div className="grid gap-1.5 font-normal">
        <p className="font-medium text-sm leading-none">Enable notifications</p>
        <p className="text-muted-foreground text-sm">
          You can enable or disable notifications at any time.
        </p>
      </div>
    </Checkbox.Provider>
  );
}
```


### Form

<Alert.Root variant="warning">
  <AlertIcon variant="warning" className="size-4" />
  <Alert.Title>Under Construction</Alert.Title>
  <Alert.Description>
    This component is currently being built. Check back soon for updates!
  </Alert.Description>
</Alert.Root>


# Collapsible (/docs/components/collapsible)

---
title: Collapsible
description: An interactive component which expands/collapses a panel.
links:
  docs: https://react-aria.adobe.com/Disclosure
---

## Component Preview: collapsible-demo

```tsx
import { ChevronsUpDownIcon } from "lucide-react";
import { Button } from "~/components/ui/button";
import { Collapsible } from "~/components/ui/collapsible";

export function CollapsibleDemo() {
  return (
    <Collapsible.Root className="flex w-full flex-col gap-2 md:w-[350px]">
      <div className="flex items-center justify-between gap-4 px-4">
        <h4 className="line-clamp-1 font-semibold text-sm">
          @peduarte starred 3 repositories
        </h4>
        <Button size="sm" slot="trigger" variant="ghost">
          <ChevronsUpDownIcon className="size-4" />
          <span className="sr-only">Toggle</span>
        </Button>
      </div>
      <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-xs">
        @radix-ui/primitives
      </div>
      <Collapsible.Content className="flex flex-col gap-2">
        <div className="rounded-md border px-4 py-2 font-mono shadow-xs">
          @radix-ui/colors
        </div>
        <div className="rounded-md border px-4 py-2 font-mono shadow-xs">
          @stitches/react
        </div>
      </Collapsible.Content>
    </Collapsible.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/collapsible
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: collapsible

```tsx
// File: index.ts

export * from "./collapsible";
export * as Collapsible from "./namespace";
export * from "./styles";


// File: collapsible.tsx

"use client";

import {
  Button,
  composeRenderProps,
  Disclosure,
  DisclosurePanel,
} from "react-aria-components";
import { CollapsibleStyles } from "./styles";

export interface CollapsibleRootProps
  extends React.ComponentProps<typeof Disclosure> {}

export function CollapsibleRoot(props: CollapsibleRootProps) {
  return <Disclosure data-slot="collapsible-root" {...props} />;
}

export interface CollapsibleTriggerProps
  extends Omit<React.ComponentProps<typeof Button>, "slot"> {}

export function CollapsibleTrigger(props: CollapsibleTriggerProps) {
  return <Button data-slot="collapsible-trigger" slot="trigger" {...props} />;
}

export interface CollapsibleContentProps
  extends React.ComponentProps<typeof DisclosurePanel> {}

export function CollapsibleContent({
  className,
  ...props
}: CollapsibleContentProps) {
  return (
    <DisclosurePanel
      className={composeRenderProps(className, (className) =>
        CollapsibleStyles.Content({ className })
      )}
      data-slot="collapsible-content"
      {...props}
    />
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const CollapsibleStyles = {
  Content: cva({
    base: [
      "h-(--disclosure-panel-height) transform-gpu overflow-clip text-sm duration-300 motion-safe:transition-[height]",
    ],
  }),
};


// File: namespace.ts

export {
  CollapsibleContent as Content,
  CollapsibleRoot as Root,
  CollapsibleTrigger as Trigger,
} from "./collapsible";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { Collapsible } from "~/components/ui/collapsible";

<Collapsible.Root>
  <Collapsible.Trigger>Is it accessible?</Collapsible.Trigger>
  <Collapsible.Content>
    Yes. It adheres to the WAI-ARIA design pattern.
  </Collapsible.Content>
</Collapsible.Root>;
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import {
  CollapsibleContent,
  CollapsibleRoot,
  CollapsibleTrigger,
} from "~/components/ui/collapsible";

<CollapsibleRoot>
  <CollapsibleTrigger>Is it accessible?</CollapsibleTrigger>
  <CollapsibleContent>
    Yes. It adheres to the WAI-ARIA design pattern.
  </CollapsibleContent>
</CollapsibleRoot>;
```

</Tabs.Content>

</Tabs.Root>

## Trigger

You can use the `<Collapsible.Trigger />{:tsx}` component to create a button that toggles the visibility of the collapsible content,
or you can use the `<Button />{:tsx}` component as the trigger by passing it a `slot="trigger"{:tsx}` prop.

```tsx
<Collapsible.Root>
  {/* [!code highlight] */}
  <Button slot="trigger" variant="ghost">
    Is it accessible?
  </Button>
  <Collapsible.Content>
    Yes. It adheres to the WAI-ARIA design pattern.
  </Collapsible.Content>
</Collapsible.Root>
```

## Animation

The accordion uses the `--disclosure-panel-height{:css}` CSS variable to animate the height of the content area.


# Date Field (/docs/components/date-field)

---
title: Date Field
description: A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.
links:
  docs: https://react-aria.adobe.com/DateField
---

## Component Preview: date-field-demo

```tsx
"use client";

import { getLocalTimeZone, today } from "@internationalized/date";
import { DateField } from "~/components/ui/date-field";
import { InputStyles } from "~/components/ui/input";
import { Label } from "~/components/ui/label";

export function DateFieldDemo() {
  return (
    <DateField.Root minValue={today(getLocalTimeZone())}>
      <Label>Event date</Label>
      <DateField.Input className={InputStyles()}>
        {(segment) => <DateField.Segment segment={segment} />}
      </DateField.Input>
    </DateField.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/date-field
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: date-field

```tsx
// File: index.ts

export * from "./date-field";
export * as DateField from "./namespace";
export * from "./styles";


// File: date-field.tsx

"use client";

import {
  composeRenderProps,
  DateInput,
  DateSegment,
  type DateValue,
  DateField as RACDateField,
} from "react-aria-components";
import { cn } from "~/lib/cva";
import { DateFieldStyles } from "./styles";

export interface DateFieldRootProps<T extends DateValue>
  extends React.ComponentProps<typeof RACDateField<T>> {}

export function DateFieldRoot<T extends DateValue>({
  className,
  ...props
}: DateFieldRootProps<T>) {
  return (
    <RACDateField
      {...props}
      className={composeRenderProps(className, (className) =>
        cn("group grid gap-3", className)
      )}
      data-slot="date-field-root"
    />
  );
}

export interface DateFieldInputProps
  extends React.ComponentProps<typeof DateInput> {}

export function DateFieldInput(props: DateFieldInputProps) {
  return <DateInput data-slot="date-field-input" {...props} />;
}

export interface DateFieldSegmentProps
  extends React.ComponentProps<typeof DateSegment> {}

export function DateFieldSegment({
  className,
  ...props
}: DateFieldSegmentProps) {
  return (
    <DateSegment
      {...props}
      className={composeRenderProps(className, (className) =>
        DateFieldStyles.Segment({ className })
      )}
      data-slot="date-field-segment"
    />
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const DateFieldStyles = {
  Segment: cva({
    base: [
      "rounded-sm p-0.5 outline-none transition",
      "data-placeholder:text-muted-foreground",
      "type-literal:px-0 type-literal:text-muted-foreground",
      "focus:bg-ring/50",
    ],
  }),
};


// File: namespace.ts

export {
  DateFieldInput as Input,
  DateFieldRoot as Root,
  DateFieldSegment as Segment,
} from "./date-field";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { DateField } from "~/components/ui/date-field";

<DateField.Root>
  <Label />
  <DateField.Input>
    {(segment) => <DateField.Segment segment={segment} />}
  </DateField.Input>
</DateField.Root>;
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import {
  DateFieldInput,
  DateFieldRoot,
  DateFieldSegment,
} from "~/components/ui/date-field";

<DateFieldRoot>
  <Label />
  <DateFieldInput>
    {(segment) => <DateFieldSegment segment={segment} />}
  </DateFieldInput>
</DateFieldRoot>;
```

</Tabs.Content>

</Tabs.Root>

## Examples

### Disabled

## Component Preview: date-field-disabled-demo

```tsx
"use client";

import { getLocalTimeZone, today } from "@internationalized/date";
import { DateField } from "~/components/ui/date-field";
import { InputStyles } from "~/components/ui/input";
import { Label } from "~/components/ui/label";

export function DateFieldDisabledDemo() {
  return (
    <DateField.Root isDisabled minValue={today(getLocalTimeZone())}>
      <Label>Event date</Label>
      <DateField.Input className={InputStyles()}>
        {(segment) => <DateField.Segment segment={segment} />}
      </DateField.Input>
    </DateField.Root>
  );
}
```


### Timezone

<Alert.Root variant="warning">
  <AlertIcon variant="warning" className="size-4" />
  <Alert.Title>Under Construction</Alert.Title>
  <Alert.Description>
    This component is currently being built. Check back soon for updates!
  </Alert.Description>
</Alert.Root>

### Granularity

<Alert.Root variant="warning">
  <AlertIcon variant="warning" className="size-4" />
  <Alert.Title>Under Construction</Alert.Title>
  <Alert.Description>
    This component is currently being built. Check back soon for updates!
  </Alert.Description>
</Alert.Root>

### Form

<Alert.Root variant="warning">
  <AlertIcon variant="warning" className="size-4" />
  <Alert.Title>Under Construction</Alert.Title>
  <Alert.Description>
    This component is currently being built. Check back soon for updates!
  </Alert.Description>
</Alert.Root>


# Dialog (/docs/components/dialog)

---
title: Dialog
description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
links:
  docs: https://react-aria.adobe.com/Modal
---

## Component Preview: dialog-demo

```tsx
import { Button } from "~/components/ui/button";
import { Dialog } from "~/components/ui/dialog";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";
import { TextField } from "~/components/ui/text-field";

export function DialogDemo() {
  return (
    <Dialog.Root>
      <Button variant="outline">Edit Profile</Button>

      <Dialog.Overlay>
        <Dialog.Modal className="sm:max-w-[425px]">
          <Dialog.Content>
            <Dialog.Header>
              <Dialog.Title>Edit profile</Dialog.Title>
              <Dialog.Description>
                Make changes to your profile here. Click save when you&apos;re
                done.
              </Dialog.Description>
            </Dialog.Header>
            <div className="grid gap-4">
              <TextField autoFocus defaultValue="Pedro Duarte" name="name">
                <Label>Name</Label>
                <Input />
              </TextField>
              <TextField defaultValue="@peduarte" name="username">
                <Label>Username</Label>
                <Input />
              </TextField>
            </div>
            <Dialog.Footer>
              <Button slot="close" variant="outline">
                Cancel
              </Button>
              <Button type="submit">Save changes</Button>
            </Dialog.Footer>

            <Dialog.Close />
          </Dialog.Content>
        </Dialog.Modal>
      </Dialog.Overlay>
    </Dialog.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/dialog
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: dialog

```tsx
// File: index.ts

export * from "./dialog";
export * as Dialog from "./namespace";
export * from "./styles";


// File: dialog.tsx

"use client";

import type { VariantProps } from "cva";
import { XIcon } from "lucide-react";
import {
  Button,
  composeRenderProps,
  Dialog,
  DialogTrigger,
  Heading,
  Modal,
  ModalOverlay,
} from "react-aria-components";
import { DialogStyles } from "./styles";

export interface DialogRootProps
  extends React.ComponentProps<typeof DialogTrigger> {}

export function DialogRoot(props: DialogRootProps) {
  return <DialogTrigger data-slot="dialog-root" {...props} />;
}

export interface DialogModalProps
  extends React.ComponentProps<typeof Modal>,
    VariantProps<typeof DialogStyles.Modal> {
  /**
   * Whether to close the modal when the user interacts outside it.
   * @default true
   */
  isDismissable?: boolean;
}

export function DialogModal({
  className,
  isDismissable = true,
  ...props
}: DialogModalProps) {
  return (
    <Modal
      className={composeRenderProps(className, (className) =>
        DialogStyles.Modal({ className })
      )}
      data-slot="dialog-modal"
      isDismissable={isDismissable}
      {...props}
    />
  );
}

export interface DialogOverlayProps
  extends React.ComponentProps<typeof ModalOverlay>,
    VariantProps<typeof DialogStyles.Overlay> {
  /**
   * Whether to close the modal when the user interacts outside it.
   * @default true
   */
  isDismissable?: boolean;
}

export function DialogOverlay({
  className,
  isBlurred,
  isDismissable = true,
  ...props
}: DialogOverlayProps) {
  return (
    <ModalOverlay
      className={composeRenderProps(className, (className) =>
        DialogStyles.Overlay({ className, isBlurred })
      )}
      data-slot="dialog-overlay"
      isDismissable={isDismissable}
      {...props}
    />
  );
}

export interface DialogContentProps
  extends React.ComponentProps<typeof Dialog> {}

export function DialogContent({ className, ...props }: DialogContentProps) {
  return (
    <Dialog
      className={DialogStyles.Content({ className })}
      data-slot="dialog-content"
      {...props}
    />
  );
}

export interface DialogCloseProps
  extends Omit<React.ComponentProps<typeof Button>, "children" | "slot"> {}

export function DialogClose({ className, ...props }: DialogCloseProps) {
  return (
    <Button
      {...props}
      className={composeRenderProps(className, (className) =>
        DialogStyles.Close({ className })
      )}
      data-slot="dialog-close"
      slot="close"
    >
      <XIcon />
      <span className="sr-only">Close</span>
    </Button>
  );
}

export interface DialogHeaderProps extends React.ComponentProps<"div"> {}

export function DialogHeader({ className, ...props }: DialogHeaderProps) {
  return (
    <div
      className={DialogStyles.Header({ className })}
      data-slot="dialog-header"
      {...props}
    />
  );
}

export interface DialogFooterProps extends React.ComponentProps<"div"> {}

export function DialogFooter({ className, ...props }: DialogFooterProps) {
  return (
    <div
      className={DialogStyles.Footer({ className })}
      data-slot="dialog-footer"
      {...props}
    />
  );
}

export interface DialogTitleProps
  extends React.ComponentProps<typeof Heading> {}

export function DialogTitle({ className, ...props }: DialogTitleProps) {
  return (
    <Heading
      className={DialogStyles.Title({ className })}
      data-slot="dialog-title"
      slot="title"
      {...props}
    />
  );
}

export interface DialogDescriptionProps extends React.ComponentProps<"p"> {}

export function DialogDescription({
  className,
  ...props
}: DialogDescriptionProps) {
  return (
    <p
      className={DialogStyles.Description({ className })}
      data-slot="dialog-description"
      {...props}
    />
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const DialogStyles = {
  Close: cva({
    base: [
      "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity",
      "hover:opacity-100",
      "focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
      "disabled:pointer-events-none",
      "[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
    ],
  }),
  Content: cva({
    base: ["grid gap-4 outline-none"],
  }),
  Description: cva({
    base: ["text-muted-foreground text-sm"],
  }),
  Footer: cva({
    base: ["flex flex-col-reverse", "sm:flex-row sm:justify-end sm:space-x-2"],
  }),
  Header: cva({
    base: ["flex flex-col gap-2 text-center sm:text-left"],
  }),
  Modal: cva({
    base: [
      "fixed z-50 w-full bg-background p-4 shadow-lg outline-none",
      "entering:motion-opacity-in motion-duration-200 exiting:motion-opacity-out motion-ease",
      "sm:rounded-lg",
      "top-1/2 left-1/2 max-w-lg -translate-x-1/2 -translate-y-1/2 border p-6",
      "entering:motion-scale-in-95",
      "exiting:motion-scale-out-95",
    ],
  }),
  Overlay: cva({
    base: [
      "fixed inset-0 z-50",
      "entering:motion-opacity-in motion-duration-200 motion-ease exiting:motion-opacity-out",
    ],
    defaultVariants: {
      isBlurred: false,
    },
    variants: {
      isBlurred: {
        false: ["bg-black/15 dark:bg-black/60"],
        true: ["backdrop-blur"],
      },
    },
  }),
  Title: cva({
    base: ["font-semibold text-lg leading-none"],
  }),
};


// File: namespace.ts

export {
  DialogClose as Close,
  DialogContent as Content,
  DialogDescription as Description,
  DialogFooter as Footer,
  DialogHeader as Header,
  DialogModal as Modal,
  DialogOverlay as Overlay,
  DialogRoot as Root,
  DialogTitle as Title,
} from "./dialog";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { Button } from "~/components/ui/button";
import { Dialog } from "~/components/ui/dialog";

<Dialog.Root>
  <Button>Trigger</Button>

  <Dialog.Overlay>
    <Dialog.Modal>
      <Dialog.Content>
        <Dialog.Header>
          <Dialog.Title />
          <Dialog.Description />
        </Dialog.Header>

        <Dialog.Footer>
          <Button slot="close" />
        </Dialog.Footer>

        <Dialog.Close />
      </Dialog.Content>
    </Dialog.Modal>
  </Dialog.Overlay>
</Dialog.Root>;
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import { Button } from "~/components/ui/button";
import {
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogModal,
  DialogOverlay,
  DialogRoot,
  DialogTitle,
} from "~/components/ui/dialog";

<DialogRoot>
  <Button>Trigger</Button>

  <DialogOverlay>
    <DialogModal>
      <DialogContent>
        <DialogHeader>
          <DialogTitle />
          <DialogDescription />
        </DialogHeader>

        <DialogFooter>
          <Button slot="close" />
        </DialogFooter>

        <DialogClose />
      </DialogContent>
    </DialogModal>
  </DialogOverlay>
</DialogRoot>;
```

</Tabs.Content>

</Tabs.Root>

## Examples

### Scrollable

## Component Preview: dialog-scrollable-demo

```tsx
import { Button } from "~/components/ui/button";
import { Dialog } from "~/components/ui/dialog";

export function DialogScrollableDemo() {
  return (
    <Dialog.Root>
      <Button variant="outline">Scrollable Content</Button>

      <Dialog.Overlay>
        <Dialog.Modal className="sm:max-w-[425px]">
          <Dialog.Content>
            <Dialog.Header>
              <Dialog.Title>Scrollable Content</Dialog.Title>
              <Dialog.Description>
                This is a dialog. with scrollable content.
              </Dialog.Description>
            </Dialog.Header>
            <div className="-mx-6 max-h-[500px] overflow-y-auto px-6 text-sm">
              <h4 className="mb-4 font-medium text-lg leading-none">
                Lorem Ipsum
              </h4>
              {Array.from({ length: 10 }).map((_, index) => (
                // biome-ignore lint/suspicious/noArrayIndexKey: This is fine
                <p className="mb-4 leading-normal" key={index}>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                  irure dolor in reprehenderit in voluptate velit esse cillum
                  dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                  cupidatat non proident, sunt in culpa qui officia deserunt
                  mollit anim id est laborum.
                </p>
              ))}
            </div>

            <Dialog.Close />
          </Dialog.Content>
        </Dialog.Modal>
      </Dialog.Overlay>
    </Dialog.Root>
  );
}
```


### Alert Dialog

Use the `role="alertdialog"{:tsx}` prop on the `<Dialog.Content>{:tsx}` element to make an alert dialog.
Also, make sure to set the `isDismissable` prop to `false{:ts}` on the `<Dialog.Overlay>{:tsx}` or `<Dialog.Modal>{:tsx}`
to prevent the dialog from being dismissed by clicking outside of it.

## Component Preview: alert-dialog-demo

```tsx
import { Button } from "~/components/ui/button/button";
import { Dialog } from "~/components/ui/dialog";

export function AlertDialogDemo() {
  return (
    <Dialog.Root>
      <Button variant="outline">Show Dialog</Button>

      <Dialog.Overlay isDismissable={false}>
        <Dialog.Modal>
          <Dialog.Content role="alertdialog">
            <Dialog.Header>
              <Dialog.Title>Are you absolutely sure?</Dialog.Title>
              <Dialog.Description>
                This action cannot be undone. This will permanently delete your
                account and remove your data from our servers.
              </Dialog.Description>
            </Dialog.Header>
            <Dialog.Footer>
              <Button slot="close" variant="outline">
                Cancel
              </Button>
              <Button>Continue</Button>
            </Dialog.Footer>
          </Dialog.Content>
        </Dialog.Modal>
      </Dialog.Overlay>
    </Dialog.Root>
  );
}
```


### Sheet

Use the `side{:tsx}` prop on the `<Dialog.Modal>{:tsx}` element to make a sheet dialog.

## Component Preview: dialog-sheet-demo

> ⚠️ Component 'dialog-sheet-demo' not found in registry


## API Reference

### Root

<PropsTable
  data={[
    {
      name: "defaultOpen",
      required: false,
      typeSimple: "boolean",
      default: "false",
      description: "Whether the overlay is open by default (uncontrolled).",
    },
    {
      name: "isOpen",
      required: false,
      typeSimple: "boolean",
      default: "false",
      description: "Whether the overlay is open by default (controlled).",
    },
    {
      name: "onOpenChange",
      required: false,
      typeSimple: "function",
      type: "((isOpen: boolean) => void)",
      description:
        "Handler that is called when the overlay's open state changes.",
    },
  ]}
/>

### Content

<PropsTable
  data={[
    {
      name: "side",
      required: false,
      typeSimple: "enum",
      type: '"center" | "top" | "bottom" | "left" | "right"',
      default: '"center"',
      description: "The side of the screen the dialog should appear from.",
    },
    {
      name: "role",
      required: false,
      typeSimple: "enum",
      type: '"dialog" | "alertdialog"',
      default: '"dialog"',
      description: "The role of the dialog.",
    },
    {
      name: "isBlurred",
      required: false,
      typeSimple: "boolean",
      default: "false",
      description: "Whether the content behind the dialog should be blurred.",
    },
    {
      name: "isDismissable",
      required: false,
      typeSimple: "boolean",
      default: "true",
      description:
        "Whether the dialog can be dismissed by clicking outside of it.",
    },
    {
      name: "isKeyboardDismissDisabled",
      required: false,
      typeSimple: "boolean",
      default: "false",
      description:
        "Whether pressing the escape key to close the modal should be disabled.",
    },
  ]}
/>


# Field (/docs/components/field)

---
title: Field
description: Combine labels, controls, and help text to compose accessible form fields.
---

## Component Preview: field-demo

```tsx
import { Field } from "~/components/ui/field";
import { Input } from "~/components/ui/input";
import { TextField } from "~/components/ui/text-field";

export function FieldDemo() {
  return (
    <Field.Set>
      <Field.Legend>Profile</Field.Legend>
      <Field.Description>
        This information will be displayed on your profile.
      </Field.Description>
      <Field.Group>
        <Field.Root render={<TextField />}>
          <Field.Label>Full name</Field.Label>
          <Input placeholder="John Doe" />
          <Field.Description>
            This appears on invoices and emails.
          </Field.Description>
        </Field.Root>
        <Field.Root render={<TextField isInvalid />}>
          <Field.Label>Username</Field.Label>
          <Input placeholder="johndoe" />
          <Field.Error>This username is already taken.</Field.Error>
        </Field.Root>
      </Field.Group>
    </Field.Set>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/field
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: field

```tsx
// File: index.ts

export * from "./field";
export * as Field from "./namespace";
export * from "./styles";


// File: field.tsx

"use client";

import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import type { VariantProps } from "cva";
import { use, useMemo } from "react";
import {
  FieldError as AriaFieldError,
  FieldErrorContext,
  Text,
} from "react-aria-components";
import { Label } from "~/components/ui/label";
import { Separator } from "~/components/ui/separator";
import { FieldStyles } from "./styles";

export interface FieldSetProps extends React.ComponentProps<"fieldset"> {}

export function FieldSet({ className, ...props }: FieldSetProps) {
  return (
    <fieldset
      className={FieldStyles.Set({ className })}
      data-slot="field-set"
      {...props}
    />
  );
}

export interface FieldLegendProps
  extends React.ComponentProps<"legend">,
    VariantProps<typeof FieldStyles.Legend> {}

export function FieldLegend({
  className,
  variant = "legend",
  ...props
}: FieldLegendProps) {
  return (
    <legend
      className={FieldStyles.Legend({ variant, className })}
      data-slot="field-legend"
      data-variant={variant}
      {...props}
    />
  );
}

export interface FieldGroupProps extends React.ComponentProps<"div"> {}

export function FieldGroup({ className, ...props }: FieldGroupProps) {
  return (
    <div
      className={FieldStyles.Group({ className })}
      data-slot="field-group"
      {...props}
    />
  );
}

export interface FieldRootProps
  extends useRender.ComponentProps<"div">,
    VariantProps<typeof FieldStyles.Root> {}

export function FieldRoot({
  render,
  className,
  orientation = "vertical",
  ...props
}: FieldRootProps) {
  const defaultProps: useRender.ElementProps<"div"> = {
    className: FieldStyles.Root({ orientation, className }),
    ["data-orientation" as string]: orientation,
    ["data-slot" as string]: "field-root",
    role: "group",
  };

  return useRender({
    defaultTagName: "div",
    render,
    props: mergeProps<"div">(defaultProps, props),
  });
}

export interface FieldContentProps extends React.ComponentProps<"div"> {}

export function FieldContent({ className, ...props }: FieldContentProps) {
  return (
    <div
      className={FieldStyles.Content({ className })}
      data-slot="field-content"
      {...props}
    />
  );
}

export interface FieldLabelProps extends React.ComponentProps<typeof Label> {}

export function FieldLabel({ className, ...props }: FieldLabelProps) {
  return (
    <Label
      className={FieldStyles.Label({ className })}
      data-slot="field-label"
      {...props}
    />
  );
}

export interface FieldTitleProps extends React.ComponentProps<"div"> {}

export function FieldTitle({ className, ...props }: FieldTitleProps) {
  return (
    <div
      className={FieldStyles.Title({ className })}
      data-slot="field-title"
      {...props}
    />
  );
}

export interface FieldDescriptionProps
  extends React.ComponentProps<typeof Text> {}

export function FieldDescription({
  className,
  ...props
}: FieldDescriptionProps) {
  return (
    <Text
      className={FieldStyles.Description({ className })}
      data-slot="field-description"
      slot="description"
      {...props}
    />
  );
}

export interface FieldSeparatorProps extends React.ComponentProps<"div"> {
  children?: React.ReactNode;
}

export function FieldSeparator({
  children,
  className,
  ...props
}: FieldSeparatorProps) {
  return (
    <div
      className={FieldStyles.Separator({ className })}
      data-content={!!children}
      data-slot="field-separator"
      {...props}
    >
      <Separator className="absolute inset-0 top-1/2" />
      {children && (
        <span
          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
          data-slot="field-separator-content"
        >
          {children}
        </span>
      )}
    </div>
  );
}

export interface FieldErrorProps
  extends React.ComponentProps<typeof AriaFieldError> {
  errors?: Array<{ message?: string } | undefined>;
}

export function FieldError({
  className,
  children,
  errors,
  ...props
}: FieldErrorProps) {
  const fieldErrorCtx = use(FieldErrorContext);
  const _errors =
    errors ?? fieldErrorCtx?.validationErrors.map((message) => ({ message }));

  const content = useMemo(() => {
    if (children) {
      return children;
    }

    if (!_errors?.length) {
      return null;
    }

    const uniqueErrors = [
      ...new Map(
        _errors.map((error, index) => [error?.message, { ...error, id: index }])
      ).values(),
    ];

    if (uniqueErrors.length === 1) {
      return uniqueErrors.at(0)?.message;
    }

    return (
      <ul className="ml-4 flex list-disc flex-col gap-1">
        {uniqueErrors.map(
          (error) => error?.message && <li key={error.id}>{error.message}</li>
        )}
      </ul>
    );
  }, [children, _errors]);

  if (!content) {
    return null;
  }

  return (
    <AriaFieldError
      className={FieldStyles.Error({ className })}
      data-slot="field-error"
      // https://github.com/adobe/react-spectrum/issues/7525
      // elementType="div"
      {...props}
    >
      {content}
    </AriaFieldError>
  );
}


// File: namespace.ts

export {
  FieldContent as Content,
  FieldDescription as Description,
  FieldError as Error,
  FieldGroup as Group,
  FieldLabel as Label,
  FieldLegend as Legend,
  FieldRoot as Root,
  FieldSeparator as Separator,
  FieldSet as Set,
  FieldTitle as Title,
} from "./field";


// File: styles.ts

import { cva } from "~/lib/cva";

export const FieldStyles = {
  Set: cva({
    base: [
      "flex flex-col gap-6",
      "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
    ],
  }),
  Legend: cva({
    base: ["mb-3 font-medium"],
    variants: {
      variant: {
        legend: "text-base",
        label: "text-sm",
      },
    },
    defaultVariants: {
      variant: "legend",
    },
  }),
  Group: cva({
    base: [
      "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
    ],
  }),
  Root: cva({
    base: "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",

    variants: {
      orientation: {
        vertical: ["flex-col *:w-full [&>.sr-only]:w-auto"],
        horizontal: [
          "flex-row items-center",
          "*:data-[slot=field-label]:flex-auto",
          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
        ],
        responsive: [
          "@md/field-group:flex-row flex-col @md/field-group:items-center *:w-full @md/field-group:*:w-auto [&>.sr-only]:w-auto",
          "@md/field-group:*:data-[slot=field-label]:flex-auto",
          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
        ],
      },
    },
    defaultVariants: {
      orientation: "vertical",
    },
  }),
  Content: cva({
    base: ["group/field-content flex flex-1 flex-col gap-1.5 leading-snug"],
  }),
  Label: cva({
    base: [
      "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
      "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-4",
      "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
    ],
  }),
  Title: cva({
    base: [
      "flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50",
    ],
  }),
  Description: cva({
    base: [
      "font-normal text-muted-foreground text-sm leading-normal group-has-orientation-horizontal/field:text-balance",
      "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
      "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
    ],
  }),
  Separator: cva({
    base: [
      "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
    ],
  }),
  Error: cva({
    base: ["font-normal text-destructive text-sm"],
  }),
};
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { Field } from "~/components/ui/field";

<Field.Set>
  <Field.Legend>Profile</Field.Legend>
  <Field.Group>
    <Field.Root>
      <Field.Label>Label</Field.Label>
      {/* Input, Select, Switch, etc. */}
      <Field.Description>Optional helper text.</Field.Description>
      <Field.Error>Validation message.</Field.Error>
    </Field.Root>
  </Field.Group>
</Field.Set>;
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import {
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldRoot,
  FieldSet,
} from "~/components/ui/field";

<FieldSet>
  <FieldLegend>Profile</FieldLegend>
  <FieldGroup>
    <FieldRoot>
      <FieldLabel>Label</FieldLabel>
      {/* Input, Select, Switch, etc. */}
      <FieldDescription>Optional helper text.</FieldDescription>
      <FieldError>Validation message.</FieldError>
    </FieldRoot>
  </FieldGroup>
</FieldSet>;
```

</Tabs.Content>

</Tabs.Root>

### Structure

- `<Field.Root>{:tsx}` is the core wrapper for a single field.
- `<Field.Content>{:tsx}` is a flex column that groups label and description. Not required if you have no description.
- Wrap related fields with `<Field.Group>{:tsx}`, and use `<Field.Set>{:tsx}` with `<Field.Legend>{:tsx}` for semantic grouping.

## Form

See the [Forms](/docs/forms) documentation for building forms with the Field component and [TanStack Form](/docs/forms/tanstack-form) or [React Hook Form](/docs/forms/react-hook-form).

## Examples

### Input

Use `<Field.Root>{:tsx}` with the `render{:tsx}` prop to compose with `<TextField>{:tsx}` for automatic accessibility wiring.

## Component Preview: field-input-demo

```tsx
import { Field } from "~/components/ui/field";
import { Input } from "~/components/ui/input";
import { TextField } from "~/components/ui/text-field";

export function FieldInputDemo() {
  return (
    <Field.Root render={<TextField type="email" />}>
      <Field.Label>Email</Field.Label>
      <Input placeholder="john@example.com" />
      <Field.Description>We'll never share your email.</Field.Description>
    </Field.Root>
  );
}
```


### Without TextField

You can use `<Field.Root>{:tsx}` with `<Input>{:tsx}` directly, but you must provide `htmlFor{:tsx}` on the label and `id{:tsx}` on the input manually.

```tsx
<Field.Root>
  <Field.Label htmlFor="email">Email</Field.Label>
  <Input id="email" placeholder="Email" />
</Field.Root>
```

<Alert.Root variant="warning">
  <AlertIcon variant="warning" className="size-4" />
  <Alert.Title>Manual ID wiring</Alert.Title>
  <Alert.Description>
    Without TextField, you lose React Aria's automatic ID association for label,
    description, and error elements. Use `<TextField>{:tsx}` when accessibility is
    critical.
  </Alert.Description>
</Alert.Root>

### Textarea

## Component Preview: field-textarea-demo

```tsx
import { Field } from "~/components/ui/field";
import { TextField } from "~/components/ui/text-field";
import { Textarea } from "~/components/ui/textarea";

export function FieldTextareaDemo() {
  return (
    <Field.Root render={<TextField />}>
      <Field.Label>Bio</Field.Label>
      <Textarea placeholder="Tell us about yourself..." />
      <Field.Description>Max 500 characters.</Field.Description>
    </Field.Root>
  );
}
```


### Select

## Component Preview: field-select-demo

```tsx
import { Field } from "~/components/ui/field";
import { Listbox } from "~/components/ui/list-box";
import { Popover } from "~/components/ui/popover";
import { Select } from "~/components/ui/select";

export function FieldSelectDemo() {
  return (
    <Field.Root render={<Select.Root placeholder="Select a fruit" />}>
      <Field.Label>Favorite fruit</Field.Label>
      <Select.Trigger>
        <Select.Value />
      </Select.Trigger>
      <Popover.Content>
        <Listbox.Root>
          <Listbox.Item id="apple">Apple</Listbox.Item>
          <Listbox.Item id="banana">Banana</Listbox.Item>
          <Listbox.Item id="blueberry">Blueberry</Listbox.Item>
          <Listbox.Item id="pineapple">Pineapple</Listbox.Item>
        </Listbox.Root>
      </Popover.Content>
      <Field.Description>Choose your favorite fruit.</Field.Description>
    </Field.Root>
  );
}
```


### Checkbox

## Component Preview: field-checkbox-demo

```tsx
import { Checkbox } from "~/components/ui/checkbox";
import { Field } from "~/components/ui/field";

export function FieldCheckboxDemo() {
  return (
    <Field.Root orientation="horizontal" render={<Checkbox.Provider />}>
      <Checkbox.Root>
        <Checkbox.Indicator />
      </Checkbox.Root>

      <Field.Content>
        <Field.Label>Accept terms and conditions</Field.Label>
        <Field.Description>
          You agree to our Terms of Service and Privacy Policy.
        </Field.Description>
      </Field.Content>
    </Field.Root>
  );
}
```


### Radio Group

## Component Preview: field-radio-demo

```tsx
import { Field } from "~/components/ui/field";
import { Label } from "~/components/ui/label";
import { RadioGroup } from "~/components/ui/radio-group";

export function FieldRadioDemo() {
  return (
    <Field.Set>
      <Field.Legend>Notification preferences</Field.Legend>
      <Field.Description>
        How would you like to receive notifications?
      </Field.Description>
      <RadioGroup.Root data-slot="radio-group" defaultValue="email">
        <Field.Root
          orientation="horizontal"
          render={<RadioGroup.Item value="email" />}
        >
          <RadioGroup.Indicator />
          <Label>Email</Label>
        </Field.Root>
        <Field.Root
          orientation="horizontal"
          render={<RadioGroup.Item value="sms" />}
        >
          <RadioGroup.Indicator />
          <Label>SMS</Label>
        </Field.Root>
        <Field.Root
          orientation="horizontal"
          render={<RadioGroup.Item value="push" />}
        >
          <RadioGroup.Indicator />
          <Label>Push notification</Label>
        </Field.Root>
      </RadioGroup.Root>
    </Field.Set>
  );
}
```


### Switch

## Component Preview: field-switch-demo

```tsx
import { useId } from "react";
import { Field } from "~/components/ui/field";
import { Switch } from "~/components/ui/switch";

export function FieldSwitchDemo() {
  const id = useId();

  return (
    <Field.Root orientation="horizontal">
      <Field.Content>
        <Field.Label htmlFor={id}>Marketing emails</Field.Label>
        <Field.Description>
          Receive emails about new products and features.
        </Field.Description>
      </Field.Content>

      <Switch.Root id={id}>
        <Switch.Track>
          <Switch.Thumb />
        </Switch.Track>
      </Switch.Root>
    </Field.Root>
  );
}
```


### Fieldset

Use `<Field.Set>{:tsx}` and `<Field.Legend>{:tsx}` for semantic grouping of related fields.

## Component Preview: field-fieldset-demo

```tsx
import { Field } from "~/components/ui/field";
import { Input } from "~/components/ui/input";
import { TextField } from "~/components/ui/text-field";

export function FieldFieldsetDemo() {
  return (
    <Field.Set className="w-full">
      <Field.Legend>Shipping Address</Field.Legend>
      <Field.Description>
        We need your address to deliver your order.
      </Field.Description>
      <Field.Group>
        <Field.Root render={<TextField />}>
          <Field.Label>Street address</Field.Label>
          <Input placeholder="123 Main St" />
        </Field.Root>
        <div className="grid auto-cols-auto grid-flow-col gap-4">
          <Field.Root render={<TextField />}>
            <Field.Label>City</Field.Label>
            <Input placeholder="San Francisco" />
          </Field.Root>
          <Field.Root render={<TextField />}>
            <Field.Label>Postal code</Field.Label>
            <Input placeholder="94102" />
          </Field.Root>
        </div>
      </Field.Group>
    </Field.Set>
  );
}
```


### Field Group

Stack `<Field.Root>{:tsx}` components with `<Field.Group>{:tsx}`. Add `<Field.Separator>{:tsx}` to divide them.

## Component Preview: field-group-demo

```tsx
import { Field } from "~/components/ui/field";
import { Input } from "~/components/ui/input";
import { TextField } from "~/components/ui/text-field";

export function FieldGroupDemo() {
  return (
    <Field.Group>
      <Field.Root render={<TextField type="email" />}>
        <Field.Label>Email</Field.Label>
        <Input placeholder="john@example.com" />
      </Field.Root>
      <Field.Separator>Or</Field.Separator>
      <Field.Root render={<TextField type="tel" />}>
        <Field.Label>Phone</Field.Label>
        <Input placeholder="+1 (555) 123-4567" />
      </Field.Root>
    </Field.Group>
  );
}
```


## Responsive Layout

- **Vertical fields:** Default orientation stacks label, control, and helper text—ideal for mobile-first layouts.
- **Horizontal fields:** Set `orientation="horizontal"{:tsx}` on `<Field.Root>{:tsx}` to align the label and control side-by-side. Pair with `<Field.Content>{:tsx}` to keep descriptions aligned.
- **Responsive fields:** Set `orientation="responsive"{:tsx}` for automatic column layouts inside container-aware parents.

## Component Preview: field-responsive-demo

```tsx
"use client";

import { useId } from "react";
import { Field } from "~/components/ui/field";
import { Input } from "~/components/ui/input";
import { Switch } from "~/components/ui/switch";
import { TextField } from "~/components/ui/text-field";

export function FieldResponsiveDemo() {
  const switchId = useId();

  return (
    <Field.Set className="w-full">
      <Field.Legend>Account Settings</Field.Legend>
      <Field.Separator />
      <Field.Group>
        <Field.Root orientation="responsive" render={<TextField />}>
          <Field.Content>
            <Field.Label>Display name</Field.Label>
            <Field.Description>
              This is your public display name.
            </Field.Description>
          </Field.Content>
          <Input placeholder="John Doe" />
        </Field.Root>
        <Field.Separator />
        <Field.Root
          orientation="responsive"
          render={<TextField type="email" />}
        >
          <Field.Content>
            <Field.Label>Email</Field.Label>
            <Field.Description>
              We'll use this for account notifications.
            </Field.Description>
          </Field.Content>
          <Input placeholder="john@example.com" />
        </Field.Root>
        <Field.Separator />
        <Field.Root orientation="responsive">
          <Field.Content>
            <Field.Label htmlFor={switchId}>
              Two-factor authentication
            </Field.Label>
            <Field.Description>
              Add an extra layer of security to your account.
            </Field.Description>
          </Field.Content>
          <Switch.Root id={switchId}>
            <Switch.Track>
              <Switch.Thumb />
            </Switch.Track>
          </Switch.Root>
        </Field.Root>
      </Field.Group>
    </Field.Set>
  );
}
```


## Validation and Errors

When using `<Field.Root>{:tsx}` with React Aria field components like `<TextField>{:tsx}`, `<NumberField>{:tsx}`, `<DateField>{:tsx}`, `<ColorField>{:tsx}`, or `<Select>{:tsx}`, pass `isInvalid{:tsx}` to the field component—it handles the invalid state automatically:

```tsx
<Field.Root render={<TextField isInvalid />}>
  <Field.Label>Email</Field.Label>
  <Input />
  <Field.Error>Enter a valid email address.</Field.Error>
</Field.Root>
```

If you're not using React Aria field components, you must handle validation state manually:

- Add `data-invalid{:tsx}` to `<Field.Root>{:tsx}` to switch the entire block into an error state.
- Add `aria-invalid{:tsx}` on the input itself for assistive technologies.
- Render `<Field.Error>{:tsx}` immediately after the control or inside `<Field.Content>{:tsx}` to keep error messages aligned with the field.

```tsx
<Field.Root data-invalid>
  <Field.Label>Email</Field.Label>
  <Input aria-invalid />
  <Field.Error>Enter a valid email address.</Field.Error>
</Field.Root>
```

## Accessibility

- `<Field.Set>{:tsx}` and `<Field.Legend>{:tsx}` keep related controls grouped for keyboard and assistive tech users.
- `<Field.Root>{:tsx}` outputs `role="group"{:tsx}` so nested controls inherit labeling from `<Field.Label>{:tsx}` and `<Field.Legend>{:tsx}` when combined.
- When using `<Field.Root>{:tsx}` with `render={<TextField />}{:tsx}`, React Aria automatically associates label, description, and error elements via `aria-labelledby{:tsx}` and `aria-describedby{:tsx}`.

## API Reference

### Field.Set

Container that renders a semantic `fieldset` with spacing presets.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

### Field.Legend

Legend element for a `<Field.Set>{:tsx}`. Switch to the `label{:tsx}` variant to align with label sizing.

| Prop        | Type                  | Default    |
| ----------- | --------------------- | ---------- |
| `variant`   | `"legend" \| "label"` | `"legend"` |
| `className` | `string`              |            |

### Field.Group

Layout wrapper that stacks `<Field.Root>{:tsx}` components and enables container queries for responsive orientations.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

### Field.Root

The core wrapper for a single field. Provides orientation control, invalid state styling, and spacing.

| Prop           | Type                                         | Default      |
| -------------- | -------------------------------------------- | ------------ |
| `orientation`  | `"vertical" \| "horizontal" \| "responsive"` | `"vertical"` |
| `render`       | `React.ReactElement`                         |              |
| `className`    | `string`                                     |              |
| `data-invalid` | `boolean`                                    |              |

Use the `render{:tsx}` prop to compose with React Aria components like `<TextField>{:tsx}`:

```tsx
<Field.Root render={<TextField type="email" isRequired />}>
  <Field.Label>Email</Field.Label>
  <Input />
</Field.Root>
```

### Field.Content

Flex column that groups control and descriptions when the label sits beside the control.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

### Field.Label

Label styled for both direct inputs and nested `Field.Root` children.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |
| `htmlFor`   | `string` |         |

### Field.Title

Renders a title with label styling inside `<Field.Content>{:tsx}`.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

### Field.Description

Helper text slot. Uses React Aria's `<Text>{:tsx}` component with `slot="description"{:tsx}`.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

### Field.Separator

Visual divider to separate sections inside a `<Field.Group>{:tsx}`. Accepts optional inline content.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<Field.Separator>Or continue with</Field.Separator>
```

### Field.Error

Accessible error container that accepts children or an `errors{:tsx}` array.

| Prop        | Type                                       | Default |
| ----------- | ------------------------------------------ | ------- |
| `errors`    | `Array<{ message?: string } \| undefined>` |         |
| `className` | `string`                                   |         |

When the `errors{:tsx}` array contains multiple messages, the component renders a list automatically.

```tsx
<Field.Error
  errors={[{ message: "Required" }, { message: "Invalid format" }]}
/>
```


# Form (/docs/components/form)

---
title: Form
description: A form component that coordinates submission and validation.
links:
  docs: https://react-aria.adobe.com/Form
---

<Alert.Root>
  <AlertIcon className="size-4" />
  <Alert.Description>
    Form is a **client-only adapter** around React Aria Components. It exists
    to: - Explicitly define a client boundary (`"use client"`) - Isolate React
    Aria as an implementation detail - Provide a stable public API and
    consistent developer experience **Form is a minimal, non-visual coordination
    layer.** It handles submission and validation but does not manage field
    state or control layout. For field composition, use
    [Field](/docs/components/field). See the [Forms architecture
    overview](/docs/forms) to understand the complete system.
  </Alert.Description>
</Alert.Root>

## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/form
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: form

```tsx
"use client";

import { Form as RACForm } from "react-aria-components";

export interface FormProps extends React.ComponentProps<typeof RACForm> {}
export function Form(props: FormProps) {
  return <RACForm {...props} data-slot="form" />;
}
```


</Steps>

</Tabs.Content>

</Tabs.Root>

## Overview

Form is a **minimal, non-visual** component that coordinates:

- Form submission via `onSubmit`
- Server-side validation errors via `validationErrors`
- Reset handling via `onReset`

Form does **not**:

- Manage field state
- Control layout
- Replace the [Field](/docs/components/field) component
- Render visual elements or field containers

For layout and field composition, use the [Field](/docs/components/field) component.

### Understanding the architecture

Form is **only** responsible for submission and validation coordination. It does not handle:

- Individual field layout → Use [Field](/docs/components/field)
- Input behavior and accessibility → Use [TextField](/docs/components/textfield) or similar
- Complex form state → See [Forms overview](/docs/forms) for library integrations

**Recommended reading:**

- [Forms architecture overview](/docs/forms) – Complete explanation of the three-layer system
- [Field documentation](/docs/components/field) – The composition root for all form fields

## Anatomy

```tsx
import { Button } from "~/components/ui/button";
import { Field } from "~/components/ui/field";
import { Form } from "~/components/ui/form";
import { Input } from "~/components/ui/input";
import { TextField } from "~/components/ui/text-field";

<Form>
  <Field.Root render={<TextField name="email" isRequired />}>
    <Field.Label>Email</Field.Label>
    <Input />
    <Field.Error />
  </Field.Root>
  <Button type="submit">Submit</Button>
</Form>;
```

## Form Libraries

For complex forms with client-side validation and state management, see the [Forms](/docs/forms) guide:

- [TanStack Form](/docs/forms/tanstack-form) - Headless form state management
- [React Hook Form](/docs/forms/react-hook-form) - Performance-focused forms
- [React Aria](/docs/forms/react-aria) - Native HTML validation

## Examples

### Basic

## Component Preview: textfield-form

> ⚠️ Component 'textfield-form' not found in registry


### Server Validation

Use the `validationErrors` prop to display server-side validation errors.

```tsx
<Form validationErrors={{ email: "This email is already registered." }}>
  <Field.Root render={<TextField name="email" />}>
    <Field.Label>Email</Field.Label>
    <Input />
    <Field.Error />
  </Field.Root>
</Form>
```

### Reset

```tsx
<Form onReset={() => console.log("Form reset")}>
  <Field.Root render={<TextField name="email" />}>
    <Field.Label>Email</Field.Label>
    <Input />
  </Field.Root>
  <Button type="submit">Submit</Button>
  <Button type="reset" variant="outline">
    Reset
  </Button>
</Form>
```

## Props

Form accepts all props from React Aria's [Form](https://react-aria.adobe.com/Form#api).

| Prop                 | Type                                 | Default    | Description                            |
| -------------------- | ------------------------------------ | ---------- | -------------------------------------- |
| `validationErrors`   | `Record<string, string \| string[]>` |            | Server-side validation errors          |
| `validationBehavior` | `"native" \| "aria"`                 | `"native"` | How validation errors are displayed    |
| `onSubmit`           | `(e: FormEvent) => void`             |            | Called when form is submitted          |
| `onReset`            | `(e: FormEvent) => void`             |            | Called when form is reset              |
| `onInvalid`          | `(e: FormEvent) => void`             |            | Called when form has validation errors |

## Field Examples

See the following components for form integration examples:

- [Checkbox](/docs/components/checkbox)
- [Date Field](/docs/components/date-field)
- [Radio Group](/docs/components/radio-group)
- [Select](/docs/components/select)
- [Switch](/docs/components/switch)
- [Textarea](/docs/components/textarea)
- [TextField](/docs/components/textfield)


# Input Group (/docs/components/input-group)

---
title: Input Group
description: Display additional information or actions to an input or textarea.
links:
  docs: https://ui.shadcn.com/docs/components/input-group
---

## Component Preview: input-group-demo

```tsx
import { SearchIcon } from "lucide-react";
import { InputGroup } from "~/components/ui/input-group";

export function InputGroupDemo() {
  return (
    <InputGroup.Root>
      <InputGroup.Input placeholder="Search..." />
      <InputGroup.Addon>
        <SearchIcon />
      </InputGroup.Addon>
      <InputGroup.Addon align="inline-end">
        <InputGroup.Button>Search</InputGroup.Button>
      </InputGroup.Addon>
    </InputGroup.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/input-group
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: input-group

```tsx
// File: index.ts

export * from "./input-group";
export * as InputGroup from "./namespace";
export * from "./styles";


// File: input-group.tsx

"use client";

import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import type { VariantProps } from "cva";
import { composeRenderProps } from "react-aria-components";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { Textarea } from "~/components/ui/textarea";
import { InputGroupStyles } from "./styles";

export interface InputGroupRootProps extends useRender.ComponentProps<"div"> {}

export function InputGroupRoot({
  render,
  className,
  ...props
}: InputGroupRootProps) {
  const defaultProps: useRender.ElementProps<"div"> = {
    className: InputGroupStyles.Root({ className }),
    role: "group",
    ["data-slot" as string]: "input-group-root",
  };

  return useRender({
    defaultTagName: "div",
    render,
    props: mergeProps<"div">(defaultProps, props),
  });
}

export interface InputGroupAddonProps
  extends React.ComponentProps<"div">,
    VariantProps<typeof InputGroupStyles.Addon> {}

export function InputGroupAddon({
  className,
  align = "inline-start",
  ...props
}: InputGroupAddonProps) {
  return (
    // biome-ignore lint/a11y/noNoninteractiveElementInteractions: This is fine for this use case.
    // biome-ignore lint/a11y/useKeyWithClickEvents: This is fine for this use case.
    <div
      className={InputGroupStyles.Addon({ align, className })}
      data-align={align}
      data-slot="input-group-addon"
      onClick={(e) => {
        if ((e.target as HTMLElement).closest("button")) {
          return;
        }
        e.currentTarget.parentElement?.querySelector("input")?.focus();
      }}
      role="group"
      {...props}
    />
  );
}

export interface InputGroupButtonProps
  extends Omit<React.ComponentProps<typeof Button>, "size">,
    VariantProps<typeof InputGroupStyles.Button> {}

export function InputGroupButton({
  className,
  type = "button",
  variant = "ghost",
  size = "xs",
  ...props
}: InputGroupButtonProps) {
  return (
    <Button
      className={composeRenderProps(className, (className) =>
        InputGroupStyles.Button({ size, className })
      )}
      data-size={size}
      type={type}
      variant={variant}
      {...props}
    />
  );
}

export interface InputGroupTextProps extends React.ComponentProps<"span"> {}

export function InputGroupText({ className, ...props }: InputGroupTextProps) {
  return <span className={InputGroupStyles.Text({ className })} {...props} />;
}

export interface InputGroupInputProps
  extends React.ComponentProps<typeof Input> {}

export function InputGroupInput({ className, ...props }: InputGroupInputProps) {
  return (
    <Input
      className={composeRenderProps(className, (className) =>
        InputGroupStyles.Input({ className })
      )}
      data-slot="input-group-control"
      {...props}
    />
  );
}

export interface InputGroupTextareaProps
  extends React.ComponentProps<typeof Textarea> {}

export function InputGroupTextarea({
  className,
  ...props
}: InputGroupTextareaProps) {
  return (
    <Textarea
      className={composeRenderProps(className, (className) =>
        InputGroupStyles.Textarea({ className })
      )}
      data-slot="input-group-control"
      {...props}
    />
  );
}


// File: namespace.ts

export {
  InputGroupAddon as Addon,
  InputGroupButton as Button,
  InputGroupInput as Input,
  InputGroupRoot as Root,
  InputGroupText as Text,
  InputGroupTextarea as Textarea,
} from "./input-group";


// File: styles.ts

import { cva } from "~/lib/cva";

export const InputGroupStyles = {
  Root: cva({
    base: [
      "group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs outline-none transition-[color,box-shadow] dark:bg-input/30",
      "h-9 min-w-0 has-[>textarea]:h-auto",

      // Variants based on alignment.
      "has-[>[data-align=inline-start]]:[&>input]:pl-2",
      "has-[>[data-align=inline-end]]:[&>input]:pr-2",
      "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
      "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",

      // Focus state.
      "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",

      // Error state.
      "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
    ],
  }),
  Addon: cva({
    base: "flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 font-medium text-muted-foreground text-sm group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
    variants: {
      align: {
        "inline-start":
          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
        "inline-end":
          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
        "block-start":
          "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
        "block-end":
          "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
      },
    },
    defaultVariants: {
      align: "inline-start",
    },
  }),
  Button: cva({
    base: "flex items-center gap-2 text-sm shadow-none",
    variants: {
      size: {
        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
        sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
        "icon-xs":
          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
      },
    },
    defaultVariants: {
      size: "xs",
    },
  }),
  Text: cva({
    base: [
      "flex items-center gap-2 text-muted-foreground text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
    ],
  }),
  Input: cva({
    base: [
      "flex-1 rounded-none border-0 bg-transparent shadow-none focus:ring-0 dark:bg-transparent",
    ],
  }),
  Textarea: cva({
    base: [
      "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus:ring-0 dark:bg-transparent",
    ],
  }),
};
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { InputGroup } from "~/components/ui/input-group";

<InputGroup.Root>
  <InputGroup.Input placeholder="Search..." />
  <InputGroup.Addon>
    <SearchIcon />
  </InputGroup.Addon>
  <InputGroup.Addon align="inline-end">
    <InputGroup.Button>Search</InputGroup.Button>
  </InputGroup.Addon>
</InputGroup.Root>;
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import {
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupRoot,
  InputGroupText,
  InputGroupTextarea,
} from "~/components/ui/input-group";

<InputGroupRoot>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupAddon align="inline-end">
    <InputGroupButton>Search</InputGroupButton>
  </InputGroupAddon>
</InputGroupRoot>;
```

</Tabs.Content>

</Tabs.Root>

## Examples

### Icon

## Component Preview: input-group-icon-demo

```tsx
import {
  CheckIcon,
  CreditCardIcon,
  InfoIcon,
  MailIcon,
  SearchIcon,
  StarIcon,
} from "lucide-react";
import { InputGroup } from "~/components/ui/input-group";

export function InputGroupIconDemo() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <InputGroup.Root>
        <InputGroup.Input placeholder="Search..." />
        <InputGroup.Addon>
          <SearchIcon />
        </InputGroup.Addon>
      </InputGroup.Root>
      <InputGroup.Root>
        <InputGroup.Input placeholder="Enter your email" type="email" />
        <InputGroup.Addon>
          <MailIcon />
        </InputGroup.Addon>
      </InputGroup.Root>
      <InputGroup.Root>
        <InputGroup.Input placeholder="Card number" />
        <InputGroup.Addon>
          <CreditCardIcon />
        </InputGroup.Addon>
        <InputGroup.Addon align="inline-end">
          <CheckIcon />
        </InputGroup.Addon>
      </InputGroup.Root>
      <InputGroup.Root>
        <InputGroup.Input placeholder="Card number" />
        <InputGroup.Addon align="inline-end">
          <StarIcon />
          <InfoIcon />
        </InputGroup.Addon>
      </InputGroup.Root>
    </div>
  );
}
```


### Text

Display additional text information alongside inputs.

## Component Preview: input-group-text-demo

```tsx
import { InputGroup } from "~/components/ui/input-group";

export function InputGroupTextDemo() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <InputGroup.Root>
        <InputGroup.Addon>
          <InputGroup.Text>$</InputGroup.Text>
        </InputGroup.Addon>
        <InputGroup.Input placeholder="0.00" />
        <InputGroup.Addon align="inline-end">
          <InputGroup.Text>USD</InputGroup.Text>
        </InputGroup.Addon>
      </InputGroup.Root>
      <InputGroup.Root>
        <InputGroup.Addon>
          <InputGroup.Text>https://</InputGroup.Text>
        </InputGroup.Addon>
        <InputGroup.Input className="pl-0.5!" placeholder="example.com" />
        <InputGroup.Addon align="inline-end">
          <InputGroup.Text>.com</InputGroup.Text>
        </InputGroup.Addon>
      </InputGroup.Root>
      <InputGroup.Root>
        <InputGroup.Input placeholder="Enter your username" />
        <InputGroup.Addon align="inline-end">
          <InputGroup.Text>@company.com</InputGroup.Text>
        </InputGroup.Addon>
      </InputGroup.Root>
      <InputGroup.Root>
        <InputGroup.Textarea placeholder="Enter your message" />
        <InputGroup.Addon align="block-end">
          <InputGroup.Text className="text-muted-foreground text-xs">
            120 characters left
          </InputGroup.Text>
        </InputGroup.Addon>
      </InputGroup.Root>
    </div>
  );
}
```


### Button

Add buttons to perform actions within the input group.

## Component Preview: input-group-button-demo

```tsx
"use client";

import { CheckIcon, CopyIcon, InfoIcon, StarIcon } from "lucide-react";
import { useState } from "react";
import { useCopyToClipboard } from "~/hooks/use-copy-to-clipboard";
import { InputGroup } from "~/components/ui/input-group";
import { Popover } from "~/components/ui/popover";

export function InputGroupButtonDemo() {
  const [copy, isCopied] = useCopyToClipboard();
  const [isFavorite, setIsFavorite] = useState(false);

  return (
    <div className="grid w-full max-w-sm gap-6">
      <InputGroup.Root>
        <InputGroup.Input placeholder="https://x.com/fellipeutaka" readOnly />
        <InputGroup.Addon align="inline-end">
          <InputGroup.Button
            aria-label="Copy"
            // title="Copy"
            onPress={() => {
              copy({
                text: "https://x.com/fellipeutaka",
              });
            }}
            size="icon-xs"
          >
            {isCopied ? <CheckIcon /> : <CopyIcon />}
          </InputGroup.Button>
        </InputGroup.Addon>
      </InputGroup.Root>
      <InputGroup.Root className="[--radius:9999px]">
        <Popover.Root>
          <InputGroup.Addon>
            <InputGroup.Button size="icon-xs" variant="secondary">
              <InfoIcon />
            </InputGroup.Button>
          </InputGroup.Addon>
          <Popover.Content
            className="max-w-[256px] space-y-1 rounded-xl text-sm"
            offset={8}
          >
            <p className="font-medium">Your connection is not secure.</p>
            <p>You should not enter any sensitive information on this site.</p>
          </Popover.Content>
        </Popover.Root>
        <InputGroup.Addon className="pl-1.5 text-muted-foreground">
          https://
        </InputGroup.Addon>
        <InputGroup.Input id="input-secure-19" />
        <InputGroup.Addon align="inline-end">
          <InputGroup.Button
            onClick={() => setIsFavorite((s) => !s)}
            size="icon-xs"
          >
            <StarIcon
              className="data-[favorite=true]:fill-blue-600 data-[favorite=true]:stroke-blue-600"
              data-favorite={isFavorite}
            />
          </InputGroup.Button>
        </InputGroup.Addon>
      </InputGroup.Root>
      <InputGroup.Root>
        <InputGroup.Input placeholder="Type to search..." />
        <InputGroup.Addon align="inline-end">
          <InputGroup.Button variant="secondary">Search</InputGroup.Button>
        </InputGroup.Addon>
      </InputGroup.Root>
    </div>
  );
}
```


### Tooltip

Add tooltips to provide additional context or help.

## Component Preview: input-group-tooltip-demo

```tsx
import { HelpCircleIcon, InfoIcon } from "lucide-react";
import { InputGroup } from "~/components/ui/input-group";
import { Tooltip } from "~/components/ui/tooltip";

export function InputGroupTooltipDemo() {
  return (
    <div className="grid w-full max-w-sm gap-4">
      <InputGroup.Root>
        <InputGroup.Input placeholder="Enter password" type="password" />
        <InputGroup.Addon align="inline-end">
          <Tooltip.Root>
            <InputGroup.Button aria-label="Info" size="icon-xs" variant="ghost">
              <InfoIcon />
            </InputGroup.Button>
            <Tooltip.Content>
              <p>Password must be at least 8 characters</p>

              <Tooltip.Arrow />
            </Tooltip.Content>
          </Tooltip.Root>
        </InputGroup.Addon>
      </InputGroup.Root>
      <InputGroup.Root>
        <InputGroup.Input placeholder="Your email address" />
        <InputGroup.Addon align="inline-end">
          <Tooltip.Root>
            <InputGroup.Button aria-label="Help" size="icon-xs" variant="ghost">
              <HelpCircleIcon />
            </InputGroup.Button>
            <Tooltip.Content>
              <p>We&apos;ll use this to send you notifications</p>

              <Tooltip.Arrow />
            </Tooltip.Content>
          </Tooltip.Root>
        </InputGroup.Addon>
      </InputGroup.Root>
      <InputGroup.Root>
        <InputGroup.Input placeholder="Enter API key" />
        <Tooltip.Root>
          <InputGroup.Addon>
            <InputGroup.Button aria-label="Help" size="icon-xs" variant="ghost">
              <HelpCircleIcon />
            </InputGroup.Button>
          </InputGroup.Addon>
          <Tooltip.Content placement="left">
            <p>Click for help with API keys</p>

            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip.Root>
      </InputGroup.Root>
    </div>
  );
}
```


### Textarea

Input groups also work with textarea components. Use `block-start` or `block-end` for alignment.

## Component Preview: input-group-textarea-demo

```tsx
import { CopyIcon, CornerDownLeftIcon, RefreshCwIcon } from "lucide-react";
import { Icons } from "~/components/icons";
import { InputGroup } from "~/components/ui/input-group";

export function InputGroupTextareaDemo() {
  return (
    <div className="grid w-full max-w-md gap-4">
      <InputGroup.Root>
        <InputGroup.Textarea
          className="min-h-50"
          id="textarea-code-32"
          placeholder="console.log('Hello, world!');"
        />
        <InputGroup.Addon align="block-end" className="border-t">
          <InputGroup.Text>Line 1, Column 1</InputGroup.Text>
          <InputGroup.Button className="ml-auto" size="sm" variant="default">
            Run <CornerDownLeftIcon />
          </InputGroup.Button>
        </InputGroup.Addon>
        <InputGroup.Addon align="block-start" className="border-b">
          <InputGroup.Text className="font-medium font-mono">
            <Icons.JavaScript />
            script.js
          </InputGroup.Text>
          <InputGroup.Button className="ml-auto" size="icon-xs">
            <RefreshCwIcon />
          </InputGroup.Button>
          <InputGroup.Button size="icon-xs" variant="ghost">
            <CopyIcon />
          </InputGroup.Button>
        </InputGroup.Addon>
      </InputGroup.Root>
    </div>
  );
}
```


### Spinner

Show loading indicators while processing input.

## Component Preview: input-group-spinner-demo

```tsx
import { LoaderIcon } from "lucide-react";
import { InputGroup } from "~/components/ui/input-group";
import { Spinner } from "~/components/ui/spinner";

export function InputGroupSpinnerDemo() {
  return (
    <div className="grid w-full max-w-sm gap-4">
      <InputGroup.Root data-disabled>
        <InputGroup.Input disabled placeholder="Searching..." />
        <InputGroup.Addon align="inline-end">
          <Spinner />
        </InputGroup.Addon>
      </InputGroup.Root>
      <InputGroup.Root data-disabled>
        <InputGroup.Input disabled placeholder="Processing..." />
        <InputGroup.Addon>
          <Spinner />
        </InputGroup.Addon>
      </InputGroup.Root>
      <InputGroup.Root data-disabled>
        <InputGroup.Input disabled placeholder="Saving changes..." />
        <InputGroup.Addon align="inline-end">
          <InputGroup.Text>Saving...</InputGroup.Text>
          <Spinner />
        </InputGroup.Addon>
      </InputGroup.Root>
      <InputGroup.Root data-disabled>
        <InputGroup.Input disabled placeholder="Refreshing data..." />
        <InputGroup.Addon>
          <LoaderIcon className="animate-spin" />
        </InputGroup.Addon>
        <InputGroup.Addon align="inline-end">
          <InputGroup.Text className="text-muted-foreground">
            Please wait...
          </InputGroup.Text>
        </InputGroup.Addon>
      </InputGroup.Root>
    </div>
  );
}
```


### Label

Add labels within input groups to improve accessibility.

## Component Preview: input-group-label-demo

```tsx
import { InfoIcon } from "lucide-react";
import { InputGroup } from "~/components/ui/input-group";
import { Label } from "~/components/ui/label";
import { Tooltip } from "~/components/ui/tooltip";

export function InputGroupLabelDemo() {
  return (
    <div className="grid w-full max-w-sm gap-4">
      <InputGroup.Root>
        <InputGroup.Input id="email" placeholder="shadcn" />
        <InputGroup.Addon>
          <Label htmlFor="email">@</Label>
        </InputGroup.Addon>
      </InputGroup.Root>
      <InputGroup.Root>
        <InputGroup.Input id="email-2" placeholder="shadcn@vercel.com" />
        <InputGroup.Addon align="block-start">
          <Label className="text-foreground" htmlFor="email-2">
            Email
          </Label>
          <Tooltip.Root>
            <InputGroup.Button
              aria-label="Help"
              className="ml-auto rounded-full"
              size="icon-xs"
              variant="ghost"
            >
              <InfoIcon />
            </InputGroup.Button>

            <Tooltip.Content>
              <p>We&apos;ll use this to send you notifications</p>

              <Tooltip.Arrow />
            </Tooltip.Content>
          </Tooltip.Root>
        </InputGroup.Addon>
      </InputGroup.Root>
    </div>
  );
}
```


### Dropdown

Pair input groups with dropdown menus for complex interactions.

## Component Preview: input-group-dropdown-demo

```tsx
"use client";

import { ChevronDownIcon } from "lucide-react";
import { useState } from "react";
import { InputGroup } from "~/components/ui/input-group";
import { Menu } from "~/components/ui/menu";
import { Popover } from "~/components/ui/popover";

export function InputGroupDropdownDemo() {
  const [selectedDomain, setSelectedDomain] = useState(".com");

  return (
    <InputGroup.Root>
      <InputGroup.Input placeholder="example" />
      <InputGroup.Addon align="inline-end">
        <Menu.Root>
          <InputGroup.Button>
            {selectedDomain}
            <ChevronDownIcon />
          </InputGroup.Button>
          <Popover.Content>
            <Menu.Content>
              <Menu.Item onAction={() => setSelectedDomain(".com")}>
                .com
              </Menu.Item>
              <Menu.Item onAction={() => setSelectedDomain(".org")}>
                .org
              </Menu.Item>
              <Menu.Item onAction={() => setSelectedDomain(".net")}>
                .net
              </Menu.Item>
              <Menu.Item onAction={() => setSelectedDomain(".io")}>
                .io
              </Menu.Item>
            </Menu.Content>
          </Popover.Content>
        </Menu.Root>
      </InputGroup.Addon>
    </InputGroup.Root>
  );
}
```


### Button Group

Wrap input groups with button groups to create prefixes and suffixes.

## Component Preview: input-group-button-group-demo

```tsx
"use client";

import { Link2Icon } from "lucide-react";
import { ButtonGroup } from "~/components/ui/button-group";
import { InputGroup } from "~/components/ui/input-group";
import { Label } from "~/components/ui/label";

export function InputGroupButtonGroupDemo() {
  return (
    <div className="grid w-full max-w-sm gap-6">
      <ButtonGroup.Root>
        <ButtonGroup.Text render={<Label htmlFor="url" />}>
          https://
        </ButtonGroup.Text>
        <InputGroup.Root>
          <InputGroup.Input id="url" />
          <InputGroup.Addon align="inline-end">
            <Link2Icon />
          </InputGroup.Addon>
        </InputGroup.Root>
        <ButtonGroup.Text>.com</ButtonGroup.Text>
      </ButtonGroup.Root>
    </div>
  );
}
```


## API Reference

### InputGroup.Root

The main component that wraps inputs and addons.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<InputGroup.Root>
  <InputGroup.Input />
  <InputGroup.Addon />
</InputGroup.Root>
```

### InputGroup.Addon

Displays icons, text, buttons, or other content alongside inputs.

<Alert.Root>
  <AlertIcon variant="info" />
  <Alert.Description>
    For proper focus navigation, the `InputGroup.Addon` component should be
    placed after the input. Set the `align` prop to position the addon.
  </Alert.Description>
</Alert.Root>

| Prop        | Type                                                             | Default          |
| ----------- | ---------------------------------------------------------------- | ---------------- |
| `align`     | `"inline-start" \| "inline-end" \| "block-start" \| "block-end"` | `"inline-start"` |
| `className` | `string`                                                         |                  |

```tsx
<InputGroup.Addon align="inline-end">
  <SearchIcon />
</InputGroup.Addon>
```

For `InputGroup.Input`, use the `inline-start` or `inline-end` alignment. For `InputGroup.Textarea`, use the `block-start` or `block-end` alignment.

The `InputGroup.Addon` component can have multiple `InputGroup.Button` components and icons.

```tsx
<InputGroup.Addon>
  <InputGroup.Button>Button</InputGroup.Button>
  <InputGroup.Button>Button</InputGroup.Button>
</InputGroup.Addon>
```

### InputGroup.Button

Displays buttons within input groups.

| Prop        | Type                                                                          | Default   |
| ----------- | ----------------------------------------------------------------------------- | --------- |
| `size`      | `"xs" \| "icon-xs" \| "sm" \| "icon-sm"`                                      | `"xs"`    |
| `variant`   | `"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"` | `"ghost"` |
| `className` | `string`                                                                      |           |

```tsx
<InputGroup.Button>Button</InputGroup.Button>
<InputGroup.Button size="icon-xs" aria-label="Copy">
  <CopyIcon />
</InputGroup.Button>
```

### InputGroup.Input

Replacement for `Input` when building input groups. This component has the input group styles pre-applied and uses the unified `data-slot="input-group-control"` for focus state handling.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

All other props are passed through to the underlying `Input` component.

```tsx
<InputGroup.Root>
  <InputGroup.Input placeholder="Enter text..." />
  <InputGroup.Addon>
    <SearchIcon />
  </InputGroup.Addon>
</InputGroup.Root>
```

### InputGroup.Textarea

Replacement for `Textarea` when building input groups. This component has the textarea group styles pre-applied and uses the unified `data-slot="input-group-control"` for focus state handling.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

All other props are passed through to the underlying `Textarea` component.

```tsx
<InputGroup.Root>
  <InputGroup.Textarea placeholder="Enter message..." />
  <InputGroup.Addon align="block-end">
    <InputGroup.Button>Send</InputGroup.Button>
  </InputGroup.Addon>
</InputGroup.Root>
```


# Input OTP (/docs/components/input-otp)

---
title: Input OTP
description: Accessible one-time password component with copy paste functionality.
links:
  docs: https://input-otp.rodz.dev
---

## Component Preview: input-otp-demo

```tsx
import { InputOTP } from "~/components/ui/input-otp";

export function InputOTPDemo() {
  return (
    <InputOTP.Root maxLength={6}>
      <InputOTP.Group>
        <InputOTP.Slot index={0} />
        <InputOTP.Slot index={1} />
        <InputOTP.Slot index={2} />
      </InputOTP.Group>
      <InputOTP.Separator />
      <InputOTP.Group>
        <InputOTP.Slot index={3} />
        <InputOTP.Slot index={4} />
        <InputOTP.Slot index={5} />
      </InputOTP.Group>
    </InputOTP.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/input-otp
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install input-otp
```

<Step>Copy and paste the following code into your project.</Step>

## Component Source: input-otp

```tsx
// File: index.ts

export * from "./input-otp";
export * as InputOTP from "./namespace";
export * from "./styles";


// File: input-otp.tsx

"use client";

import { OTPInput, OTPInputContext } from "input-otp";
import { MinusIcon } from "lucide-react";

import { use } from "react";
import { InputOTPStyles } from "./styles";

export type InputOTPRootProps = React.ComponentProps<typeof OTPInput> & {
  containerClassName?: string;
};

export function InputOTPRoot({
  className,
  containerClassName,
  ...props
}: InputOTPRootProps) {
  return (
    <OTPInput
      className={InputOTPStyles.Root({ className })}
      containerClassName={InputOTPStyles.Container({
        class: containerClassName,
      })}
      data-slot="input-otp"
      {...props}
    />
  );
}

export interface InputOTPGroupProps extends React.ComponentProps<"div"> {}

export function InputOTPGroup({ className, ...props }: InputOTPGroupProps) {
  return (
    <div
      className={InputOTPStyles.Group({ className })}
      data-slot="input-otp-group"
      {...props}
    />
  );
}

export interface InputOTPSlotProps extends React.ComponentProps<"div"> {
  index: number;
}

export function InputOTPSlot({
  index,
  className,
  ...props
}: InputOTPSlotProps) {
  const inputOTPContext = use(OTPInputContext);
  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};

  return (
    <div
      className={InputOTPStyles.Slot({ className })}
      data-active={isActive}
      data-slot="input-otp-slot"
      {...props}
    >
      {char}
      {hasFakeCaret && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
        </div>
      )}
    </div>
  );
}

export interface InputOTPSeparatorProps extends React.ComponentProps<"div"> {}

export function InputOTPSeparator(props: InputOTPSeparatorProps) {
  return (
    <div
      data-slot="input-otp-separator"
      // biome-ignore lint/a11y/useAriaPropsForRole: This is a decorative separator
      role="separator"
      tabIndex={-1}
      {...props}
    >
      <MinusIcon />
    </div>
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const InputOTPStyles = {
  Container: cva({
    base: ["flex items-center gap-2 has-disabled:opacity-50"],
  }),
  Group: cva({
    base: ["flex items-center"],
  }),
  Root: cva({
    base: ["disabled:cursor-not-allowed"],
  }),
  Slot: cva({
    base: [
      "relative flex size-9 items-center justify-center border-input border-y border-r text-sm shadow-xs outline-none transition-all",
      "first:rounded-l-md first:border-l",
      "last:rounded-r-md",
      "aria-invalid:border-destructive",
      "data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50",
      "data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20",
      "dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
    ],
  }),
};


// File: namespace.ts

export {
  InputOTPGroup as Group,
  InputOTPRoot as Root,
  InputOTPSeparator as Separator,
  InputOTPSlot as Slot,
} from "./input-otp";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { InputOTP } from "~/components/ui/input-otp";

<InputOTP.Root maxLength={6}>
  <InputOTP.Group>
    <InputOTP.Slot index={0} />
    <InputOTP.Slot index={1} />
    <InputOTP.Slot index={2} />
  </InputOTP.Group>
  <InputOTP.Separator />
  <InputOTP.Group>
    <InputOTP.Slot index={3} />
    <InputOTP.Slot index={4} />
    <InputOTP.Slot index={5} />
  </InputOTP.Group>
</InputOTP.Root>;
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import {
  InputOTPGroup,
  InputOTPRoot,
  InputOTPSeparator,
  InputOTPSlot,
} from "~/registry/ui/input-otp";

<InputOTPRoot maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTPRoot>;
```

</Tabs.Content>

</Tabs.Root>

## Examples

### Pattern

Use the `pattern` prop to define a custom pattern for the OTP input.

## Component Preview: input-otp-pattern-demo

```tsx
"use client";

import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
import { InputOTP } from "~/components/ui/input-otp";

export function InputOTPPatternDemo() {
  return (
    <InputOTP.Root maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
      <InputOTP.Group>
        <InputOTP.Slot index={0} />
        <InputOTP.Slot index={1} />
        <InputOTP.Slot index={2} />
        <InputOTP.Slot index={3} />
        <InputOTP.Slot index={4} />
        <InputOTP.Slot index={5} />
      </InputOTP.Group>
    </InputOTP.Root>
  );
}
```


```tsx
// [!code highlight]
import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"

...

<InputOTP
  maxLength={6}
  // [!code highlight]
  pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    {/* ... */}
  </InputOTPGroup>
</InputOTP>
```

### Separator

You can use the `<InputOTPSeparator />{:tsx}` component to add a separator between the input groups.

## Component Preview: input-otp-separator-demo

```tsx
import { InputOTP } from "~/components/ui/input-otp";

export function InputOTPSeparatorDemo() {
  return (
    <InputOTP.Root maxLength={6}>
      <InputOTP.Group>
        <InputOTP.Slot index={0} />
        <InputOTP.Slot index={1} />
      </InputOTP.Group>
      <InputOTP.Separator />
      <InputOTP.Group>
        <InputOTP.Slot index={2} />
        <InputOTP.Slot index={3} />
      </InputOTP.Group>
      <InputOTP.Separator />
      <InputOTP.Group>
        <InputOTP.Slot index={4} />
        <InputOTP.Slot index={5} />
      </InputOTP.Group>
    </InputOTP.Root>
  );
}
```


```tsx showLineNumbers {4,15}
import {
  InputOTP,
  InputOTPGroup,
  // [!code highlight]
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/ui/input-otp"

...

<InputOTP maxLength={4}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
  </InputOTPGroup>
  // [!code highlight]
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={2} />
    <InputOTPSlot index={3} />
  </InputOTPGroup>
</InputOTP>
```

### Controlled

You can use the `value` and `onChange` props to control the input value.

## Component Preview: input-otp-controlled-demo

```tsx
"use client";

import { useState } from "react";
import { InputOTP } from "~/components/ui/input-otp";

export function InputOTPControlledDemo() {
  const [value, setValue] = useState("");

  return (
    <div className="space-y-2">
      <InputOTP.Root
        maxLength={6}
        onChange={(value) => setValue(value)}
        value={value}
      >
        <InputOTP.Group>
          <InputOTP.Slot index={0} />
          <InputOTP.Slot index={1} />
          <InputOTP.Slot index={2} />
          <InputOTP.Slot index={3} />
          <InputOTP.Slot index={4} />
          <InputOTP.Slot index={5} />
        </InputOTP.Group>
      </InputOTP.Root>
      <p className="text-center text-sm">
        {value === "" ? (
          <>Enter your one-time password.</>
        ) : (
          <>You entered: {value}</>
        )}
      </p>
    </div>
  );
}
```


### Form

## Component Preview: input-otp-form-demo

> ⚠️ Component 'input-otp-form-demo' not found in registry



# Input (/docs/components/input)

---
title: Input
description: Displays a form input field or a component that looks like an input field.
links:
  docs: https://react-aria.adobe.com/TextField#text-field
---

## Component Preview: input-demo

```tsx
import { Input } from "~/components/ui/input";

export function InputDemo() {
  return <Input placeholder="Email" type="email" />;
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/input
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: input

```tsx
// File: index.ts

export * from "./input";
export * from "./styles";


// File: input.tsx

"use client";

import { composeRenderProps, Input as RACInput } from "react-aria-components";
import { InputStyles } from "./styles";

export interface InputProps extends React.ComponentProps<typeof RACInput> {}

export function Input({ className, ...props }: InputProps) {
  return (
    <RACInput
      className={composeRenderProps(className, (className) =>
        InputStyles({ className })
      )}
      data-slot="input"
      {...props}
    />
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const InputStyles = cva({
  base: [
    "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs outline-none",
    "transition-[color,box-shadow]",
    "selection:bg-primary selection:text-primary-foreground",
    "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground",
    "file:text-sm placeholder:text-muted-foreground",
    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
    "md:text-sm dark:bg-input/30",
    "focus:border-ring focus:ring-[3px] focus:ring-ring/50",
    "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
    "invalid:border-destructive invalid:ring-destructive/20 dark:invalid:ring-destructive/40",

    // For search field
    "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none",
  ],
});
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

```tsx
import { Input } from "~/components/ui/input";

<Input />;
```

## Examples

### File

## Component Preview: input-file-demo

```tsx
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";

export function InputFileDemo() {
  return (
    <div className="grid w-full max-w-sm items-center gap-3">
      <Label htmlFor="picture">Picture</Label>
      <Input id="picture" type="file" />
    </div>
  );
}
```


<Alert.Root>
  <AlertIcon variant="info" />
  <Alert.Description>
    For more customizable file upload components, see [File
    Trigger](/docs/components/file-trigger) or
    [Dropzone](/docs/components/dropzone).
  </Alert.Description>
</Alert.Root>

### Disabled

## Component Preview: input-disabled-demo

```tsx
import { Input } from "~/components/ui/input";

export function InputDisabledDemo() {
  return <Input disabled placeholder="Email" type="email" />;
}
```


### With Label

## Component Preview: input-with-label-demo

```tsx
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";

export function InputWithLabelDemo() {
  return (
    <div className="grid w-full max-w-sm items-center gap-3">
      <Label htmlFor="email">Email</Label>
      <Input id="email" placeholder="Email" type="email" />
    </div>
  );
}
```


<Alert.Root>
  <AlertIcon variant="info" />
  <Alert.Description>
    For better form integration with labels, descriptions, and error messages,
    use [Field](/docs/components/field#input) component with TextField.
  </Alert.Description>
</Alert.Root>

### With Button

## Component Preview: input-with-button-demo

```tsx
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";

export function InputWithButtonDemo() {
  return (
    <div className="flex w-full max-w-sm items-center gap-2">
      <Input placeholder="Email" type="email" />
      <Button type="submit" variant="outline">
        Subscribe
      </Button>
    </div>
  );
}
```



# Label (/docs/components/label)

---
title: Label
description: Renders an accessible label associated with controls.
links:
  docs: https://react-aria.adobe.com/useLabel
---

## Component Preview: select-with-label-demo

```tsx
import { Label } from "~/components/ui/label";
import { Listbox } from "~/components/ui/list-box";
import { Popover } from "~/components/ui/popover";

import { Select } from "~/components/ui/select";

export function SelectWithLabelDemo() {
  return (
    <Select.Root aria-label="Fruits" placeholder="Select a fruit">
      <Label>Choose a fruit</Label>

      <Select.Trigger className="w-[180px]">
        <Select.Value />
      </Select.Trigger>
      <Popover.Content>
        <Listbox.Root>
          <Listbox.Label>Fruits</Listbox.Label>
          <Listbox.Item id="apple">Apple</Listbox.Item>
          <Listbox.Item id="banana">Banana</Listbox.Item>
          <Listbox.Item id="blueberry">Blueberry</Listbox.Item>
          <Listbox.Item id="grapes" isDisabled>
            Grapes
          </Listbox.Item>
          <Listbox.Item id="pineapple">Pineapple</Listbox.Item>
        </Listbox.Root>
      </Popover.Content>
    </Select.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/label
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: label

```tsx
// File: index.ts

export * from "./label";
export * from "./styles";


// File: label.tsx

"use client";

import { Label as RACLabel } from "react-aria-components";
import { LabelStyles } from "./styles";

export interface LabelProps extends React.ComponentProps<typeof RACLabel> {}

export function Label({ className, ...props }: LabelProps) {
  return (
    <RACLabel
      className={LabelStyles({ className })}
      data-slot="label"
      {...props}
    />
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const LabelStyles = cva({
  base: [
    "flex select-none items-center gap-2 font-medium text-sm leading-none",
    "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
    "group-disabled:pointer-events-none group-disabled:opacity-50",
  ],
});
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

```tsx
import { Label } from "~/components/ui/label";

<Label>Label</Label>;
```


# List Box (/docs/components/list-box)

---
title: List Box
description: A list of options and allows a user to select one or more of them.
links:
  docs: https://react-aria.adobe.com/ListBox
---

## Component Preview: list-box-demo

```tsx
"use client";

import { Listbox } from "~/components/ui/list-box";

const rockPopBands = [
  { id: "1", name: "Nirvana" },
  { id: "2", name: "Radiohead" },
  { id: "3", name: "Foo Fighters" },
  { id: "4", name: "Arctic Monkeys" },
  { id: "5", name: "The Strokes" },
];

export function ListBoxDemo() {
  return (
    <Listbox.Root
      aria-label="Bands"
      items={rockPopBands}
      selectionMode="single"
    >
      {(item) => <Listbox.Item id={item.id}>{item.name}</Listbox.Item>}
    </Listbox.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/list-box
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: list-box

```tsx
// File: index.ts

export * from "./list-box";
export * as Listbox from "./namespace";
export * from "./styles";


// File: list-box.tsx

"use client";

import { CheckIcon } from "lucide-react";
import {
  composeRenderProps,
  Header,
  ListBox,
  ListBoxItem,
  ListBoxLoadMoreItem,
  ListBoxSection,
} from "react-aria-components";
import { ListboxStyles } from "./styles";

export interface ListboxRootProps<T extends object>
  extends React.ComponentProps<typeof ListBox<T>> {}

export function ListboxRoot<T extends object>({
  className,
  ...props
}: ListboxRootProps<T>) {
  return (
    <ListBox
      className={composeRenderProps(className, (className) =>
        ListboxStyles.Root({ className })
      )}
      data-slot="listbox-root"
      {...props}
    />
  );
}

export interface ListboxItemProps<T extends object>
  extends React.ComponentProps<typeof ListBoxItem<T>> {}

export function ListboxItem<T extends object>({
  className,
  children,
  textValue,
  ...props
}: ListboxItemProps<T>) {
  const _textValue =
    (textValue ?? typeof children === "string") ? String(children) : undefined;

  return (
    <ListBoxItem
      className={composeRenderProps(className, (className) =>
        ListboxStyles.Item({ className })
      )}
      data-slot="listbox-item"
      textValue={_textValue}
      {...props}
    >
      {composeRenderProps(children, (children, values) => (
        <>
          {values.isSelected && (
            <span className="absolute right-2 flex size-3.5 items-center justify-center">
              <CheckIcon className="size-4" />
            </span>
          )}

          {children}
        </>
      ))}
    </ListBoxItem>
  );
}

export interface ListboxEmptyProps extends React.ComponentProps<"div"> {}

export function ListboxEmpty({ className, ...props }: ListboxEmptyProps) {
  return (
    <div
      className={ListboxStyles.Empty({ className })}
      data-slot="listbox-empty"
      {...props}
    />
  );
}

export interface ListboxGroupProps<T extends object>
  extends React.ComponentProps<typeof ListBoxSection<T>> {}

export function ListboxGroup<T extends object>(props: ListboxGroupProps<T>) {
  return <ListBoxSection data-slot="listbox-group" {...props} />;
}

export interface ListboxLabelProps
  extends React.ComponentProps<typeof Header> {}

export function ListboxLabel({ className, ...props }: ListboxLabelProps) {
  return (
    <Header
      className={ListboxStyles.Label({ className })}
      data-slot="listbox-label"
      {...props}
    />
  );
}

export interface ListboxLoadMoreItemProps
  extends React.ComponentProps<typeof ListBoxLoadMoreItem> {}

export function ListboxLoadMoreItem({
  className,
  ...props
}: ListboxLoadMoreItemProps) {
  return (
    <ListBoxLoadMoreItem
      className={ListboxStyles.Item({
        className: ["justify-center px-0", className],
      })}
      data-slot="listbox-load-more-item"
      {...props}
    />
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const ListboxStyles = {
  Empty: cva({
    base: ["pointer-events-none py-6 text-center text-sm"],
  }),
  Item: cva({
    base: [
      "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden",
      "focus:bg-accent focus:text-accent-foreground",
      "disabled:pointer-events-none disabled:opacity-50",
      "[&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
      "*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
    ],
  }),
  Label: cva({
    base: ["px-2 py-1.5 font-medium text-muted-foreground text-xs"],
  }),
  Root: cva({
    base: [
      "relative z-50 min-w-32 overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-hidden",
    ],
  }),
};


// File: namespace.ts

export {
  ListboxEmpty as Empty,
  ListboxGroup as Group,
  ListboxItem as Item,
  ListboxLabel as Label,
  ListboxLoadMoreItem as LoadMoreItem,
  ListboxRoot as Root,
} from "./list-box";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { ListBox } from "~/components/ui/list-box";

<ListBox.Root>
  {(item) => <ListBox.Item id={item.id}>{item.name}</ListBox.Item>}
</ListBox.Root>;
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import { ListBoxItem, ListBoxRoot } from "~/components/ui/list-box";

<ListBoxRoot>
  {(item) => <ListBoxItem id={item.id}>{item.name}</ListBoxItem>}
</ListBoxRoot>;
```

</Tabs.Content>

</Tabs.Root>

## Examples

### Multiple

## Component Preview: list-box-multiple

> ⚠️ Component 'list-box-multiple' not found in registry


### Details

## Component Preview: list-box-details

> ⚠️ Component 'list-box-details' not found in registry


### Section

## Component Preview: list-box-section

> ⚠️ Component 'list-box-section' not found in registry



# Menu (/docs/components/menu)

---
title: Menu
description: A list of actions or options that a user can choose.
links:
  docs: https://react-aria.adobe.com/Menu
---

## Component Preview: menu-demo

```tsx
import { Button } from "~/components/ui/button/button";
import { Keyboard } from "~/components/ui/keyboard";
import { Menu } from "~/components/ui/menu";
import { Popover } from "~/components/ui/popover";

export function MenuDemo() {
  return (
    <Menu.Root>
      <Button variant="outline">Open</Button>

      <Popover.Content placement="bottom start">
        <Menu.Content className="w-56">
          <Menu.Label>My Account</Menu.Label>
          <Menu.Group>
            <Menu.Item textValue="Profile">
              Profile
              <Keyboard variant="menu">⇧⌘P</Keyboard>
            </Menu.Item>
            <Menu.Item textValue="Billing">
              Billing
              <Keyboard variant="menu">⌘B</Keyboard>
            </Menu.Item>
            <Menu.Item textValue="Settings">
              Settings
              <Keyboard variant="menu">⌘S</Keyboard>
            </Menu.Item>
            <Menu.Item textValue="Keyboard shortcuts">
              Keyboard shortcuts
              <Keyboard variant="menu">⌘K</Keyboard>
            </Menu.Item>
          </Menu.Group>
          <Menu.Separator />
          <Menu.Group>
            <Menu.Item textValue="Team">Team</Menu.Item>
            <Menu.Sub>
              <Menu.Item textValue="Invite users">Invite users</Menu.Item>
              <Popover.Content>
                <Menu.Content>
                  <Menu.Item textValue="Email">Email</Menu.Item>
                  <Menu.Item textValue="Message">Message</Menu.Item>
                  <Menu.Separator />
                  <Menu.Item textValue="More">More...</Menu.Item>
                </Menu.Content>
              </Popover.Content>
            </Menu.Sub>
            <Menu.Item textValue="New Team">
              New Team
              <Keyboard variant="menu">⌘+T</Keyboard>
            </Menu.Item>
          </Menu.Group>
          <Menu.Separator />
          <Menu.Item>GitHub</Menu.Item>
          <Menu.Item>Support</Menu.Item>
          <Menu.Item isDisabled>API</Menu.Item>
          <Menu.Separator />
          <Menu.Item textValue="Log out" variant="destructive">
            Log out
            <Keyboard variant="menu">⇧⌘Q</Keyboard>
          </Menu.Item>
        </Menu.Content>
      </Popover.Content>
    </Menu.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/menu
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: menu

```tsx
// File: index.ts

export * from "./menu";
export * as Menu from "./namespace";
export * from "./styles";


// File: menu.tsx

"use client";

import type { VariantProps } from "cva";
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
import {
  Button,
  composeRenderProps,
  Header,
  MenuItem as Item,
  Menu,
  MenuSection,
  MenuTrigger as Root,
  Separator,
  SubmenuTrigger,
} from "react-aria-components";

import { cn } from "~/lib/cva";
import { MenuStyles } from "./styles";

export interface MenuRootProps extends React.ComponentProps<typeof Root> {}

export function MenuRoot(props: MenuRootProps) {
  return <Root data-slot="menu-root" {...props} />;
}

export interface MenuTriggerProps extends React.ComponentProps<typeof Button> {}

export function MenuTrigger(props: MenuTriggerProps) {
  return <Button data-slot="menu-trigger" {...props} />;
}

export interface MenuContentProps<T extends object>
  extends React.ComponentProps<typeof Menu<T>>,
    VariantProps<typeof MenuStyles.Content> {}

export function MenuContent<T extends object>({
  className,
  variant,
  ...props
}: MenuContentProps<T>) {
  return (
    <Menu
      className={composeRenderProps(className, (className) =>
        MenuStyles.Content({ className, variant })
      )}
      data-slot="menu-content"
      {...props}
    />
  );
}

export interface MenuGroupProps
  extends React.ComponentProps<typeof MenuSection> {}

export function MenuGroup(props: MenuGroupProps) {
  return <MenuSection data-slot="menu-group" {...props} />;
}

export interface MenuItemProps
  extends React.ComponentProps<typeof Item>,
    VariantProps<typeof MenuStyles.Item> {}

export function MenuItem({
  className,
  inset,
  variant,
  children,
  ...props
}: MenuItemProps) {
  return (
    <Item
      className={composeRenderProps(className, (className) =>
        MenuStyles.Item({ className, inset, variant })
      )}
      data-inset={inset}
      data-slot="menu-item"
      {...props}
    >
      {composeRenderProps(children, (children, values) => (
        <>
          <span
            className="flex size-3.5 items-center justify-center empty:hidden"
            data-slot="menu-item-indicator"
          >
            {values.selectionMode === "single" && (
              <CircleIcon
                className="size-2 fill-current text-current opacity-0 transition-opacity group-selected:opacity-100"
                data-slot="indicator"
              />
            )}

            {values.selectionMode === "multiple" && (
              <CheckIcon
                className="size-4 text-current opacity-0 transition-opacity group-selected:opacity-100"
                data-slot="checked-icon"
              />
            )}
          </span>

          {children}
          {values.hasSubmenu && (
            <ChevronRightIcon className="ml-auto size-4" data-slot="chevron" />
          )}
        </>
      ))}
    </Item>
  );
}

export interface MenuLabelProps extends React.ComponentProps<typeof Header> {
  inset?: boolean;
}

export function MenuLabel({ className, inset, ...props }: MenuLabelProps) {
  return (
    <Header
      className={cn(
        "px-2 py-1.5 font-medium text-sm data-[inset]:pl-8",
        className
      )}
      data-inset={inset}
      data-slot="menu-label"
      {...props}
    />
  );
}

export interface MenuSeparatorProps
  extends React.ComponentProps<typeof Separator> {}

export function MenuSeparator({ className, ...props }: MenuSeparatorProps) {
  return (
    <Separator
      className={cn("-mx-1 my-1 h-px bg-border", className)}
      data-slot="menu-separator"
      {...props}
    />
  );
}

export interface MenuSubProps
  extends React.ComponentProps<typeof SubmenuTrigger> {}

export function MenuSub(props: MenuSubProps) {
  return <SubmenuTrigger data-slot="menu-sub" {...props} />;
}

export interface MenuEmptyProps extends React.ComponentProps<"div"> {}

export function MenuEmpty({ className, ...props }: MenuEmptyProps) {
  return (
    <div
      className={MenuStyles.Empty({ className })}
      data-slot="menu-empty"
      {...props}
    />
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const MenuStyles = {
  Content: cva({
    base: [
      "z-50 min-w-32 overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none",
    ],
    variants: {
      variant: {
        command: [
          "max-h-75 border-none",
          "**:data-[slot=menu-item]:py-3",
          "**:data-[slot=menu-label]:text-muted-foreground **:data-[slot=menu-label]:text-xs",
        ],
      },
    },
  }),
  Empty: cva({
    base: ["py-6 text-center text-sm"],
  }),
  Item: cva({
    base: [
      "group relative flex select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
      "outline-hidden focus:bg-accent focus:text-accent-foreground",
      "disabled:pointer-events-none disabled:opacity-50",
      "[&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
    ],
    variants: {
      inset: {
        true: "pl-8",
      },
      variant: {
        destructive: [
          "*:[svg]:!text-destructive text-destructive focus:bg-destructive/10",
          "focus:text-destructive dark:focus:bg-destructive/20",
        ],
      },
    },
  }),
};


// File: namespace.ts

export {
  MenuContent as Content,
  MenuEmpty as Empty,
  MenuGroup as Group,
  MenuItem as Item,
  MenuLabel as Label,
  MenuRoot as Root,
  MenuSeparator as Separator,
  MenuSub as Sub,
  MenuTrigger as Trigger,
} from "./menu";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

```tsx
import { Menu } from "~/components/ui/menu";

<Menu.Root>
  <Button variant="outline">Open</Button>

  <Popover.Content>
    <Menu.Content>
      <Menu.Item>Inbox</Menu.Item>
      <Menu.Item>Sent</Menu.Item>
      <Menu.Item>New Message</Menu.Item>
    </Menu.Content>
  </Popover.Content>
</Menu.Root>;
```

## Examples

### Checkboxes

## Component Preview: menu-checkboxes-demo

```tsx
"use client";

import {
  CreditCardIcon,
  LogOutIcon,
  Settings2Icon,
  UserIcon,
} from "lucide-react";
import { useState } from "react";
import type { Selection } from "react-aria-components";
import { Button } from "~/components/ui/button/button";
import { Menu } from "~/components/ui/menu";
import { Popover } from "~/components/ui/popover";

export function MenuCheckboxesDemo() {
  const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([]));

  return (
    <Menu.Root>
      <Button variant="outline">Checkboxes</Button>

      <Popover.Content placement="bottom start">
        <Menu.Content className="w-56">
          <Menu.Group>
            <Menu.Label>Account</Menu.Label>
            <Menu.Item>
              <UserIcon /> Profile
            </Menu.Item>
            <Menu.Item>
              <CreditCardIcon /> Billing
            </Menu.Item>
            <Menu.Item>
              <Settings2Icon /> Settings
            </Menu.Item>
          </Menu.Group>
          <Menu.Separator />
          <Menu.Group
            onSelectionChange={setSelectedKeys}
            selectedKeys={selectedKeys}
            selectionMode="multiple"
          >
            <Menu.Label>Appearance</Menu.Label>
            <Menu.Item>Status Bar</Menu.Item>
            <Menu.Item isDisabled>Activity Bar</Menu.Item>
            <Menu.Item>Panel</Menu.Item>
          </Menu.Group>
          <Menu.Separator />
          <Menu.Group>
            <Menu.Item>
              <LogOutIcon /> Sign Out
            </Menu.Item>
          </Menu.Group>
        </Menu.Content>
      </Popover.Content>
    </Menu.Root>
  );
}
```


### Radio Group

## Component Preview: menu-radio-group-demo

```tsx
"use client";

import { useState } from "react";
import type { Selection } from "react-aria-components";
import { Button } from "~/components/ui/button/button";
import { Menu } from "~/components/ui/menu";
import { Popover } from "~/components/ui/popover";

export function MenuRadioGroupDemo() {
  const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([]));

  return (
    <Menu.Root>
      <Button variant="outline">Radio Group</Button>

      <Popover.Content placement="bottom start">
        <Menu.Content className="w-56">
          <Menu.Label inset>Panel Position</Menu.Label>
          <Menu.Group
            onSelectionChange={setSelectedKeys}
            selectedKeys={selectedKeys}
            selectionMode="single"
          >
            <Menu.Item>Top</Menu.Item>
            <Menu.Item>Bottom</Menu.Item>
            <Menu.Item isDisabled>Right</Menu.Item>
          </Menu.Group>
        </Menu.Content>
      </Popover.Content>
    </Menu.Root>
  );
}
```



# Popover (/docs/components/popover)

---
title: Popover
description: Displays rich content in a portal, triggered by a button.
links:
  docs: https://react-aria.adobe.com/Popover
---

## Component Preview: popover-demo

```tsx
import { Button } from "~/components/ui/button/button";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label/label";
import { Popover } from "~/components/ui/popover";
import { TextField } from "~/components/ui/text-field";

export function PopoverDemo() {
  return (
    <Popover.Root>
      <Button variant="outline">Open popover</Button>

      <Popover.Content className="w-80" placement="bottom start">
        <div className="grid gap-4">
          <div className="grid gap-1.5">
            <h4 className="font-medium leading-none">Dimensions</h4>
            <p className="text-muted-foreground text-sm">
              Set the dimensions for the layer.
            </p>
          </div>
          <div className="grid gap-2">
            <TextField
              autoFocus
              className="grid grid-cols-3 items-center gap-4"
              defaultValue="100%"
            >
              <Label>Width</Label>
              <Input className="col-span-2 h-8" />
            </TextField>
            <TextField
              className="grid grid-cols-3 items-center gap-4"
              defaultValue="300px"
            >
              <Label>Max. width</Label>
              <Input className="col-span-2 h-8" />
            </TextField>
            <TextField
              className="grid grid-cols-3 items-center gap-4"
              defaultValue="25px"
            >
              <Label>Height</Label>
              <Input className="col-span-2 h-8" />
            </TextField>
            <TextField
              className="grid grid-cols-3 items-center gap-4"
              defaultValue="none"
            >
              <Label>Max. height</Label>
              <Input className="col-span-2 h-8" />
            </TextField>
          </div>
        </div>
      </Popover.Content>
    </Popover.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/popover
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: popover

```tsx
// File: index.ts

export * as Popover from "./namespace";
export * from "./popover";
export * from "./styles";


// File: popover.tsx

"use client";

import {
  Button,
  composeRenderProps,
  DialogTrigger,
  OverlayArrow,
  Popover,
  PopoverContext,
  useSlottedContext,
} from "react-aria-components";
import { PopoverStyles } from "./styles";

export interface PopoverRootProps
  extends React.ComponentProps<typeof DialogTrigger> {}

export function PopoverRoot(props: PopoverRootProps) {
  return <DialogTrigger data-slot="popover" {...props} />;
}

export interface PopoverTriggerProps
  extends React.ComponentProps<typeof Button> {}

export function PopoverTrigger(props: PopoverTriggerProps) {
  return <Button data-slot="popover-trigger" {...props} />;
}

export interface PopoverContentProps
  extends React.ComponentProps<typeof Popover> {
  /**
   * The additional offset applied along the main axis between the element and its
   * anchor element.
   * @default 4
   */
  offset?: number;
}

export function PopoverContent({
  className,
  offset = 4,
  placement,
  ...props
}: PopoverContentProps) {
  const popoverContext = useSlottedContext(PopoverContext);
  const isMenu = popoverContext?.trigger !== "DialogTrigger";
  const isSubmenuTrigger = popoverContext?.trigger === "SubmenuTrigger";
  const _placement = placement ?? (isSubmenuTrigger ? "right" : "bottom start");

  return (
    <Popover
      className={composeRenderProps(className, (className) =>
        PopoverStyles.Content({
          className,
          isMenu,
        })
      )}
      data-slot="popover-content"
      offset={offset}
      placement={_placement}
      {...props}
    />
  );
}

export interface PopoverArrowProps
  extends React.ComponentProps<typeof OverlayArrow> {}

export function PopoverArrow({
  className,
  children,
  ...props
}: PopoverArrowProps) {
  return (
    <OverlayArrow
      className={composeRenderProps(className, (className) =>
        PopoverStyles.Arrow({
          className,
        })
      )}
      data-slot="popover-arrow"
      {...props}
    >
      {composeRenderProps(
        children,
        (children) =>
          children ?? (
            <svg aria-hidden="true" height={12} viewBox="0 0 12 12" width={12}>
              <path d="M0 0 L6 6 L12 0" />
            </svg>
          )
      )}
    </OverlayArrow>
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const PopoverStyles = {
  Arrow: cva({
    base: [
      "[&_svg]:fill-popover [&_svg]:stroke-border",
      "placement-bottom:rotate-180 placement-left:-rotate-90 placement-right:rotate-90",
    ],
  }),
  Content: cva({
    base: [
      "z-50 overflow-hidden shadow-md outline-hidden",

      "motion-duration-150",
      "entering:motion-opacity-in entering:motion-ease-out",
      "entering:placement-left:motion-translate-x-in-[0.25rem]",
      "entering:placement-right:motion-translate-x-in-[-0.25rem]",
      "entering:placement-top:motion-translate-y-in-[0.25rem]",
      "entering:placement-bottom:motion-translate-y-in-[-0.25rem]",

      "exiting:motion-opacity-out exiting:motion-ease-in",
      "exiting:placement-left:motion-translate-x-out-[0.25rem]",
      "exiting:placement-right:motion-translate-x-out-[-0.25rem]",
      "exiting:placement-top:motion-translate-y-out-[0.25rem]",
      "exiting:placement-bottom:motion-translate-y-out-[-0.25rem]",
    ],
    variants: {
      isMenu: {
        false: [
          "min-w-72 rounded-md border bg-popover p-4 text-popover-foreground",
        ],
        true: [
          "min-w-(--trigger-width) *:data-[slot=listbox-root]:max-h-[inherit]",
        ],
      },
    },
  }),
};


// File: namespace.ts

export {
  PopoverArrow as Arrow,
  PopoverContent as Content,
  PopoverRoot as Root,
  PopoverTrigger as Trigger,
} from "./popover";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { Button } from "~/components/ui/button";
import { Popover } from "~/components/ui/popover";

<Popover.Root>
  <Button>...</Button>

  <Popover.Content>
    <Popover.Arrow />
    ...
  </Popover.Content>
</Popover.Root>;
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import { Button } from "~/components/ui/button";
import {
  PopoverArrow,
  PopoverContent,
  PopoverRoot,
} from "~/components/ui/popover";

<PopoverRoot>
  <Button>...</Button>
  <PopoverContent>
    <PopoverArrow />
    ...
  </PopoverContent>
</PopoverRoot>;
```

</Tabs.Content>

</Tabs.Root>

## Examples

### With Arrow

## Component Preview: popover-with-arrow-demo

```tsx
"use client";

import { Dialog } from "react-aria-components";
import { Button } from "~/components/ui/button/button";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label/label";
import { Popover } from "~/components/ui/popover";
import { TextField } from "~/components/ui/text-field";

export function PopoverWithArrowDemo() {
  return (
    <Popover.Root>
      <Button variant="outline">Open popover</Button>

      <Popover.Content className="w-80" placement="bottom start">
        <Popover.Arrow />

        <Dialog className="grid gap-4">
          <div className="grid gap-1.5">
            <h4 className="font-medium leading-none">Dimensions</h4>
            <p className="text-muted-foreground text-sm">
              Set the dimensions for the layer.
            </p>
          </div>
          <div className="grid gap-2">
            <TextField
              autoFocus
              className="grid grid-cols-3 items-center gap-4"
              defaultValue="100%"
            >
              <Label>Width</Label>
              <Input className="col-span-2 h-8" />
            </TextField>
            <TextField
              className="grid grid-cols-3 items-center gap-4"
              defaultValue="300px"
            >
              <Label>Max. width</Label>
              <Input className="col-span-2 h-8" />
            </TextField>
            <TextField
              className="grid grid-cols-3 items-center gap-4"
              defaultValue="25px"
            >
              <Label>Height</Label>
              <Input className="col-span-2 h-8" />
            </TextField>
            <TextField
              className="grid grid-cols-3 items-center gap-4"
              defaultValue="none"
            >
              <Label>Max. height</Label>
              <Input className="col-span-2 h-8" />
            </TextField>
          </div>
        </Dialog>
      </Popover.Content>
    </Popover.Root>
  );
}
```



# Radio Group (/docs/components/radio-group)

---
title: Radio Group
description: A radio group allows a user to select a single item from a list of mutually exclusive options.
links:
  docs: https://react-aria.adobe.com/RadioGroup
---

## Component Preview: radio-group-demo

```tsx
import { Label } from "~/components/ui/label/label";
import { RadioGroup } from "~/components/ui/radio-group";

export function RadioGroupDemo() {
  return (
    <RadioGroup.Root aria-label="Display density" defaultValue="comfortable">
      <RadioGroup.Item value="default">
        <RadioGroup.Indicator />
        <Label>Default</Label>
      </RadioGroup.Item>

      <RadioGroup.Item value="comfortable">
        <RadioGroup.Indicator />
        <Label>Comfortable</Label>
      </RadioGroup.Item>

      <RadioGroup.Item value="compact">
        <RadioGroup.Indicator />
        <Label>Compact</Label>
      </RadioGroup.Item>
    </RadioGroup.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/radio-group
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: radio-group

```tsx
// File: index.ts

export * as RadioGroup from "./namespace";
export * from "./radio-group";
export * from "./styles";


// File: radio-group.tsx

"use client";

import { CircleIcon } from "lucide-react";
import {
  composeRenderProps,
  RadioGroup as RACRadioGroup,
  Radio,
} from "react-aria-components";
import { RadioGroupStyles } from "./styles";

export interface RadioGroupRootProps
  extends React.ComponentProps<typeof RACRadioGroup> {}

export function RadioGroupRoot({ className, ...props }: RadioGroupRootProps) {
  return (
    <RACRadioGroup
      className={composeRenderProps(className, (className) =>
        RadioGroupStyles.Root({ className })
      )}
      data-slot="radio-group-root"
      {...props}
    />
  );
}

export interface RadioGroupItemProps
  extends React.ComponentProps<typeof Radio> {}

export function RadioGroupItem({ className, ...props }: RadioGroupItemProps) {
  return (
    <Radio
      className={composeRenderProps(className, (className) =>
        RadioGroupStyles.Item({ className })
      )}
      data-slot="radio-group-item"
      {...props}
    />
  );
}

export interface RadioGroupIndicatorProps
  extends Omit<React.ComponentProps<"span">, "children"> {}

export function RadioGroupIndicator({
  className,
  ...props
}: RadioGroupIndicatorProps) {
  return (
    <span
      {...props}
      aria-hidden="true"
      className={RadioGroupStyles.Indicator({ className })}
      data-slot="radio-group-indicator"
    >
      <CircleIcon className="size-2 fill-primary opacity-0 transition group-selected:opacity-100" />
    </span>
  );
}


// File: styles.ts

import { compose, cva } from "~/lib/cva";
import { LabelStyles } from "../label";

export const RadioGroupStyles = {
  Indicator: cva({
    base: [
      "grid aspect-square size-4 shrink-0 place-content-center rounded-full border border-input text-primary",
      "shadow-xs outline-none transition",
      "group-focus-visible:border-ring group-focus-visible:ring-[3px] group-focus-visible:ring-ring/50",
      "group-disabled:cursor-not-allowed group-disabled:opacity-50",
      "group-aria-invalid:border-destructive group-aria-invalid:ring-destructive/20",
      "group-dark:bg-input/30 group-dark:aria-invalid:ring-destructive/40",
    ],
  }),
  Item: compose(
    LabelStyles,
    cva({
      base: ["group flex w-fit items-center gap-3"],
    })
  ),
  Root: cva({
    base: ["grid gap-3"],
  }),
};


// File: namespace.ts

export {
  RadioGroupIndicator as Indicator,
  RadioGroupItem as Item,
  RadioGroupRoot as Root,
} from "./radio-group";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { Label } from "~/components/ui/label";
import { RadioGroup } from "~/components/ui/radio-group";

<RadioGroup.Root>
  <RadioGroup.Item>
    <RadioGroup.Indicator />
    <Label />
  </RadioGroup.Item>
</RadioGroup.Root>;
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import { Label } from "~/components/ui/label";
import { RadioGroupItem, RadioGroupRoot } from "~/components/ui/radio-group";

<RadioGroupRoot>
  <RadioGroupItem>
    <RadioGroupIndicator />
    <Label />
  </RadioGroupItem>
</RadioGroupRoot>;
```

</Tabs.Content>

</Tabs.Root>

## Examples

### With Description

## Component Preview: radio-group-with-description-demo

```tsx
import { RadioGroup } from "~/components/ui/radio-group";

const plans = [
  {
    description:
      "Perfect for small businesses getting started with our platform",
    id: "starter",
    name: "Starter Plan",
    price: "$10",
  },
  {
    description: "Advanced features for growing businesses with higher demands",
    id: "pro",
    name: "Pro Plan",
    price: "$20",
  },
] as const;

export function RadioGroupWithDescriptionDemo() {
  return (
    <RadioGroup.Root
      aria-label="Plan selection"
      className="max-w-sm"
      defaultValue="starter"
    >
      {plans.map((plan) => (
        <RadioGroup.Item
          className="items-start rounded-lg border selected:border-green-600 selected:bg-green-50 p-4 hover:bg-accent/50 dark:selected:border-green-900 dark:selected:bg-green-950"
          key={plan.id}
          value={plan.id}
        >
          <RadioGroup.Indicator className="group-selected:border-green-600 not-dark:group-selected:bg-green-600 [&_svg]:fill-white [&_svg]:stroke-white" />

          <div className="grid gap-1 font-normal">
            <div className="font-medium">{plan.name}</div>
            <div className="text-muted-foreground leading-snug">
              {plan.description}
            </div>
          </div>
        </RadioGroup.Item>
      ))}
    </RadioGroup.Root>
  );
}
```


### Disabled

## Component Preview: radio-group-disabled-demo

```tsx
import { Label } from "~/components/ui/label/label";
import { RadioGroup } from "~/components/ui/radio-group";

export function RadioGroupDisabledDemo() {
  return (
    <RadioGroup.Root aria-label="Favorite pet">
      <RadioGroup.Item value="dog">
        <RadioGroup.Indicator />
        <Label>Dog</Label>
      </RadioGroup.Item>

      <RadioGroup.Item value="cat">
        <RadioGroup.Indicator />
        <Label>Cat</Label>
      </RadioGroup.Item>

      <RadioGroup.Item isDisabled value="dragon">
        <RadioGroup.Indicator />
        <Label>Dragon</Label>
      </RadioGroup.Item>
    </RadioGroup.Root>
  );
}
```


### Form

<Alert.Root variant="warning">
  <AlertIcon variant="warning" className="size-4" />
  <Alert.Title>Under Construction</Alert.Title>
  <Alert.Description>
    This component is currently being built. Check back soon for updates!
  </Alert.Description>
</Alert.Root>


# Scroll Area (/docs/components/scroll-area)

---
title: Scroll Area
description: Augments native scroll functionality for custom, cross-browser styling.
links:
  docs: https://base-ui.com/react/components/scroll-area
---

## Component Preview: scroll-area-demo

```tsx
import { Fragment } from "react";
import { ScrollArea } from "~/components/ui/scroll-area";
import { Separator } from "~/components/ui/separator";

const tags = Array.from({ length: 50 }).map(
  (_, i, a) => `v1.2.0-beta.${a.length - i}`
);

export function ScrollAreaDemo() {
  return (
    <ScrollArea.Root className="h-72 w-48 rounded-md border">
      <ScrollArea.Viewport>
        <div className="p-4">
          <h4 className="mb-4 font-medium text-sm leading-none">Tags</h4>
          {tags.map((tag) => (
            <Fragment key={tag}>
              <div className="text-sm">{tag}</div>
              <Separator className="my-2" />
            </Fragment>
          ))}
        </div>
      </ScrollArea.Viewport>
      <ScrollArea.Scrollbar orientation="vertical">
        <ScrollArea.Thumb />
      </ScrollArea.Scrollbar>
    </ScrollArea.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/scroll-area
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @radix-ui/react-scroll-area
```

<Step>Copy and paste the following code into your project.</Step>

## Component Source: scroll-area

```tsx
// File: index.ts

export * as ScrollArea from "./namespace";
export * from "./scroll-area";
export * from "./styles";


// File: scroll-area.tsx

"use client";

import { ScrollArea } from "@base-ui/react/scroll-area";
import { composeRenderProps } from "react-aria-components";
import { ScrollAreaStyles } from "./styles";

export interface ScrollAreaRootProps
  extends React.ComponentProps<typeof ScrollArea.Root> {}

export function ScrollAreaRoot({ className, ...props }: ScrollAreaRootProps) {
  return (
    <ScrollArea.Root
      {...props}
      className={composeRenderProps(className, (className) =>
        ScrollAreaStyles.Root({ className })
      )}
      data-slot="scroll-area-root"
    />
  );
}

export interface ScrollAreaViewportProps
  extends React.ComponentProps<typeof ScrollArea.Viewport> {
  scrollFade?: boolean;
  scrollbarGutter?: boolean;
}

export function ScrollAreaViewport({
  className,
  scrollFade = false,
  scrollbarGutter = false,
  ...props
}: ScrollAreaViewportProps) {
  return (
    <ScrollArea.Viewport
      {...props}
      className={composeRenderProps(className, (className) =>
        ScrollAreaStyles.Viewport({ className, scrollFade, scrollbarGutter })
      )}
      data-slot="scroll-area-viewport"
    />
  );
}

export interface ScrollAreaScrollbarProps
  extends React.ComponentProps<typeof ScrollArea.Scrollbar> {}

export function ScrollAreaScrollbar({
  className,
  orientation,
  ...props
}: ScrollAreaScrollbarProps) {
  return (
    <ScrollArea.Scrollbar
      {...props}
      className={composeRenderProps(className, (className) =>
        ScrollAreaStyles.Scrollbar({ className, orientation })
      )}
      data-slot="scroll-area-scrollbar"
      orientation={orientation}
    />
  );
}

export interface ScrollAreaThumbProps
  extends React.ComponentProps<typeof ScrollArea.Thumb> {}

export function ScrollAreaThumb({ className, ...props }: ScrollAreaThumbProps) {
  return (
    <ScrollArea.Thumb
      {...props}
      className={composeRenderProps(className, (className) =>
        ScrollAreaStyles.Thumb({ className })
      )}
      data-slot="scroll-area-thumb"
    />
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const ScrollAreaStyles = {
  Root: cva({
    base: ["size-full min-h-0"],
  }),
  Scrollbar: cva({
    base: [
      "m-1 flex opacity-0 transition-opacity delay-300",
      "data-hovering:opacity-100 data-scrolling:opacity-100",
      "data-hovering:delay-0 data-scrolling:delay-0",
      "data-hovering:duration-100 data-scrolling:duration-100",
    ],
    variants: {
      orientation: {
        horizontal: ["h-1.5 flex-col"],
        vertical: ["w-1.5"],
      },
    },
  }),
  Thumb: cva({
    base: ["relative flex-1 rounded-full bg-foreground/20"],
  }),
  Viewport: cva({
    base: [
      "h-full overscroll-contain rounded-[inherit] outline-none transition-shadows",
      "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
    ],
    variants: {
      scrollFade: {
        true: [
          "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))]",
          "mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))]",
          "mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))]",
          "mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))]",
          "[--fade-size:1.5rem]",
        ],
        false: [],
      },
      scrollbarGutter: {
        true: ["data-has-overflow-y:pe-2.5 data-has-overflow-x:pb-2.5"],
        false: [],
      },
    },
    defaultVariants: {
      scrollFade: false,
      scrollbarGutter: false,
    },
  }),
};


// File: namespace.ts

export {
  ScrollAreaRoot as Root,
  ScrollAreaScrollbar as Scrollbar,
  ScrollAreaThumb as Thumb,
  ScrollAreaViewport as Viewport,
} from "./scroll-area";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { ScrollArea } from "~/components/ui/scroll-area";

<ScrollArea.Root>
  <ScrollArea.Viewport>...</ScrollArea.Viewport>
  <ScrollArea.Scrollbar orientation="vertical">
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Scrollbar orientation="horizontal">
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
</ScrollArea.Root>;
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import {
  ScrollAreaRoot,
  ScrollAreaViewport,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
} from "~/components/ui/scroll-area";

<ScrollAreaRoot>
  <ScrollAreaViewport>...</ScrollAreaViewport>
  <ScrollAreaScrollbar orientation="vertical">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
  <ScrollAreaScrollbar orientation="horizontal">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
</ScrollAreaRoot>;
```

</Tabs.Content>

</Tabs.Root>

## Examples

### Horizontal

## Component Preview: scroll-area-horizontal-demo

```tsx
import { ScrollArea } from "~/components/ui/scroll-area";

const works = [
  {
    artist: "Ornella Binni",
    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
  },
  {
    artist: "Tom Byrom",
    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
  },
  {
    artist: "Vladimir Malyavko",
    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
  },
] as const satisfies {
  artist: string;
  art: string;
}[];

export function ScrollAreaHorizontalDemo() {
  return (
    <ScrollArea.Root className="w-96 whitespace-nowrap rounded-md border">
      <ScrollArea.Viewport>
        <div className="flex w-max space-x-4 p-4">
          {works.map((artwork) => (
            <figure className="shrink-0" key={artwork.artist}>
              <div className="overflow-hidden rounded-md">
                <img
                  alt={`Art by ${artwork.artist}`}
                  className="aspect-3/4 h-fit w-fit object-cover"
                  height={400}
                  src={artwork.art}
                  width={300}
                />
              </div>
              <figcaption className="pt-2 text-muted-fg text-xs">
                Photo by{" "}
                <span className="font-semibold text-fg">{artwork.artist}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </ScrollArea.Viewport>
      <ScrollArea.Scrollbar orientation="horizontal">
        <ScrollArea.Thumb />
      </ScrollArea.Scrollbar>
    </ScrollArea.Root>
  );
}
```


## API Reference

### Root

<PropsTable
  data={[
    {
      name: "asChild",
      required: false,
      typeSimple: "boolean",
      default: "false",
      description: (
        <>
          Change the default rendered element for the one passed as a child,
          merging their props and behavior.
          <br />
          <br />
          Read Radix UI{" "}
          <a href="https://www.radix-ui.com/primitives/docs/guides/composition">
            Composition
          </a>{" "}
          guide for more details.
        </>
      ),
    },
    {
      name: "type",
      type: '"auto" | "always" | "scroll" | "hover"',
      typeSimple: "enum",
      default: '"hover"',
      description: (
        <span>
          Describes the nature of scrollbar visibility, similar to how the
          scrollbar preferences in MacOS control visibility of native
          scrollbars.
          <br />
          <br />
          <Code>"auto"</Code> means that scrollbars are visible when content is
          overflowing on the corresponding orientation.
          <br />
          <Code>"always"</Code> means that scrollbars are always visible
          regardless of whether the content is overflowing.
          <br />
          <Code>"scroll"</Code> means that scrollbars are visible when the user
          is scrolling along its corresponding orientation.
          <br />
          <Code>"hover"</Code> when the user is scrolling along its
          corresponding orientation and when the user is hovering over the
          scroll area.
        </span>
      ),
    },
    {
      name: "scrollHideDelay",
      typeSimple: "number",
      default: "600",
      description: (
        <span>
          If <Code>type</Code> is set to either <Code>"scroll"</Code> or{" "}
          <Code>"hover"</Code>, this prop determines the length of time, in
          milliseconds, before the scrollbars are hidden after the user stops
          interacting with scrollbars.
        </span>
      ),
    },
    {
      name: "dir",
      required: false,
      type: '"ltr" | "rtl"',
      typeSimple: "enum",
      description: (
        <span>
          The reading direction of the scroll area. If omitted, inherits
          globally from <Code>DirectionProvider</Code> or assumes LTR
          (left-to-right) reading mode.
        </span>
      ),
    },
    {
      name: "nonce",
      required: false,
      typeSimple: "string",
      description: (
        <span>
          An optional nonce attribute that is passed to the inline styles for
          use in CSP-enabled environments that use strict rules to enhance
          security.
        </span>
      ),
    },
  ]}
/>

### Viewport

The viewport area of the scroll area.

<PropsTable
  data={[
    {
      name: "asChild",
      required: false,
      typeSimple: "boolean",
      default: "false",
      description: (
        <>
          Change the default rendered element for the one passed as a child,
          merging their props and behavior.
          <br />
          <br />
          Read Radix UI{" "}
          <a href="https://www.radix-ui.com/primitives/docs/guides/composition">
            Composition
          </a>{" "}
          guide for more details.
        </>
      ),
    },
  ]}
/>

### Scrollbar

The vertical scrollbar. Add a second `Scrollbar` with an `orientation` prop to enable horizontal scrolling.

<PropsTable
  data={[
    {
      name: "asChild",
      required: false,
      typeSimple: "boolean",
      default: "false",
      description: (
        <>
          Change the default rendered element for the one passed as a child,
          merging their props and behavior.
          <br />
          <br />
          Read Radix UI{" "}
          <a href="https://www.radix-ui.com/primitives/docs/guides/composition">
            Composition
          </a>{" "}
          guide for more details.
        </>
      ),
    },
    {
      name: "forceMount",
      typeSimple: "boolean",
      description: (
        <span>
          Used to force mounting when more control is needed. Useful when
          controlling animation with React animation libraries.
        </span>
      ),
    },
    {
      name: "orientation",
      required: false,
      type: '"horizontal" | "vertical"',
      typeSimple: "enum",
      default: "vertical",
      description: "The orientation of the scrollbar",
    },
  ]}
/>


# Select (/docs/components/select)

---
title: Select
description: A select displays a collapsible list of options and allows a user to select one of them.
links:
  docs: https://react-aria.adobe.com/Select
---

## Component Preview: select-demo

```tsx
import { Listbox } from "~/components/ui/list-box";
import { Popover } from "~/components/ui/popover";

import { Select } from "~/components/ui/select";

export function SelectDemo() {
  return (
    <Select.Root aria-label="Fruits" placeholder="Select a fruit">
      <Select.Trigger className="w-[180px]">
        <Select.Value />
      </Select.Trigger>
      <Popover.Content>
        <Listbox.Root>
          <Listbox.Label>Fruits</Listbox.Label>
          <Listbox.Item id="apple">Apple</Listbox.Item>
          <Listbox.Item id="banana">Banana</Listbox.Item>
          <Listbox.Item id="blueberry">Blueberry</Listbox.Item>
          <Listbox.Item id="grapes" isDisabled>
            Grapes
          </Listbox.Item>
          <Listbox.Item id="pineapple">Pineapple</Listbox.Item>
        </Listbox.Root>
      </Popover.Content>
    </Select.Root>
  );
}
```


## Installation

The Select is built using a composition of the `<Popover />{:tsx}` and the `<Listbox />{:tsx}` components.

See installation instructions for the [Popover](/docs/components/popover#installation) and the [Listbox](/docs/components/list-box#installation) components.

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/select
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: select

```tsx
// File: index.ts

export * as Select from "./namespace";
export * from "./select";
export * from "./styles";


// File: select.tsx

"use client";

import type { VariantProps } from "cva";
import { ChevronDownIcon } from "lucide-react";
import {
  Button,
  composeRenderProps,
  SelectValue as RACSelectValue,
  Select,
} from "react-aria-components";

import { SelectStyles } from "./styles";

type SelectProps = React.ComponentProps<typeof Select>;
type SelectionMode = NonNullable<SelectProps["selectionMode"]>;

export interface SelectRootProps<
  T extends object = NonNullable<unknown>,
  M extends SelectionMode = "single",
> extends React.ComponentProps<typeof Select<T, M>> {}

export function SelectRoot<
  T extends object = NonNullable<unknown>,
  M extends SelectionMode = "single",
>(props: SelectRootProps<T, M>) {
  return <Select data-slot="select-root" {...props} />;
}

export interface SelectTriggerProps
  extends React.ComponentProps<typeof Button>,
    VariantProps<typeof SelectStyles.Trigger> {}

export function SelectTrigger({
  className,
  size = "default",
  children,
  ...props
}: SelectTriggerProps) {
  return (
    <Button
      className={composeRenderProps(className, (className) =>
        SelectStyles.Trigger({ className })
      )}
      data-slot="select-trigger"
      {...props}
    >
      {composeRenderProps(children, (children) => (
        <>
          {children}
          <ChevronDownIcon
            aria-hidden="true"
            className="size-4 transition group-pressed:rotate-180"
            data-slot="select-icon"
          />
        </>
      ))}
    </Button>
  );
}

// export interface SelectGroupProps
//   extends React.ComponentProps<typeof SelectPrimitive.Group> {}

// export function SelectGroup({ ...props }: SelectGroupProps) {
//   return <SelectPrimitive.Group data-slot="select-group" {...props} />;
// }

export interface SelectValueProps
  extends React.ComponentProps<typeof RACSelectValue> {}

export function SelectValue({ className, ...props }: SelectValueProps) {
  return (
    <RACSelectValue
      className={composeRenderProps(className, (className) =>
        SelectStyles.Value({ className })
      )}
      data-slot="select-value"
      {...props}
    />
  );
}

// export interface SelectLabelProps
//   extends React.ComponentProps<typeof SelectPrimitive.Label> {}

// export function SelectLabel({ className, ...props }: SelectLabelProps) {
//   return (
//     <SelectPrimitive.Label
//       data-slot="select-label"
//       className={cn("px-2 py-1.5 text-muted-foreground text-xs", className)}
//       {...props}
//     />
//   );
// }

// export interface SelectSeparatorProps
//   extends React.ComponentProps<typeof SelectPrimitive.Separator> {}

// export function SelectSeparator({ className, ...props }: SelectSeparatorProps) {
//   return (
//     <SelectPrimitive.Separator
//       data-slot="select-separator"
//       className={cn("-mx-1 pointer-events-none my-1 h-px bg-border", className)}
//       {...props}
//     />
//   );
// }


// File: styles.ts

import { cva } from "~/lib/cva";

export const SelectStyles = {
  Trigger: cva({
    base: [
      "group flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent",
      "px-3 py-2 text-sm shadow-xs outline-none transition-[color,box-shadow]",
      "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
      "disabled:cursor-not-allowed disabled:opacity-50",
      "group-invalid:border-destructive group-invalid:ring-destructive/20",
      "dark:bg-input/30 dark:group-invalid:ring-destructive/40 dark:hover:bg-input/50",
      "[&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
    ],
    defaultVariants: {
      size: "default",
    },
    variants: {
      size: {
        default: "min-h-9",
        sm: "min-h-8",
      },
    },
  }),
  Value: cva({
    base: [
      "line-clamp-1 flex items-center gap-2 data-placeholder:text-muted-foreground",
    ],
  }),
};


// File: namespace.ts

export {
  SelectRoot as Root,
  SelectTrigger as Trigger,
  SelectValue as Value,
} from "./select";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { Listbox } from "~/components/ui/list-box";
import { Popover } from "~/components/ui/popover";
import { Select } from "~/components/ui/select";

<Select.Root>
  <Select.Trigger>
    <Select.Value />
  </Select.Trigger>
  <Popover.Content>
    <Listbox.Root>
      <Listbox.Item></Listbox.Item>
    </Listbox.Root>
  </Popover.Content>
</Select.Root>;
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import { ListboxItem, ListboxRoot } from "~/components/ui/list-box";
import { PopoverContent } from "~/components/ui/popover";
import { SelectRoot, SelectTrigger, SelectValue } from "~/components/ui/select";

<SelectRoot>
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <PopoverContent>
    <ListboxRoot>
      <ListboxItem />
    </ListboxRoot>
  </PopoverContent>
</SelectRoot>;
```

</Tabs.Content>

</Tabs.Root>

## Examples

### With Label

## Component Preview: select-with-label-demo

```tsx
import { Label } from "~/components/ui/label";
import { Listbox } from "~/components/ui/list-box";
import { Popover } from "~/components/ui/popover";

import { Select } from "~/components/ui/select";

export function SelectWithLabelDemo() {
  return (
    <Select.Root aria-label="Fruits" placeholder="Select a fruit">
      <Label>Choose a fruit</Label>

      <Select.Trigger className="w-[180px]">
        <Select.Value />
      </Select.Trigger>
      <Popover.Content>
        <Listbox.Root>
          <Listbox.Label>Fruits</Listbox.Label>
          <Listbox.Item id="apple">Apple</Listbox.Item>
          <Listbox.Item id="banana">Banana</Listbox.Item>
          <Listbox.Item id="blueberry">Blueberry</Listbox.Item>
          <Listbox.Item id="grapes" isDisabled>
            Grapes
          </Listbox.Item>
          <Listbox.Item id="pineapple">Pineapple</Listbox.Item>
        </Listbox.Root>
      </Popover.Content>
    </Select.Root>
  );
}
```


### Scrollable

## Component Preview: select-scrollable-demo

```tsx
import { Listbox } from "~/components/ui/list-box";
import { Popover } from "~/components/ui/popover";

import { Select } from "~/components/ui/select";

export function SelectScrollableDemo() {
  return (
    <Select.Root aria-label="Timezone" placeholder="Select a timezone">
      <Select.Trigger className="w-70">
        <Select.Value />
      </Select.Trigger>
      <Popover.Content>
        <Listbox.Root>
          <Listbox.Group>
            <Listbox.Label>North America</Listbox.Label>
            <Listbox.Item id="est">Eastern Standard Time (EST)</Listbox.Item>
            <Listbox.Item id="cst">Central Standard Time (CST)</Listbox.Item>
            <Listbox.Item id="mst">Mountain Standard Time (MST)</Listbox.Item>
            <Listbox.Item id="pst">Pacific Standard Time (PST)</Listbox.Item>
            <Listbox.Item id="akst">Alaska Standard Time (AKST)</Listbox.Item>
            <Listbox.Item id="hst">Hawaii Standard Time (HST)</Listbox.Item>
          </Listbox.Group>
          <Listbox.Group>
            <Listbox.Label>Europe & Africa</Listbox.Label>
            <Listbox.Item id="gmt">Greenwich Mean Time (GMT)</Listbox.Item>
            <Listbox.Item id="cet">Central European Time (CET)</Listbox.Item>
            <Listbox.Item id="eet">Eastern European Time (EET)</Listbox.Item>
            <Listbox.Item id="west">
              Western European Summer Time (WEST)
            </Listbox.Item>
            <Listbox.Item id="cat">Central Africa Time (CAT)</Listbox.Item>
            <Listbox.Item id="eat">East Africa Time (EAT)</Listbox.Item>
          </Listbox.Group>
          <Listbox.Group>
            <Listbox.Label>Asia</Listbox.Label>
            <Listbox.Item id="msk">Moscow Time (MSK)</Listbox.Item>
            <Listbox.Item id="ist">India Standard Time (IST)</Listbox.Item>
            <Listbox.Item id="cst_china">
              China Standard Time (CST)
            </Listbox.Item>
            <Listbox.Item id="jst">Japan Standard Time (JST)</Listbox.Item>
            <Listbox.Item id="kst">Korea Standard Time (KST)</Listbox.Item>
            <Listbox.Item id="ist_indonesia">
              Indonesia Central Standard Time (WITA)
            </Listbox.Item>
          </Listbox.Group>
          <Listbox.Group>
            <Listbox.Label>Australia & Pacific</Listbox.Label>
            <Listbox.Item id="awst">
              Australian Western Standard Time (AWST)
            </Listbox.Item>
            <Listbox.Item id="acst">
              Australian Central Standard Time (ACST)
            </Listbox.Item>
            <Listbox.Item id="aest">
              Australian Eastern Standard Time (AEST)
            </Listbox.Item>
            <Listbox.Item id="nzst">
              New Zealand Standard Time (NZST)
            </Listbox.Item>
            <Listbox.Item id="fjt">Fiji Time (FJT)</Listbox.Item>
          </Listbox.Group>
          <Listbox.Group>
            <Listbox.Label>South America</Listbox.Label>
            <Listbox.Item id="art">Argentina Time (ART)</Listbox.Item>
            <Listbox.Item id="bot">Bolivia Time (BOT)</Listbox.Item>
            <Listbox.Item id="brt">Brasilia Time (BRT)</Listbox.Item>
            <Listbox.Item id="clt">Chile Standard Time (CLT)</Listbox.Item>
          </Listbox.Group>
        </Listbox.Root>
      </Popover.Content>
    </Select.Root>
  );
}
```


### Infinite Scroll

## Component Preview: select-infinite-scroll-demo

```tsx
"use client";

import { useInfiniteQuery } from "@tanstack/react-query";
import { Collection } from "react-aria-components";
import { Label } from "~/components/ui/label";
import { Listbox } from "~/components/ui/list-box";
import { Popover } from "~/components/ui/popover";
import { Select } from "~/components/ui/select";
import { Spinner } from "~/components/ui/spinner";

export interface PokemonListResponse {
  count: number;
  next: string | null;
  previous: string | null;
  results: {
    name: string;
    url: string;
  }[];
}

export function SelectInfiniteScrollDemo() {
  const query = useInfiniteQuery({
    queryKey: ["pokemons"],
    queryFn: async ({ pageParam, signal }) => {
      const { limit, offset } = pageParam;
      const res = await fetch(
        `https://pokeapi.co/api/v2/pokemon?limit=${limit}&offset=${offset}`,
        {
          signal,
        }
      );
      const data = (await res.json()) as PokemonListResponse;
      return data;
    },
    initialPageParam: {
      offset: 0,
      limit: 40,
    },
    getNextPageParam: (lastPage, _allPages, lastPageParam) => {
      if (lastPage.next) {
        return {
          offset: lastPageParam.offset + lastPageParam.limit,
          limit: lastPageParam.limit,
        };
      }
    },
    getPreviousPageParam: (firstPage, _allPages, firstPageParam) => {
      if (firstPage.previous) {
        return {
          offset: firstPageParam.offset - firstPageParam.limit,
          limit: firstPageParam.limit,
        };
      }
    },
  });

  const items = query.data?.pages.flatMap((page) => page.results) || [];

  return (
    <Select.Root aria-label="Pokémons" placeholder="Select a Pokémon">
      <Label>Choose a Pokémon</Label>

      <Select.Trigger className="w-[180px]">
        <Select.Value className="capitalize" />
      </Select.Trigger>
      <Popover.Content>
        <Listbox.Root
          renderEmptyState={() => (
            <Listbox.Empty>
              {query.isFetched ? (
                "No Pokémons found."
              ) : (
                <>
                  <Spinner />
                  <span className="sr-only">Loading more...</span>
                </>
              )}
            </Listbox.Empty>
          )}
        >
          <Collection items={items}>
            {(item) => (
              <Listbox.Item className="capitalize" id={item.name}>
                {item.name}
              </Listbox.Item>
            )}
          </Collection>
          <Listbox.LoadMoreItem
            isLoading={query.isFetchingNextPage}
            onLoadMore={query.fetchNextPage}
          >
            <Spinner />
            <span className="sr-only">Loading more...</span>
          </Listbox.LoadMoreItem>
        </Listbox.Root>
      </Popover.Content>
    </Select.Root>
  );
}
```


### Multiple Selection

<Alert.Root variant="warning">
  <AlertIcon variant="warning" className="size-4" />
  <Alert.Title>Under Construction</Alert.Title>
  <Alert.Description>
    This component is currently being built. Check back soon for updates!
  </Alert.Description>
</Alert.Root>

### Form

<Alert.Root variant="warning">
  <AlertIcon variant="warning" className="size-4" />
  <Alert.Title>Under Construction</Alert.Title>
  <Alert.Description>
    This component is currently being built. Check back soon for updates!
  </Alert.Description>
</Alert.Root>


# Separator (/docs/components/separator)

---
title: Separator
description: Visually or semantically separates content.
---

## Component Preview: separator-demo

```tsx
import { Separator } from "~/components/ui/separator";

export function SeparatorDemo() {
  return (
    <div>
      <div className="flex flex-col gap-1">
        <div className="font-medium text-sm leading-none">Tailwind CSS</div>
        <div className="text-muted-foreground text-sm">
          A utility-first CSS framework.
        </div>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center gap-4 text-sm">
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
      </div>
    </div>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/separator
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: separator

```tsx
// File: index.ts

export * from "./separator";
export * from "./styles";


// File: separator.tsx

"use client";

import { Separator as RACSeparator } from "react-aria-components";
import { SeparatorStyles } from "./styles";

export interface SeparatorProps
  extends React.ComponentProps<typeof RACSeparator> {}

export function Separator({
  className,
  orientation,
  ...props
}: SeparatorProps) {
  return (
    <RACSeparator
      className={SeparatorStyles({ className })}
      data-orientation={orientation}
      data-slot="separator"
      orientation={orientation}
      {...props}
    />
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const SeparatorStyles = cva({
  base: [
    "shrink-0 bg-border",
    "orientation-horizontal:h-px orientation-horizontal:w-full",
    "orientation-vertical:h-full orientation-vertical:w-px",
  ],
  // TODO: Think about this
  // variants: {
  //   variant: {
  //     menu: "-mx-1 my-1",
  //   },
  // },
});
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

```tsx
import { Separator } from "~/components/ui/separator";

<Separator />
```

## Examples

### Vertical

## Component Preview: separator-vertical-demo

```tsx
import { Separator } from "~/components/ui/separator";

export function SeparatorVerticalDemo() {
  return (
    <main className="grid size-full place-content-center">
      <div className="flex items-center gap-6">
        <h1 className="font-medium text-2xl">404</h1>
        <Separator orientation="vertical" />
        <h2 className="text-sm">This page could not be found.</h2>
      </div>
    </main>
  );
}
```


## API Reference

<PropsTable
  data={[
    {
      name: "orientation",
      type: '"horizontal" | "vertical"',
      typeSimple: "enum",
      default: '"horizontal"',
    },
    {
      name: "decorative",
      typeSimple: "boolean",
      default: "true",
      description: (
        <span>
          When <Code>true</Code>, signifies that it is purely visual, carries no
          semantic meaning, and ensures it is not present in the accessibility
          tree.
        </span>
      ),
    },
  ]}
/>


# Skeleton (/docs/components/skeleton)

---
title: Skeleton
description: Use to show a placeholder while content is loading.
links:
  docs: https://ui.shadcn.com/docs/components/skeleton
---

## Component Preview: skeleton-demo

```tsx
import { Skeleton } from "~/components/ui/skeleton";

export function SkeletonDemo() {
  return (
    <div className="flex items-center space-x-4">
      <Skeleton className="size-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-62.5" />
        <Skeleton className="h-4 w-50" />
      </div>
    </div>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/skeleton
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: skeleton

```tsx
// File: index.ts

export * from "./skeleton";


// File: skeleton.tsx

import { SkeletonStyles } from "./styles";

export interface SkeletonProps extends React.ComponentProps<"div"> {}

export function Skeleton({ className, ...props }: SkeletonProps) {
  return (
    <div
      className={SkeletonStyles({ className })}
      data-slot="skeleton"
      {...props}
    />
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const SkeletonStyles = cva({
  base: ["animate-pulse rounded-md bg-accent"],
});
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

```tsx
import { Skeleton } from "~/components/ui/skeleton";

<Skeleton className="w-[100px] h-[20px] rounded-full" />
```

## Examples

### Card

## Component Preview: skeleton-card-demo

```tsx
import { Card } from "~/components/ui/card";
import { Skeleton } from "~/components/ui/skeleton";

export function SkeletonCardDemo() {
  return (
    <Card.Root className="@md:w-auto w-full @md:min-w-sm">
      <Card.Header>
        <Skeleton className="h-4 w-2/3" />
        <Skeleton className="h-4 w-1/2" />
      </Card.Header>
      <Card.Content>
        <Skeleton className="aspect-square w-full" />
      </Card.Content>
    </Card.Root>
  );
}
```



# Slider (/docs/components/slider)

---
title: Slider
description: An input where the user selects a value from within a given range.
links:
  docs: https://react-aria.adobe.com/Slider
---

## Component Preview: slider-demo

```tsx
import { Slider } from "~/components/ui/slider";

export function SliderDemo() {
  return (
    <Slider.Root aria-label="Single value slider" defaultValue={[50]}>
      <Slider.Track>
        <Slider.Range />
        <Slider.Thumb />
      </Slider.Track>
    </Slider.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/slider
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: slider

```tsx
// File: index.ts

export * as Slider from "./namespace";
export * from "./slider";
export * from "./styles";


// File: slider.tsx

"use client";

import { use } from "react";
import {
  composeRenderProps,
  SliderOutput as Output,
  Slider,
  SliderStateContext,
  SliderThumb as Thumb,
  SliderTrack as Track,
} from "react-aria-components";
import { SliderStyles } from "./styles";

export interface SliderRootProps<T extends number | number[]>
  extends React.ComponentProps<typeof Slider<T>> {}

export function SliderRoot<T extends number | number[]>({
  className,
  ...props
}: SliderRootProps<T>) {
  return (
    <Slider
      {...props}
      className={composeRenderProps(className, (className) =>
        SliderStyles.Root({ className })
      )}
      data-slot="slider-root"
    />
  );
}

export interface SliderTrackProps extends React.ComponentProps<typeof Track> {}

export function SliderTrack({ className, ...props }: SliderTrackProps) {
  return (
    <Track
      {...props}
      className={composeRenderProps(className, (className) =>
        SliderStyles.Track({ className })
      )}
      data-slot="slider-track"
    />
  );
}

export interface SliderThumbProps extends React.ComponentProps<typeof Thumb> {}

export function SliderThumb({ className, ...props }: SliderThumbProps) {
  const context = use(SliderStateContext);

  if (!context) {
    throw new Error("SliderThumb should be used within a Slider component.");
  }

  return context.values.map((_value, idx) => (
    <Thumb
      {...props}
      className={composeRenderProps(className, (className) =>
        SliderStyles.Thumb({ className })
      )}
      data-slot="slider-thumb"
      index={idx}
      // biome-ignore lint/suspicious/noArrayIndexKey: Using index as key is acceptable here since SliderThumbs are generated based on the number of values in the slider.
      key={idx}
    />
  ));
}

export interface SliderOutputProps
  extends React.ComponentProps<typeof Output> {}

export function SliderOutput({ className, ...props }: SliderOutputProps) {
  return (
    <Output
      {...props}
      className={composeRenderProps(className, (className) =>
        SliderStyles.Output({ className })
      )}
      data-slot="slider-output"
    />
  );
}

interface GetSliderRangeStyleProps {
  orientation: "horizontal" | "vertical";
  getThumbPercent: (index: number) => number;
  values: number[];
}

function getSliderRangeStyle(
  props: GetSliderRangeStyleProps
): React.CSSProperties {
  const { orientation, getThumbPercent, values } = props;

  if (values.length === 1) {
    return orientation === "horizontal"
      ? { width: `${getThumbPercent(0) * 100}%` }
      : { height: `${getThumbPercent(0) * 100}%` };
  }

  return orientation === "horizontal"
    ? {
        left: `${getThumbPercent(0) * 100}%`,
        width: `${Math.abs(getThumbPercent(0) - getThumbPercent(1)) * 100}%`,
      }
    : {
        bottom: `${getThumbPercent(0) * 100}%`,
        height: `${Math.abs(getThumbPercent(0) - getThumbPercent(1)) * 100}%`,
      };
}

export interface SliderRangeProps extends React.ComponentProps<"div"> {}

export function SliderRange({ className, ...props }: SliderRangeProps) {
  const context = use(SliderStateContext);

  if (!context) {
    throw new Error("SliderRange should be used within a Slider component.");
  }

  const { orientation, getThumbPercent, values } = context;

  return (
    <div
      {...props}
      className={SliderStyles.Range({ className })}
      style={getSliderRangeStyle({
        getThumbPercent,
        orientation,
        values,
      })}
    />
  );
}

export interface SliderHeaderProps extends React.ComponentProps<"div"> {}

export function SliderHeader({ className, ...props }: SliderHeaderProps) {
  return (
    <div
      {...props}
      className={SliderStyles.Header({ className })}
      data-slot="slider-header"
    />
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const SliderStyles = {
  Header: cva({
    base: ["flex items-center justify-between gap-2"],
  }),
  Output: cva({
    base: ["text-muted-foreground text-sm tabular-nums"],
  }),
  Range: cva({
    base: [
      "rounded-full bg-primary group-disabled/track:bg-background-disabled",
      "group-orientation-horizontal/top-0 pointer-events-none absolute group-orientation-vertical/track:bottom-0 group-orientation-horizontal/track:h-full group-orientation-vertical/track:w-full",
    ],
  }),
  Root: cva({
    base: [
      "flex flex-col gap-2",
      "orientation-vertical:h-56 orientation-vertical:items-center",
      "orientation-horizontal:w-full",
      "disabled:opacity-50",
    ],
  }),
  Thumb: cva({
    base: [
      "top-1/2 left-1/2 size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50",
    ],
  }),
  Track: cva({
    base: [
      "group/track relative rounded-full bg-zinc-200 disabled:bg-background-disabled dark:bg-zinc-800",
      "orientation-horizontal:h-1.5 orientation-horizontal:w-full orientation-vertical:w-1.5 orientation-vertical:flex-1 grow",
    ],
  }),
};


// File: namespace.ts

export {
  SliderHeader as Header,
  SliderOutput as Output,
  SliderRange as Range,
  SliderRoot as Root,
  SliderThumb as Thumb,
  SliderTrack as Track,
} from "./slider";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { Slider } from "~/components/ui/slider";

<Slider.Root>
  <Slider.Track>
    <Slider.Filler />
    <Slider.Thumb />
  </Slider.Track>
</Slider.Root>;
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import {
  SliderFiller,
  SliderRoot,
  SliderThumb,
  SliderTrack,
} from "~/components/ui/slider";

<SliderRoot>
  <SliderTrack>
    <SliderFiller />
    <SliderThumb />
  </SliderTrack>
</SliderRoot>;
```

</Tabs.Content>

</Tabs.Root>

## Examples

### Multiple Thumbs

## Component Preview: slider-multiple-demo

```tsx
import { Slider } from "~/components/ui/slider";

export function SliderMultipleDemo() {
  return (
    <Slider.Root
      aria-label="Multiple value slider"
      defaultValue={[25, 50]}
      maxValue={100}
      step={1}
    >
      <Slider.Track>
        <Slider.Range />
        <Slider.Thumb />
      </Slider.Track>
    </Slider.Root>
  );
}
```


### With Label

## Component Preview: slider-with-label-demo

```tsx
import { Label } from "~/components/ui/label";
import { Slider } from "~/components/ui/slider";

export function SliderWithLabelDemo() {
  return (
    <Slider.Root
      aria-label="Volume"
      formatOptions={{
        style: "unit",
        unit: "percent",
        maximumFractionDigits: 0,
      }}
    >
      <Slider.Header>
        <Label>Volume</Label>

        <Slider.Output />
      </Slider.Header>
      <Slider.Track>
        <Slider.Range />
        <Slider.Thumb />
      </Slider.Track>
    </Slider.Root>
  );
}
```


### Custom Stepping

## Component Preview: slider-custom-stepping-demo

```tsx
import { Label } from "~/components/ui/label";
import { Slider } from "~/components/ui/slider";

export function SliderCustomSteppingDemo() {
  return (
    <Slider.Root
      aria-label="Rating"
      className="max-w-1/2"
      defaultValue={[0]}
      maxValue={5}
      step={0.5}
    >
      <Slider.Header>
        <Label>Rating</Label>

        <Slider.Output />
      </Slider.Header>
      <Slider.Track>
        <Slider.Range />
        <Slider.Thumb />
      </Slider.Track>
    </Slider.Root>
  );
}
```


### Vertical

## Component Preview: slider-vertical-demo

```tsx
import { Slider } from "~/components/ui/slider";

export function SliderVerticalDemo() {
  return (
    <Slider.Root
      aria-label="Vertical slider"
      defaultValue={[50]}
      orientation="vertical"
    >
      <Slider.Track>
        <Slider.Range />
        <Slider.Thumb />
      </Slider.Track>
    </Slider.Root>
  );
}
```


### With Tooltip

## Component Preview: slider-with-tooltip

> ⚠️ Component 'slider-with-tooltip' not found in registry


<Alert.Root className="mt-6" variant="warning">
  <AlertIcon variant="warning" className="size-4" />
  <Alert.Title>Under Construction</Alert.Title>
  <Alert.Description>
    This component is currently being built. Check back soon for updates!
  </Alert.Description>
</Alert.Root>


# Spinner (/docs/components/spinner)

---
title: Spinner
description: Displays a spinner to indicate loading state.
---

## Component Preview: spinner-demo

```tsx
import { Button } from "~/components/ui/button";
import { Spinner } from "~/components/ui/spinner";

export function SpinnerDemo() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button isPending size="sm">
        <Spinner />
        Loading...
      </Button>
      <Button isPending size="sm" variant="outline">
        <Spinner />
        Please wait
      </Button>
      <Button isPending size="sm" variant="secondary">
        <Spinner />
        Processing
      </Button>
    </div>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/spinner
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: spinner

```tsx
import { cx } from "cva";
import { cn } from "~/lib/cva";

export interface SpinnerProps
  extends Omit<React.ComponentProps<"div">, "children"> {}

const bars = Array.from({ length: 12 }, (_, i) => ({
  id: i,
}));

export function Spinner({ className, ...props }: SpinnerProps) {
  return (
    <div
      className={cn("size-4 text-current", className)}
      data-slot="spinner"
      {...props}
    >
      <div className="relative top-1/2 left-1/2 h-[inherit] w-[inherit]">
        {bars.map((bar) => (
          <div
            aria-hidden="true"
            className={cx(
              "motion-opacity-loop-5/reset motion-duration-1200 motion-ease-linear absolute -top-[3.9%] -left-[10%] h-[8%] w-[24%] rounded-md bg-current"
            )}
            data-slot="spinner-bar"
            key={bar.id}
            style={{
              animationDelay: `-${1.3 - bar.id * 0.1}s`,
              transform: `rotate(${30 * bar.id}deg) translate(146%)`,
            }}
          />
        ))}
      </div>
    </div>
  );
}
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

```tsx
import { Spinner } from "~/components/ui/spinner";

<Spinner />
```

## Examples

### Size

Use the `size-` utility class to change the size of the spinner.

## Component Preview: spinner-size-demo

```tsx
import { Spinner } from "~/components/ui/spinner";

export function SpinnerSizeDemo() {
  return (
    <div className="flex items-center gap-6">
      <Spinner className="size-3" />
      <Spinner className="size-4" />
      <Spinner className="size-6" />
      <Spinner className="size-8" />
    </div>
  );
}
```


### Color

Use the `text-` utility class to change the color of the spinner.

## Component Preview: spinner-color-demo

```tsx
import { Spinner } from "~/components/ui/spinner";

export function SpinnerColorDemo() {
  return (
    <div className="flex items-center gap-6">
      <Spinner className="size-6 text-red-500" />
      <Spinner className="size-6 text-green-500" />
      <Spinner className="size-6 text-blue-500" />
      <Spinner className="size-6 text-yellow-500" />
      <Spinner className="size-6 text-purple-500" />
    </div>
  );
}
```



# Switch (/docs/components/switch)

---
title: Switch
description: A control that allows the user to toggle between on and off.
links:
  docs: https://react-aria.adobe.com/Switch
---

## Component Preview: switch-demo

```tsx
import { Switch } from "~/components/ui/switch";

export function SwitchDemo() {
  return (
    <Switch.Root>
      <Switch.Track>
        <Switch.Thumb />
      </Switch.Track>
      Airplane Mode
    </Switch.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/switch
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: switch

```tsx
// File: index.ts

export * as Switch from "./namespace";
export * from "./styles";
export * from "./switch";


// File: switch.tsx

"use client";

import { composeRenderProps, Switch } from "react-aria-components";
import { SwitchStyles } from "./styles";

export interface SwitchRootProps extends React.ComponentProps<typeof Switch> {}

export function SwitchRoot({ className, ...props }: SwitchRootProps) {
  return (
    <Switch
      {...props}
      className={composeRenderProps(className, (className) =>
        SwitchStyles.Root({
          className,
        })
      )}
      data-slot="switch-root"
    />
  );
}

export interface SwitchTrackProps extends React.ComponentProps<"span"> {}

export function SwitchTrack({ className, ...props }: SwitchTrackProps) {
  return (
    <span
      {...props}
      className={SwitchStyles.Track({ className })}
      data-slot="switch-track"
    />
  );
}

export interface SwitchThumbProps extends React.ComponentProps<"span"> {}

export function SwitchThumb({ className, ...props }: SwitchThumbProps) {
  return (
    <span
      {...props}
      className={SwitchStyles.Thumb({ className })}
      data-slot="switch-thumb"
    />
  );
}


// File: styles.ts

import { compose, cva } from "~/lib/cva";
import { LabelStyles } from "~/components/ui/label";

export const SwitchStyles = {
  Root: compose(
    cva({
      base: ["group inline-flex touch-none items-center gap-2"],
    }),
    LabelStyles
  ),
  Thumb: cva({
    base: [
      "pointer-events-none block size-4 translate-x-0 rounded-full shadow-lg ring-0 transition-all",
      "group-selected:ml-4",
      "group-pressed:w-5",
      "group-selected:group-pressed:ml-3",

      "bg-background dark:bg-foreground dark:group-selected:bg-primary-foreground",
    ],
  }),
  Track: cva({
    base: [
      "group inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input shadow-xs transition",
      "group-focus-visible:ring-default",
      "group-invalid:ring-destructive",
      "group-disabled:cursor-not-allowed group-disabled:opacity-50",
      "group-selected:bg-primary",
    ],
  }),
};


// File: namespace.ts

export {
  SwitchRoot as Root,
  SwitchThumb as Thumb,
  SwitchTrack as Track,
} from "./switch";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { Switch } from "~/components/ui/switch";

<Switch.Root>
  <Switch.Track>
    <Switch.Thumb />
  </Switch.Track>
</Switch.Root>;
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import { SwitchRoot, SwitchTrack, SwitchThumb } from "~/components/ui/switch";

<SwitchRoot>
  <SwitchTrack>
    <SwitchThumb />
  </SwitchTrack>
</SwitchRoot>;
```

</Tabs.Content>

</Tabs.Root>

## Examples

### Group

## Component Preview: switch-group-demo

```tsx
import { Switch } from "~/components/ui/switch";

export function SwitchGroupDemo() {
  return (
    <Switch.Root className="gap-6 rounded-lg border selected:border-blue-600 p-4 font-medium text-sm leading-none transition-colors">
      <div className="flex flex-col gap-1">
        <div className="font-medium">Share across devices</div>
        <div className="font-normal text-muted-foreground text-sm">
          Focus is shared across devices, and turns off when you leave the app.
        </div>
      </div>

      <Switch.Track className="group-selected:bg-blue-500 dark:group-selected:bg-blue-600">
        <Switch.Thumb />
      </Switch.Track>
    </Switch.Root>
  );
}
```


### Form

## Component Preview: switch-form

> ⚠️ Component 'switch-form' not found in registry


## API Reference

### Root

<PropsTable
  data={[
    {
      name: "defaultSelected",
      required: false,
      typeSimple: "boolean",
      default: "false",
      description: "Whether the Switch should be selected (uncontrolled).",
    },
    {
      name: "isSelected",
      required: false,
      typeSimple: "boolean",
      default: "false",
      description: "Whether the Switch should be selected (controlled).",
    },
    {
      name: "onChange",
      required: false,
      typeSimple: "function",
      type: "((isSelected: boolean) => void)",
      description:
        "Handler that is called when the Switch's selection state changes.",
    },
  ]}
/>


# Table (/docs/components/table)

---
title: Table
description: A responsive table component.
links:
  docs: https://ui.shadcn.com/docs/components/table
---

## Component Preview: table-demo

```tsx
import { Table } from "~/components/ui/table";

const invoices = [
  {
    invoice: "INV001",
    paymentMethod: "Credit Card",
    paymentStatus: "Paid",
    totalAmount: "$250.00",
  },
  {
    invoice: "INV002",
    paymentMethod: "PayPal",
    paymentStatus: "Pending",
    totalAmount: "$150.00",
  },
  {
    invoice: "INV003",
    paymentMethod: "Bank Transfer",
    paymentStatus: "Unpaid",
    totalAmount: "$350.00",
  },
  {
    invoice: "INV004",
    paymentMethod: "Credit Card",
    paymentStatus: "Paid",
    totalAmount: "$450.00",
  },
  {
    invoice: "INV005",
    paymentMethod: "PayPal",
    paymentStatus: "Paid",
    totalAmount: "$550.00",
  },
  {
    invoice: "INV006",
    paymentMethod: "Bank Transfer",
    paymentStatus: "Pending",
    totalAmount: "$200.00",
  },
  {
    invoice: "INV007",
    paymentMethod: "Credit Card",
    paymentStatus: "Unpaid",
    totalAmount: "$300.00",
  },
];

export function TableDemo() {
  return (
    <Table.Root>
      <Table.Caption>A list of your recent invoices.</Table.Caption>
      <Table.Header>
        <Table.Row>
          <Table.Head className="w-[100px]">Invoice</Table.Head>
          <Table.Head>Status</Table.Head>
          <Table.Head>Method</Table.Head>
          <Table.Head className="text-right">Amount</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {invoices.map((invoice) => (
          <Table.Row key={invoice.invoice}>
            <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
            <Table.Cell>{invoice.paymentStatus}</Table.Cell>
            <Table.Cell>{invoice.paymentMethod}</Table.Cell>
            <Table.Cell className="text-right">
              {invoice.totalAmount}
            </Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
      <Table.Footer>
        <Table.Row>
          <Table.Cell colSpan={3}>Total</Table.Cell>
          <Table.Cell className="text-right">$2,500.00</Table.Cell>
        </Table.Row>
      </Table.Footer>
    </Table.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/table
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: table

```tsx
// File: index.ts

export * as Table from "./namespace";
export * from "./styles";
export * from "./table";


// File: table.tsx

import { TableStyles } from "./styles";

export interface TableRootProps extends React.ComponentProps<"table"> {}

export function TableRoot({ className, ...props }: TableRootProps) {
  return (
    <div className={TableStyles.Container()} data-slot="table-container">
      <table
        className={TableStyles.Root({ className })}
        data-slot="table"
        {...props}
      />
    </div>
  );
}

export interface TableHeaderProps extends React.ComponentProps<"thead"> {}

export function TableHeader({ className, ...props }: TableHeaderProps) {
  return (
    <thead
      className={TableStyles.Header({ className })}
      data-slot="table-header"
      {...props}
    />
  );
}

export interface TableBodyProps extends React.ComponentProps<"tbody"> {}

export function TableBody({ className, ...props }: TableBodyProps) {
  return (
    <tbody
      className={TableStyles.Body({ className })}
      data-slot="table-body"
      {...props}
    />
  );
}

export interface TableFooterProps extends React.ComponentProps<"tfoot"> {}

export function TableFooter({ className, ...props }: TableFooterProps) {
  return (
    <tfoot
      className={TableStyles.Footer({ className })}
      data-slot="table-footer"
      {...props}
    />
  );
}

export interface TableRowProps extends React.ComponentProps<"tr"> {}

export function TableRow({ className, ...props }: TableRowProps) {
  return (
    <tr
      className={TableStyles.Row({ className })}
      data-slot="table-row"
      {...props}
    />
  );
}

export interface TableHeadProps extends React.ComponentProps<"th"> {}

export function TableHead({ className, ...props }: TableHeadProps) {
  return (
    <th
      className={TableStyles.Head({ className })}
      data-slot="table-head"
      {...props}
    />
  );
}

export interface TableCellProps extends React.ComponentProps<"td"> {}

export function TableCell({ className, ...props }: TableCellProps) {
  return (
    <td
      className={TableStyles.Cell({ className })}
      data-slot="table-cell"
      {...props}
    />
  );
}

export interface TableCaptionProps extends React.ComponentProps<"caption"> {}

export function TableCaption({ className, ...props }: TableCaptionProps) {
  return (
    <caption
      className={TableStyles.Caption({ className })}
      data-slot="table-caption"
      {...props}
    />
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const TableStyles = {
  Body: cva({
    base: ["[&_tr:last-child]:border-0"],
  }),
  Caption: cva({
    base: ["mt-4 text-muted-foreground text-sm"],
  }),
  Cell: cva({
    base: [
      "whitespace-nowrap p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
    ],
  }),
  Container: cva({
    base: ["relative w-full overflow-x-auto"],
  }),
  Footer: cva({
    base: ["border-t bg-muted/50 font-medium [&>tr]:last:border-b-0"],
  }),
  Head: cva({
    base: [
      "h-10 whitespace-nowrap px-2 text-left align-middle font-medium text-foreground",
      "[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
    ],
  }),
  Header: cva({
    base: ["[&_tr]:border-b"],
  }),
  Root: cva({
    base: ["w-full caption-bottom text-sm"],
  }),
  Row: cva({
    base: [
      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
    ],
  }),
};


// File: namespace.ts

export {
  TableBody as Body,
  TableCaption as Caption,
  TableCell as Cell,
  TableFooter as Footer,
  TableHead as Head,
  TableHeader as Header,
  TableRoot as Root,
  TableRow as Row,
} from "./table";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { Table } from "~/components/ui/table";

<Table.Root>
  <Table.Caption>A list of your recent invoices.</Table.Caption>
  <Table.Header>
    <Table.Row>
      <Table.Head className="w-[100px]">Invoice</Table.Head>
      <Table.Head>Status</Table.Head>
      <Table.Head>Method</Table.Head>
      <Table.Head className="text-right">Amount</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell className="font-medium">INV001</Table.Cell>
      <Table.Cell>Paid</Table.Cell>
      <Table.Cell>Credit Card</Table.Cell>
      <Table.Cell className="text-right">$250.00</Table.Cell>
    </Table.Row>
  </Table.Body>
  <Table.Footer>
    <Table.Row>
      <Table.Cell colSpan={3}>Total</Table.Cell>
      <Table.Cell className="text-right">$2,500.00</Table.Cell>
    </Table.Row>
  </Table.Footer>
</Table.Root>;
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import {
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRoot,
  TableRow,
} from "~/components/ui/table";

<TableRoot>
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={3}>Total</TableCell>
      <TableCell className="text-right">$2,500.00</TableCell>
    </TableRow>
  </TableFooter>
</TableRoot>;
```

</Tabs.Content>

</Tabs.Root>

## Examples

### Sorting

## Component Preview: table-sorting

> ⚠️ Component 'table-sorting' not found in registry


### Resizable

## Component Preview: table-resizable

> ⚠️ Component 'table-resizable' not found in registry


## API Reference

### Root

<PropsTable
  data={[
    {
      name: "allowResize",
      required: false,
      typeSimple: "boolean",
      default: "false",
      description: (
        <>
          Makes the Table resizable by wrapping the Table within a{" "}
          <Code>{"<ResizableTableContainer />"}</Code>.
        </>
      ),
    },
    {
      name: "selectionBehavior",
      required: false,
      typeSimple: "enum",
      type: '"toggle" | "replace"',
      default: '"toggle"',
      description: "How multiple selection should behave in the collection.",
    },
    {
      name: "disabledBehavior",
      required: false,
      typeSimple: "enum",
      type: '"selection" | "all"',
      default: '"selection"',
      description: (
        <>
          Whether <Code>disabledKeys</Code> applies to all interactions, or only
          selection.
        </>
      ),
    },
    {
      name: "selectionMode",
      required: false,
      typeSimple: "enum",
      type: '"none" | "single" | "multiple',
      description: "The type of selection that is allowed in the collection.",
    },
    {
      name: "disallowEmptySelection",
      required: false,
      typeSimple: "boolean",
      description: "Whether the collection allows empty selection.",
    },
  ]}
/>


# Tabs (/docs/components/tabs)

---
title: Tabs
description: Tabs organize content into multiple sections and allow users to navigate between them.
links:
  docs: https://react-aria.adobe.com/Tabs
---

## Component Preview: tabs-demo

```tsx
import { Button } from "~/components/ui/button/button";
import { Card } from "~/components/ui/card";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label/label";
import { Tabs } from "~/components/ui/tabs";
import { TextField } from "~/components/ui/text-field";

export function TabsDemo() {
  return (
    <Tabs.Root className="w-full max-w-[400px]" defaultSelectedKey="account">
      <Tabs.List className="grid w-full grid-cols-2">
        <Tabs.Trigger id="account">Account</Tabs.Trigger>
        <Tabs.Trigger id="password">Password</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content id="account">
        <Card.Root>
          <Card.Header>
            <Card.Title>Account</Card.Title>
            <Card.Description>
              Make changes to your account here. Click save when you&apos;re
              done.
            </Card.Description>
          </Card.Header>
          <Card.Content className="grid gap-6">
            <TextField defaultValue="Pedro Duarte">
              <Label>Name</Label>
              <Input />
            </TextField>
            <TextField defaultValue="@peduarte">
              <Label>Username</Label>
              <Input />
            </TextField>
          </Card.Content>
          <Card.Footer>
            <Button>Save changes</Button>
          </Card.Footer>
        </Card.Root>
      </Tabs.Content>
      <Tabs.Content id="password">
        <Card.Root>
          <Card.Header>
            <Card.Title>Password</Card.Title>
            <Card.Description>
              Change your password here. After saving, you&apos;ll be logged
              out.
            </Card.Description>
          </Card.Header>
          <Card.Content className="grid gap-6">
            <TextField>
              <Label>Current password</Label>
              <Input type="password" />
            </TextField>
            <TextField>
              <Label>New password</Label>
              <Input type="password" />
            </TextField>
          </Card.Content>
          <Card.Footer>
            <Button>Save password</Button>
          </Card.Footer>
        </Card.Root>
      </Tabs.Content>
    </Tabs.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/tabs
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: tabs

```tsx
// File: index.ts

export * as Tabs from "./namespace";
export * from "./styles";
export * from "./tabs";


// File: tabs.tsx

"use client";

import {
  composeRenderProps,
  Tab,
  TabList,
  TabPanel,
  Tabs,
} from "react-aria-components";
import { TabsStyle } from "./styles";

export interface TabsRootProps extends React.ComponentProps<typeof Tabs> {}

export function TabsRoot({ className, ...props }: TabsRootProps) {
  return (
    <Tabs
      className={composeRenderProps(className, (className) =>
        TabsStyle.Root({ className })
      )}
      data-slot="tabs-root"
      {...props}
    />
  );
}

export interface TabsListProps<T extends object>
  extends React.ComponentProps<typeof TabList<T>> {}

export function TabsList<T extends object>({
  className,
  ...props
}: TabsListProps<T>) {
  return (
    <TabList
      className={composeRenderProps(className, (className) =>
        TabsStyle.List({ className })
      )}
      data-slot="tabs-list"
      {...props}
    />
  );
}

export interface TabsTriggerProps extends React.ComponentProps<typeof Tab> {}

export function TabsTrigger({ className, ...props }: TabsTriggerProps) {
  return (
    <Tab
      className={composeRenderProps(className, (className) =>
        TabsStyle.Trigger({ className })
      )}
      data-slot="tabs-trigger"
      {...props}
    />
  );
}

export interface TabsContentProps
  extends React.ComponentProps<typeof TabPanel> {}

export function TabsContent({ className, ...props }: TabsContentProps) {
  return (
    <TabPanel
      className={composeRenderProps(className, (className) =>
        TabsStyle.Content({ className })
      )}
      data-slot="tabs-content"
      {...props}
    />
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const TabsStyle = {
  Content: cva({
    base: ["flex-1 outline-none"],
  }),
  List: cva({
    base: [
      "inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground",
    ],
  }),
  Root: cva({
    base: ["flex flex-col gap-2"],
  }),
  Trigger: cva({
    base: [
      "inline-flex h-[calc(100%-1px)] flex-1 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-md border",
      "border-transparent px-2 py-1 font-medium text-foreground text-sm transition-[color,box-shadow]",
      "focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
      "disabled:pointer-events-none disabled:opacity-50",
      "selected:bg-background selected:shadow-sm",
      "dark:selected:border-input dark:selected:bg-input/30 dark:selected:text-foreground dark:text-muted-foreground",
      "[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
    ],
  }),
};


// File: namespace.ts

export {
  TabsContent as Content,
  TabsList as List,
  TabsRoot as Root,
  TabsTrigger as Trigger,
} from "./tabs";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { Tabs } from "~/components/ui/tabs";

<Tabs.Root>
  <Tabs.List>
    <Tabs.Trigger />
  </Tabs.List>
  <Tabs.Content />
</Tabs.Root>;
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import {
  TabsRoot,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "~/components/ui/tabs";

<TabsRoot>
  <TabsList>
    <TabsTrigger />
  </TabsList>
  <TabsContent />
</TabsRoot>;
```

</Tabs.Content>

</Tabs.Root>

## Examples

### Disabled

## Component Preview: tabs-disabled-demo

```tsx
import { Tabs } from "~/components/ui/tabs";

export function TabsDisabledDemo() {
  return (
    <Tabs.Root aria-label="Disabled tabs example">
      <Tabs.List>
        <Tabs.Trigger id="tab1">Tab 1</Tabs.Trigger>
        <Tabs.Trigger id="tab2" isDisabled>
          Tab 2
        </Tabs.Trigger>
        <Tabs.Trigger id="tab3">Tab 3</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content id="tab1">Content for Tab 1</Tabs.Content>
      <Tabs.Content id="tab2">Content for Tab 2</Tabs.Content>
      <Tabs.Content id="tab3">Content for Tab 3</Tabs.Content>
    </Tabs.Root>
  );
}
```


### Vertical

<Alert.Root variant="warning">
  <AlertIcon variant="warning" className="size-4" />
  <Alert.Title>Under Construction</Alert.Title>
  <Alert.Description>
    This component is currently being built. Check back soon for updates!
  </Alert.Description>
</Alert.Root>


# Textarea (/docs/components/textarea)

---
title: Textarea
description: Displays a form textarea or a component that looks like a textarea.
links:
  docs: https://react-aria.adobe.com/TextField#textarea
---

## Component Preview: textarea-demo

```tsx
import { Textarea } from "~/components/ui/textarea";

export function TextareaDemo() {
  return <Textarea placeholder="Type your message here." />;
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/textarea
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: textarea

```tsx
// File: index.ts

export * from "./styles";
export * from "./textarea";


// File: textarea.tsx

"use client";

import { composeRenderProps, TextArea } from "react-aria-components";
import { TextareaStyles } from "./styles";

export interface TextareaProps extends React.ComponentProps<typeof TextArea> {}

export function Textarea({ className, ...props }: TextareaProps) {
  return (
    <TextArea
      className={composeRenderProps(className, (className) =>
        TextareaStyles({ className })
      )}
      data-slot="textarea"
      {...props}
    />
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const TextareaStyles = cva({
  base: [
    "field-sizing-content flex min-h-16 w-full resize-none rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs",
    "outline-none transition-[color,box-shadow] placeholder:text-muted-foreground",
    "focus:border-ring focus:ring-[3px] focus:ring-ring/50",
    "disabled:cursor-not-allowed disabled:opacity-50",
    "aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
  ],
});
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

```tsx
import { Textarea } from "~/components/ui/textarea";

<Textarea />;
```

## Examples

### Disabled

## Component Preview: textarea-disabled-demo

```tsx
import { Textarea } from "~/components/ui/textarea";

export function TextareaDisabledDemo() {
  return <Textarea disabled placeholder="Type your message here." />;
}
```


### With Label

## Component Preview: textarea-with-label-demo

```tsx
import { Label } from "~/components/ui/label";
import { Textarea } from "~/components/ui/textarea";

export function TextareaWithLabelDemo() {
  return (
    <div className="grid w-full gap-3">
      <Label htmlFor="message">Your message</Label>
      <Textarea id="message" placeholder="Type your message here." />
    </div>
  );
}
```


### With Text

## Component Preview: textarea-with-text-demo

```tsx
import { Label } from "~/components/ui/label";
import { Textarea } from "~/components/ui/textarea";

export function TextareaWithTextDemo() {
  return (
    <div className="grid w-full gap-3">
      <Label htmlFor="message">Your message</Label>
      <Textarea id="message" placeholder="Type your message here." />
      <p className="text-muted-foreground text-sm">
        Your message will be copied to the support team.
      </p>
    </div>
  );
}
```


### Auto Resize

## Component Preview: textarea-auto-resize-demo

```tsx
import { Textarea } from "~/components/ui/textarea";

export function TextareaAutoResizeDemo() {
  return (
    <Textarea
      className="field-sizing-content max-h-[10lh]"
      placeholder="Add a comment..."
    />
  );
}
```


<Alert.Root className="mt-6" variant="warning">
  <AlertIcon variant="warning" className="size-4" />
  <Alert.Description>
    The `field-sizing` CSS property is not supported in all browsers. See the
    [browser compatibility](https://caniuse.com/mdn-css_properties_field-sizing)
    table for more details.
  </Alert.Description>
</Alert.Root>

### Form

## Component Preview: textarea-form

> ⚠️ Component 'textarea-form' not found in registry



# TextField (/docs/components/textfield)

---
title: TextField
description: A text field allows a user to enter a plain text value with a keyboard.
links:
  docs: https://react-aria.adobe.com/TextField
---

<Alert.Root>
  <AlertIcon className="size-4" />
  <Alert.Description>
    TextField is a **client-only adapter** around React Aria Components. It
    exists to: - Explicitly define a client boundary (`"use client"`) - Isolate
    React Aria as an implementation detail - Provide a stable public API and
    consistent developer experience **TextField is not meant to be used
    directly.** It should be composed into [Field](/docs/components/field) for
    proper layout and structure. See the [Forms architecture
    overview](/docs/forms) to understand how TextField, Field, and Form work
    together.
  </Alert.Description>
</Alert.Root>

## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/text-field
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: text-field

```tsx
"use client";

import { TextField as RACTextField } from "react-aria-components";

export interface TextFieldProps
  extends React.ComponentProps<typeof RACTextField> {}

export function TextField(props: TextFieldProps) {
  return <RACTextField data-slot="TextField" {...props} />;
}
```


</Steps>

</Tabs.Content>

</Tabs.Root>

## Overview

TextField is a **behavior and accessibility layer** built on React Aria. It is not a visual component—it provides:

- Automatic ID wiring between label, input, description, and error
- Validation state management
- Keyboard and focus handling
- ARIA attributes for screen readers

TextField is designed to be composed **into** the [Field](/docs/components/field) component, which handles layout and visual structure.

### Before you start

TextField is **not responsible for**:

- Layout or visual structure
- Rendering labels, descriptions, or error messages
- Styling or positioning

For complete form fields, use [Field](/docs/components/field) as your composition root. TextField handles behavior; Field handles presentation.

**Recommended reading:**

- [Field documentation](/docs/components/field) – Learn about the composition root
- [Forms architecture overview](/docs/forms) – Understand how all pieces fit together

## Anatomy

TextField wraps your input and connects it to Field's label, description, and error elements.

```tsx
import { Field } from "~/components/ui/field";
import { Input } from "~/components/ui/input";
import { TextField } from "~/components/ui/text-field";

<Field.Root render={<TextField type="email" />}>
  <Field.Label>Email</Field.Label>
  <Input placeholder="john@example.com" />
  <Field.Description>We'll never share your email.</Field.Description>
  <Field.Error />
</Field.Root>;
```

The `render` prop on `Field.Root` accepts the TextField component. This pattern allows Field to provide layout while TextField provides behavior.

## Examples

### Basic

## Component Preview: textfield-demo

```tsx
import { Field } from "~/components/ui/field";
import { Input } from "~/components/ui/input";
import { TextField } from "~/components/ui/text-field";

export function TextfieldDemo() {
  return (
    <Field.Root render={<TextField />}>
      <Field.Label>Name</Field.Label>
      <Input placeholder="Enter your name" />
    </Field.Root>
  );
}
```


### With Description

## Component Preview: textfield-with-description-demo

```tsx
import { Field } from "~/components/ui/field";
import { Input } from "~/components/ui/input";
import { TextField } from "~/components/ui/text-field";

export function TextfieldWithDescriptionDemo() {
  return (
    <Field.Root render={<TextField type="email" />}>
      <Field.Label>Email</Field.Label>
      <Input placeholder="john@example.com" />
      <Field.Description>
        We'll never share your email with anyone.
      </Field.Description>
    </Field.Root>
  );
}
```


### With Icon

## Component Preview: textfield-with-icon-demo

```tsx
import { MailIcon } from "lucide-react";
import { Field } from "~/components/ui/field";
import { InputGroup } from "~/components/ui/input-group";
import { TextField } from "~/components/ui/text-field";

export function TextfieldWithIconDemo() {
  return (
    <Field.Root render={<TextField type="email" />}>
      <Field.Label>Email</Field.Label>
      <InputGroup.Root>
        <InputGroup.Addon>
          <MailIcon className="size-4 text-muted-foreground" />
        </InputGroup.Addon>
        <InputGroup.Input placeholder="john@example.com" />
      </InputGroup.Root>
    </Field.Root>
  );
}
```


### Password

## Component Preview: textfield-password-demo

```tsx
"use client";

import { EyeIcon, EyeOffIcon } from "lucide-react";
import { useState } from "react";
import { Field } from "~/components/ui/field";
import { InputGroup } from "~/components/ui/input-group";
import { TextField } from "~/components/ui/text-field";

export function TextfieldPasswordDemo() {
  const [showPassword, setShowPassword] = useState(false);

  return (
    <Field.Root render={<TextField />}>
      <Field.Label>Password</Field.Label>
      <InputGroup.Root>
        <InputGroup.Input
          placeholder="Enter your password"
          type={showPassword ? "text" : "password"}
        />
        <InputGroup.Addon align="inline-end">
          <InputGroup.Button
            aria-label={showPassword ? "Hide password" : "Show password"}
            onClick={() => setShowPassword(!showPassword)}
            size="icon-xs"
            variant="ghost"
          >
            {showPassword ? (
              <EyeOffIcon className="size-4" />
            ) : (
              <EyeIcon className="size-4" />
            )}
          </InputGroup.Button>
        </InputGroup.Addon>
      </InputGroup.Root>
    </Field.Root>
  );
}
```


### Validation

TextField integrates with React Aria's validation system. Use `isRequired`, `isInvalid`, or custom validation.

## Component Preview: textfield-validation-demo

```tsx
import { Field } from "~/components/ui/field";
import { Input } from "~/components/ui/input";
import { TextField } from "~/components/ui/text-field";

export function TextfieldValidationDemo() {
  return (
    <div className="flex flex-col gap-4">
      <Field.Root render={<TextField isRequired />}>
        <Field.Label>Required field</Field.Label>
        <Input placeholder="This field is required" />
      </Field.Root>
      <Field.Root render={<TextField isInvalid />}>
        <Field.Label>Invalid field</Field.Label>
        <Input placeholder="This field has an error" />
        <Field.Error>Please enter a valid value.</Field.Error>
      </Field.Root>
      <Field.Root render={<TextField isDisabled />}>
        <Field.Label>Disabled field</Field.Label>
        <Input placeholder="This field is disabled" />
      </Field.Root>
      <Field.Root
        render={<TextField defaultValue="Read only value" isReadOnly />}
      >
        <Field.Label>Read-only field</Field.Label>
        <Input />
      </Field.Root>
    </div>
  );
}
```


### Form

TextField works with the [Form](/docs/components/form) component for submission and validation.

## Component Preview: textfield-form-demo

```tsx
"use client";

import { toast } from "sonner";
import { Button } from "~/components/ui/button";
import { Field } from "~/components/ui/field";
import { Form } from "~/components/ui/form";
import { Input } from "~/components/ui/input";
import { TextField } from "~/components/ui/text-field";

export function TextfieldFormDemo() {
  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const data = Object.fromEntries(formData);
    toast(JSON.stringify(data, null, 2));
  }

  return (
    <Form
      className="flex w-full max-w-sm flex-col gap-4"
      onSubmit={handleSubmit}
    >
      <Field.Root render={<TextField isRequired name="email" type="email" />}>
        <Field.Label>Email</Field.Label>
        <Input placeholder="john@example.com" />
        <Field.Description>We'll never share your email.</Field.Description>
        <Field.Error />
      </Field.Root>
      <Field.Root render={<TextField isRequired name="username" />}>
        <Field.Label>Username</Field.Label>
        <Input placeholder="johndoe" />
        <Field.Error />
      </Field.Root>
      <Button type="submit">Submit</Button>
    </Form>
  );
}
```


## Props

TextField accepts all props from React Aria's [TextField](https://react-aria.adobe.com/TextField#api).

| Prop           | Type                      | Default  | Description                         |
| -------------- | ------------------------- | -------- | ----------------------------------- |
| `type`         | `string`                  | `"text"` | Input type (email, password, etc.)  |
| `isRequired`   | `boolean`                 | `false`  | Whether the field is required       |
| `isInvalid`    | `boolean`                 | `false`  | Whether the field is in error state |
| `isDisabled`   | `boolean`                 | `false`  | Whether the field is disabled       |
| `isReadOnly`   | `boolean`                 | `false`  | Whether the field is read-only      |
| `value`        | `string`                  |          | Controlled value                    |
| `defaultValue` | `string`                  |          | Default value (uncontrolled)        |
| `onChange`     | `(value: string) => void` |          | Called when value changes           |
| `name`         | `string`                  |          | Form field name                     |
| `autoComplete` | `string`                  |          | Autocomplete hint                   |
| `maxLength`    | `number`                  |          | Maximum character length            |
| `minLength`    | `number`                  |          | Minimum character length            |
| `pattern`      | `string`                  |          | Validation pattern                  |

## Accessibility

When TextField is composed with Field:

- `Field.Label` is automatically associated via `aria-labelledby`
- `Field.Description` is associated via `aria-describedby`
- `Field.Error` is associated via `aria-describedby` when invalid
- Focus management and keyboard navigation are handled automatically

### Without TextField

If you use `Field.Root` with `Input` directly (without TextField), you must manually wire IDs:

```tsx
<Field.Root>
  <Field.Label htmlFor="email">Email</Field.Label>
  <Input id="email" aria-describedby="email-desc" />
  <Field.Description id="email-desc">Helper text</Field.Description>
</Field.Root>
```

This approach loses React Aria's automatic association and is not recommended for production forms.


# Toast (/docs/components/toast)

---
title: Toast
description: A succinct message that is displayed temporarily.
links:
  docs: https://sonner.emilkowal.ski
---

## Component Preview: toast-demo

```tsx
"use client";

import { toast } from "sonner";
import { Button } from "~/components/ui/button";

export function ToastDemo() {
  return (
    <Button onPress={() => toast("Event has been created")} variant="outline">
      Show Toast
    </Button>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/toast
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install next-themes sonner
```

<Step>Copy and paste the following code into your project.</Step>

## Component Source: toast

```tsx
"use client";

import { useTheme } from "next-themes";
import { Toaster as Sonner, type ToasterProps } from "sonner";

export function Toaster(props: ToasterProps) {
  const { theme = "system" } = useTheme();

  return (
    <Sonner
      style={
        {
          "--normal-background": "var(--popover)",
          "--normal-border": "var(--border)",
          "--normal-text": "var(--popover-foreground)",
        } as React.CSSProperties
      }
      theme={theme as ToasterProps["theme"]}
      {...props}
    />
  );
}
```


<Step>Add the Toaster component</Step>

```tsx title="src/app/providers.tsx"
"use client";

import { ThemeProvider } from "next-themes";
import { useRouter } from "next/navigation";
import { RouterProvider } from "react-aria-components";
import { Toaster } from "~/components/ui/toast"; // [!code highlight]

declare module "react-aria-components" {
  interface RouterConfig {
    routerOptions: NonNullable<
      Parameters<ReturnType<typeof useRouter>["push"]>[1]
    >;
  }
}

interface ProvidersProps {
  children: React.ReactNode;
}

export function Providers({ children }: ProvidersProps) {
  const router = useRouter();

  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      <RouterProvider navigate={router.push}>
        {children}
        {/* [!code highlight] */}
        <Toaster />
      </RouterProvider>
    </ThemeProvider>
  );
}
```

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

```tsx
import { toast } from "sonner";

toast("Hello, World!", {
  description: "This is a toast message.",
});
```

## Examples

### With Description

## Component Preview: toast-with-description-demo

```tsx
"use client";

import { toast } from "sonner";
import { Button } from "~/components/ui/button";

export function ToastWithDescriptionDemo() {
  return (
    <Button
      onPress={() =>
        toast.message("Event has been created", {
          description: "Monday, January 3rd at 6:00pm",
        })
      }
      variant="outline"
    >
      Show Toast
    </Button>
  );
}
```


### Status

## Component Preview: toast-status-demo

```tsx
"use client";

import { toast } from "sonner";
import { Button } from "~/components/ui/button";

export function ToastStatusDemo() {
  return (
    <div className="grid grid-cols-2 gap-2">
      <ToastSuccess />
      <ToastInfo />
      <ToastWarning />
      <ToastError />
    </div>
  );
}

function ToastSuccess() {
  return (
    <Button
      onPress={() => toast.success("Event has been created")}
      variant="outline"
    >
      Success
    </Button>
  );
}

function ToastInfo() {
  return (
    <Button
      onPress={() =>
        toast.info("Be at the area 10 minutes before the event time")
      }
      variant="outline"
    >
      Info
    </Button>
  );
}

function ToastWarning() {
  return (
    <Button
      onPress={() =>
        toast.warning("Event start time cannot be earlier than 8am")
      }
      variant="outline"
    >
      Warning
    </Button>
  );
}

function ToastError() {
  return (
    <Button
      onPress={() => toast.error("Event has not been created")}
      variant="outline"
    >
      Error
    </Button>
  );
}
```


### Promise

## Component Preview: toast-promise-demo

```tsx
"use client";

import { toast } from "sonner";
import { Button } from "~/components/ui/button";

async function promise() {
  await new Promise((resolve) => setTimeout(resolve, 2000));

  if (Math.random() > 0.5) {
    throw new Error("Failed to add toast");
  }

  return {
    name: "Sonner",
  };
}

export function ToastPromiseDemo() {
  return (
    <Button
      onPress={() =>
        toast.promise(promise, {
          loading: "Loading...",
          success: (data) => `${data.name} toast has been added`,
          error: (err) => `Error: ${err.message}`,
        })
      }
      variant="outline"
    >
      Promise
    </Button>
  );
}
```


### Custom

## Component Preview: toast-custom-demo

```tsx
"use client";

import { XIcon } from "lucide-react";
import { toast } from "sonner";
import { Button } from "~/components/ui/button";

export function ToastCustomDemo() {
  return (
    <Button
      onPress={() =>
        toast.custom((t) => (
          <div className="flex w-full items-center rounded-lg border bg-popover p-4 shadow-lg md:max-w-[364px]">
            <div className="flex flex-1 items-center">
              <div className="w-full">
                <p className="font-medium text-sm">Event has been created</p>
                <p className="mt-1 text-muted-foreground text-sm">
                  Monday, January 3rd at 6:00pm
                </p>
              </div>
            </div>

            <Button
              className="transform-(--toast-close-button-transform) absolute top-0 left-0 grid size-5 pressed:scale-95 cursor-pointer place-content-center rounded-full"
              onPress={() => toast.dismiss(t)}
              size="icon"
              variant="secondary"
            >
              <XIcon className="size-3" />
            </Button>
          </div>
        ))
      }
      variant="outline"
    >
      Show Toast
    </Button>
  );
}
```



# Toggle Group (/docs/components/toggle-group)

---
title: Toggle Group
description: A set of two-state buttons that can be toggled on or off.
links:
  docs: https://react-aria.adobe.com/ToggleButtonGroup
  api: https://react-aria.adobe.com/ToggleButtonGroup#api
---

## Component Preview: toggle-group-demo

```tsx
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";

import { ToggleGroup } from "~/components/ui/toggle-group";

export function ToggleGroupDemo() {
  return (
    <ToggleGroup.Root selectionMode="multiple">
      <ToggleGroup.Item aria-label="Toggle bold" id="bold">
        <BoldIcon className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle italic" id="italic">
        <ItalicIcon className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle underline" id="underline">
        <UnderlineIcon className="size-4" />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/toggle-group
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: toggle-group

```tsx
// File: index.ts

export * as ToggleGroup from "./namespace";
export * from "./styles";
export * from "./toggle-group";


// File: toggle-group.tsx

"use client";

import type { VariantProps } from "cva";
import { createContext, use } from "react";
import { ToggleButton, ToggleButtonGroup } from "react-aria-components";
import type { ToggleStyles } from "~/components/ui/toggle";
import { ToggleGroupStyles } from "./styles";

interface ToggleGroupContextValue extends VariantProps<typeof ToggleStyles> {
  spacing?: number;
}

const ToggleGroupContext = createContext<ToggleGroupContextValue>({
  size: "default",
  variant: "default",
  spacing: 0,
});

export interface ToggleGroupRootProps
  extends React.ComponentProps<typeof ToggleButtonGroup>,
    ToggleGroupContextValue {}

export function ToggleGroupRoot({
  className,
  variant,
  size,
  spacing = 0,
  ...props
}: ToggleGroupRootProps) {
  return (
    <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
      <ToggleButtonGroup
        className={ToggleGroupStyles.Root({ className })}
        data-size={size}
        data-slot="toggle-group-root"
        data-variant={variant}
        style={{ "--gap": spacing } as React.CSSProperties}
        {...props}
      />
    </ToggleGroupContext.Provider>
  );
}

export interface ToggleGroupItemProps
  extends React.ComponentProps<typeof ToggleButton>,
    VariantProps<typeof ToggleStyles> {}

export function ToggleGroupItem({
  className,
  children,
  variant,
  size,
  ...props
}: ToggleGroupItemProps) {
  const context = use(ToggleGroupContext);
  const _variant = context.variant ?? variant;
  const _size = context.size ?? size;
  const _spacing = context.spacing ?? 0;

  return (
    <ToggleButton
      className={ToggleGroupStyles.Item({
        variant: _variant,
        size: _size,
        className,
      })}
      data-size={_size}
      data-slot="toggle-group-item"
      data-spacing={_spacing}
      data-variant={_variant}
      {...props}
    >
      {children}
    </ToggleButton>
  );
}


// File: styles.ts

import { compose, cva } from "~/lib/cva";
import { ToggleStyles } from "../toggle/styles";

export const ToggleGroupStyles = {
  Root: cva({
    base: [
      "group/toggle-group-root flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md",
      "data-[spacing=default]:data-[variant=outline]:shadow-xs",
    ],
  }),
  Item: compose(
    ToggleStyles,
    cva({
      base: [
        "min-w-0 shrink-0 px-3",
        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:last:rounded-r-md data-[spacing=0]:first:rounded-l-md",
        "data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
      ],
    })
  ),
};


// File: namespace.ts

export {
  ToggleGroupItem as Item,
  ToggleGroupRoot as Root,
} from "./toggle-group";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

```tsx
import { ToggleGroup } from "~/components/ui/toggle-group";

<ToggleGroup.Root selectionMode="single">
  <ToggleGroup.Item id="a">A</ToggleGroup.Item>
  <ToggleGroup.Item id="b">B</ToggleGroup.Item>
  <ToggleGroup.Item id="c">C</ToggleGroup.Item>
</ToggleGroup.Root>;
```

## Examples

### Outline

## Component Preview: toggle-group-outline-demo

```tsx
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";

import { ToggleGroup } from "~/components/ui/toggle-group";

export function ToggleGroupOutlineDemo() {
  return (
    <ToggleGroup.Root selectionMode="multiple" variant="outline">
      <ToggleGroup.Item aria-label="Toggle bold" id="bold">
        <BoldIcon className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle italic" id="italic">
        <ItalicIcon className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle underline" id="underline">
        <UnderlineIcon className="size-4" />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
}
```


### Single

## Component Preview: toggle-group-single-demo

```tsx
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";

import { ToggleGroup } from "~/components/ui/toggle-group";

export function ToggleGroupSingleDemo() {
  return (
    <ToggleGroup.Root selectionMode="single">
      <ToggleGroup.Item aria-label="Toggle bold" id="bold">
        <BoldIcon className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle italic" id="italic">
        <ItalicIcon className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle underline" id="underline">
        <UnderlineIcon className="size-4" />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
}
```


### Small

## Component Preview: toggle-group-sm-demo

```tsx
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";

import { ToggleGroup } from "~/components/ui/toggle-group";

export function ToggleGroupSmDemo() {
  return (
    <ToggleGroup.Root selectionMode="single" size="sm">
      <ToggleGroup.Item aria-label="Toggle bold" id="bold">
        <BoldIcon className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle italic" id="italic">
        <ItalicIcon className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle underline" id="underline">
        <UnderlineIcon className="size-4" />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
}
```


### Large

## Component Preview: toggle-group-lg-demo

```tsx
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";

import { ToggleGroup } from "~/components/ui/toggle-group";

export function ToggleGroupLgDemo() {
  return (
    <ToggleGroup.Root selectionMode="multiple" size="lg">
      <ToggleGroup.Item aria-label="Toggle bold" id="bold">
        <BoldIcon className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle italic" id="italic">
        <ItalicIcon className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle underline" id="underline">
        <UnderlineIcon className="size-4" />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
}
```


### Disabled

## Component Preview: toggle-group-disabled-demo

```tsx
import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";

import { ToggleGroup } from "~/components/ui/toggle-group";

export function ToggleGroupDisabledDemo() {
  return (
    <ToggleGroup.Root isDisabled selectionMode="multiple">
      <ToggleGroup.Item aria-label="Toggle bold" id="bold">
        <BoldIcon className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle italic" id="italic">
        <ItalicIcon className="size-4" />
      </ToggleGroup.Item>
      <ToggleGroup.Item aria-label="Toggle underline" id="underline">
        <UnderlineIcon className="size-4" />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
}
```


### Spacing

Use `spacing={2}{:tsx}` to add spacing between toggle group items.

## Component Preview: toggle-group-spacing-demo

```tsx
import { BookmarkIcon, HeartIcon, StarIcon } from "lucide-react";
import { ToggleGroup } from "~/components/ui/toggle-group";

export function ToggleGroupSpacing() {
  return (
    <ToggleGroup.Root
      selectionMode="multiple"
      size="sm"
      spacing={2}
      variant="outline"
    >
      <ToggleGroup.Item
        aria-label="Toggle star"
        className="selected:[&_svg]:fill-yellow-500 selected:[&_svg]:stroke-yellow-500"
        id="star"
      >
        <StarIcon className="transition-colors" />
        Star
      </ToggleGroup.Item>
      <ToggleGroup.Item
        aria-label="Toggle heart"
        className="selected:[&_svg]:fill-red-500 selected:[&_svg]:stroke-red-500"
        id="heart"
      >
        <HeartIcon className="transition-colors" />
        Heart
      </ToggleGroup.Item>
      <ToggleGroup.Item
        aria-label="Toggle bookmark"
        className="selected:[&_svg]:fill-blue-500 selected:[&_svg]:stroke-blue-500"
        id="bookmark"
      >
        <BookmarkIcon className="transition-colors" />
        Bookmark
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
}
```



# Toggle (/docs/components/toggle)

---
title: Toggle
description: A two-state button that can be either on or off.
links:
  docs: https://react-aria.adobe.com/ToggleButton
---

## Component Preview: toggle-demo

```tsx
import { BoldIcon } from "lucide-react";

import { Toggle } from "~/components/ui/toggle/toggle";

export function ToggleDemo() {
  return (
    <Toggle aria-label="Toggle bold">
      <BoldIcon />
    </Toggle>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/toggle
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: toggle

```tsx
// File: index.ts

export * from "./styles";
export * from "./toggle";


// File: toggle.tsx

"use client";

import type { VariantProps } from "cva";
import { composeRenderProps, ToggleButton } from "react-aria-components";
import { ToggleStyles } from "./styles";

export interface ToggleProps
  extends React.ComponentProps<typeof ToggleButton>,
    VariantProps<typeof ToggleStyles> {}

export function Toggle({ className, variant, size, ...props }: ToggleProps) {
  return (
    <ToggleButton
      className={composeRenderProps(className, (className) =>
        ToggleStyles({ className, size, variant })
      )}
      data-slot="toggle"
      {...props}
    />
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const ToggleStyles = cva({
  base: [
    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-[color,box-shadow]",
    "hover:bg-muted hover:text-muted-foreground",
    "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
    "disabled:pointer-events-none disabled:opacity-50",
    "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
    "selected:bg-accent selected:text-accent-foreground dark:aria-invalid:ring-destructive/40",
    "[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
  ],
  defaultVariants: {
    size: "default",
    variant: "default",
  },

  variants: {
    size: {
      default: "h-9 min-w-9 px-2",
      lg: "h-10 min-w-10 px-2.5",
      sm: "h-8 min-w-8 px-1.5",
    },
    variant: {
      default: "bg-transparent",
      outline:
        "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
    },
  },
});
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

```tsx
import { Toggle } from "~/components/ui/toggle";

<Toggle>Toggle</Toggle>;
```

## Examples

### Outline

## Component Preview: toggle-outline-demo

```tsx
import { ItalicIcon } from "lucide-react";

import { Toggle } from "~/components/ui/toggle/toggle";

export function ToggleOutlineDemo() {
  return (
    <Toggle aria-label="Toggle italic" variant="outline">
      <ItalicIcon />
      Italic
    </Toggle>
  );
}
```


### Small

## Component Preview: toggle-small-demo

```tsx
import { Toggle } from "~/components/ui/toggle/toggle";

export function ToggleSmallDemo() {
  return (
    <Toggle size="sm" variant="outline">
      Small
    </Toggle>
  );
}
```


### Large

## Component Preview: toggle-large-demo

```tsx
import { Toggle } from "~/components/ui/toggle/toggle";

export function ToggleLargeDemo() {
  return (
    <Toggle size="lg" variant="outline">
      Large
    </Toggle>
  );
}
```


### Disabled

## Component Preview: toggle-disabled-demo

```tsx
import { ThumbsDownIcon } from "lucide-react";
import { Toggle } from "~/components/ui/toggle/toggle";

export function ToggleDisabledDemo() {
  return (
    <Toggle aria-label="Toggle dislike" isDisabled variant="outline">
      <ThumbsDownIcon />
    </Toggle>
  );
}
```


### Custom Fill

## Component Preview: toggle-custom-fill-demo

```tsx
import { ThumbsUpIcon } from "lucide-react";

import { Toggle } from "~/components/ui/toggle/toggle";

export function ToggleCustomFillDemo() {
  return (
    <Toggle
      aria-label="Toggle book"
      className="selected:[&_svg]:fill-accent-foreground"
    >
      <ThumbsUpIcon className="fill-transparent transition-colors duration-300" />
    </Toggle>
  );
}
```



# Tooltip (/docs/components/tooltip)

---
title: Tooltip
description: A tooltip displays a description of an element on hover or focus.
links:
  docs: https://react-aria.adobe.com/Tooltip
---

## Component Preview: tooltip-demo

```tsx
import { Button } from "~/components/ui/button/button";
import { Tooltip } from "~/components/ui/tooltip";

export function TooltipDemo() {
  return (
    <Tooltip.Root>
      <Button variant="outline">Hover</Button>
      <Tooltip.Content>
        <p>Add to library</p>

        <Tooltip.Arrow />
      </Tooltip.Content>
    </Tooltip.Root>
  );
}
```


## Installation

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="cli">CLI</Tabs.Trigger>
  <Tabs.Trigger id="manual">Manual</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="cli">

```bash
npx shadcn@latest add @kanpeki/tooltip
```

</Tabs.Content>

<Tabs.Content id="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

## Component Source: tooltip

```tsx
// File: index.ts

export * as Tooltip from "./namespace";
export * from "./styles";
export * from "./tooltip";


// File: tooltip.tsx

"use client";

import {
  composeRenderProps,
  OverlayArrow,
  Tooltip,
  TooltipTrigger,
} from "react-aria-components";
import { TooltipStyles } from "./styles";

export interface TooltipRootProps
  extends React.ComponentProps<typeof TooltipTrigger> {
  /**
   * The delay time for the tooltip to show up. [See guidelines](https://spectrum.adobe.com/page/tooltip/#Immediate-or-delayed-appearance).
   * @default 0
   */
  delay?: number;

  /**
   * The delay time for the tooltip to close. [See guidelines](https://spectrum.adobe.com/page/tooltip/#Warmup-and-cooldown).
   * @default 300
   */
  closeDelay?: number;
}

export function TooltipRoot({
  delay = 0,
  closeDelay = 300,
  ...props
}: TooltipRootProps) {
  return (
    <TooltipTrigger
      closeDelay={closeDelay}
      data-slot="tooltip-root"
      delay={delay}
      {...props}
    />
  );
}

export interface TooltipContentProps
  extends React.ComponentProps<typeof Tooltip> {
  /**
   * The additional offset applied along the main axis between the element and its
   * anchor element.
   * @default 8
   */
  offset?: number;
}

export function TooltipContent({
  className,
  offset = 8,
  ...props
}: TooltipContentProps) {
  return (
    <Tooltip
      className={composeRenderProps(className, (className) =>
        TooltipStyles.Content({ className })
      )}
      data-slot="tooltip-content"
      offset={offset}
      {...props}
    />
  );
}

export interface TooltipArrowProps
  extends React.ComponentProps<typeof OverlayArrow> {}

export function TooltipArrow({ className, ...props }: TooltipArrowProps) {
  return (
    <OverlayArrow {...props}>
      <svg
        aria-hidden="true"
        className={TooltipStyles.Arrow({ className })}
        height={10}
        viewBox="0 0 10 10"
        width={10}
      >
        <path d="M0 0 L5 5 L10 0" />
      </svg>
    </OverlayArrow>
  );
}


// File: styles.ts

import { cva } from "~/lib/cva";

export const TooltipStyles = {
  Arrow: cva({
    base: [
      "fill-popover stroke-border group-placement-bottom:rotate-180 group-placement-left:-rotate-90 group-placement-right:rotate-90",
    ],
  }),
  Content: cva({
    base: [
      "group motion-duration-150 z-50 rounded-md border bg-popover px-3 py-1.5 text-popover-foreground text-xs will-change-transform",
      "entering:placement-left:motion-translate-x-in-[0.5rem]",
      "entering:placement-right:motion-translate-x-in-[-0.5rem]",
      "entering:placement-top:motion-translate-y-in-[0.5rem]",
      "entering:placement-bottom:motion-translate-y-in-[-0.5rem]",
      "entering:motion-opacity-in",
      "exiting:motion-opacity-out",
    ],
  }),
};


// File: namespace.ts

export {
  TooltipArrow as Arrow,
  TooltipContent as Content,
  TooltipRoot as Root,
} from "./tooltip";
```


<Step>Update the import paths to match your project setup.</Step>

</Steps>

</Tabs.Content>

</Tabs.Root>

## Anatomy

<Tabs.Root>

<Tabs.List>
  <Tabs.Trigger id="single">Single import</Tabs.Trigger>
  <Tabs.Trigger id="multiple">Multiple imports</Tabs.Trigger>
</Tabs.List>
<Tabs.Content id="single">

```tsx
import { Button } from "~/components/ui/button";
import { Tooltip } from "~/components/ui/tooltip";

<Tooltip.Root>
  <Button></Button>

  <Tooltip.Content>
    <p></p>

    <Tooltip.Arrow />
  </Tooltip.Content>
</Tooltip.Root>;
```

</Tabs.Content>

<Tabs.Content id="multiple">

```tsx
import { Button } from "~/components/ui/button";
import {
  TooltipArrow,
  TooltipContent,
  TooltipRoot,
} from "~/components/ui/tooltip";

<TooltipRoot>
  <Button></Button>
  <TooltipContent>
    <p></p>

    <TooltipArrow />
  </TooltipContent>
</TooltipRoot>;
```

</Tabs.Content>

</Tabs.Root>

## Examples

### Positions

## Component Preview: tooltip-positions-demo

```tsx
import { Button } from "~/components/ui/button/button";
import { Tooltip } from "~/components/ui/tooltip";

const positions = ["top", "right", "left", "bottom"] as const;

export function TooltipPositionsDemo() {
  return (
    <div className="grid grid-cols-2 gap-2">
      {positions.map((side) => (
        <Tooltip.Root key={side}>
          <Button className="capitalize" variant="outline">
            {side}
          </Button>
          <Tooltip.Content placement={side}>
            <p>Add to library</p>

            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip.Root>
      ))}
    </div>
  );
}
```


### With Arrow

## Component Preview: tooltip-with-arrow-demo

```tsx
import { InfoIcon } from "lucide-react";
import { Button } from "~/components/ui/button/button";
import { Tooltip } from "~/components/ui/tooltip";

export function TooltipWithArrowDemo() {
  return (
    <Tooltip.Root>
      <Button size="icon" variant="ghost">
        <InfoIcon />
        <span className="sr-only">Info</span>
      </Button>
      <Tooltip.Content className="max-w-80 text-pretty text-center">
        To learn more about how this works, check out the docs. If you have any
        questions, please reach out to us.
        <Tooltip.Arrow />
      </Tooltip.Content>
    </Tooltip.Root>
  );
}
```


### Hover Card

## Component Preview: tooltip-hover-card-demo

```tsx
import { CalendarIcon } from "lucide-react";
import { AvatarDemo } from "~/registry/examples/avatar/avatar-demo";
import { RACButton } from "~/components/ui/button/button";
import { Tooltip } from "~/components/ui/tooltip";

export function TooltipHoverCardDemo() {
  return (
    <Tooltip.Root>
      <RACButton>
        <AvatarDemo />
      </RACButton>

      <Tooltip.Content className="max-w-80 p-4">
        <div className="flex justify-between gap-4">
          <AvatarDemo />
          <div className="space-y-1">
            <h4 className="font-semibold text-sm">@fellipeutaka</h4>
            <p className="text-sm">
              Software Engineer - loves building awesome user interfaces.
            </p>
            <div className="flex items-center gap-2 pt-2">
              <CalendarIcon className="size-4 opacity-70" />
              <span className="text-muted-fg text-xs">
                Joined December 2025
              </span>
            </div>
          </div>
        </div>
      </Tooltip.Content>
    </Tooltip.Root>
  );
}
```


## Troubleshooting

### Tooltip positioning issues

If tooltip content appears misaligned, in wrong position, or rendered but not visible in viewport, check if `body` has `position: relative;{:css}` applied. See this [issue](https://github.com/adobe/react-spectrum/issues/7654) for more details.

Remove `position: relative;{:css}` from `body`:

## API Reference

### Root

<PropsTable
  data={[
    {
      name: "children",
      required: true,
      typeSimple: "ReactNode",
    },
    {
      name: "isDisabled",
      required: false,
      typeSimple: "boolean",
      description:
        "Whether the tooltip should be disabled, independent from the trigger.",
    },
    {
      name: "delay",
      required: false,
      typeSimple: "number",
      default: "1500",
      description: "The delay time for the tooltip to show up.",
    },
    {
      name: "closeDelay",
      required: false,
      typeSimple: "number",
      default: "500",
      description: "The delay time for the tooltip to close.",
    },
    {
      name: "trigger",
      required: false,
      typeSimple: "'focus'",
      description:
        "By default, opens for both focus and hover. Can be made to open only for focus.",
    },
    {
      name: "isOpen",
      required: false,
      typeSimple: "boolean",
      description: "Whether the overlay is open by default (controlled).",
    },
    {
      name: "defaultOpen",
      required: false,
      typeSimple: "boolean",
      description: "Whether the overlay is open by default (uncontrolled).",
    },
    {
      name: "onOpenChange",
      required: false,
      typeSimple: "function",
      type: "((isOpen: boolean) => void)",
      description:
        "Handler that is called when the overlay's open state changes.",
    },
  ]}
/>


# Astro (/docs/dark-mode/astro)

---
title: Astro
description: Adding dark mode to your astro app.
---

<Steps>

### Create an inline theme script

```astro title="src/scripts/theme-head.astro"
<script is:inline>
  const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");

  function getTheme() {
    // Theme could be "dark", "light", or "system"
    const theme =
      localStorage.getItem("theme") ??
      (darkModeMediaQuery.matches ? "dark" : "light");

    return theme;
  }

  const theme = getTheme();

  if (theme === "dark") {
    document.documentElement.classList.add("dark");
  } else if (theme === "light") {
    document.documentElement.classList.remove("dark");
  } else if (theme === "system") {
    const isDarkMode = darkModeMediaQuery.matches;
    document.documentElement.classList.toggle("dark", isDarkMode);
  }

  darkModeMediaQuery.addEventListener("change", (e) => {
    const theme = getTheme();

    if (theme === "system") {
      const darkModeOn = e.matches;
      document.documentElement.classList.toggle("dark", darkModeOn);
    }
  });
</script>
```

### Import the theme script in your layout

```astro title="src/layouts/root.astro"
---
import ThemeHead from "~/scripts/theme-head.astro"; // [!code highlight]

import "~/styles/globals.css";
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
    <meta name="viewport" content="width=device-width" />
    <meta
      name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white"
    />
    <meta
      name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black"
    />
    <meta name="generator" content={Astro.generator} />
    <title>Kanpeki</title>
    <!-- [!code highlight] -->
    <ThemeHead />
  </head>
  <body className="relative min-h-dvh bg-background">
    <slot />
  </body>
</html>
```

### Create a theme utility

```ts title="src/utils/theme.ts"
export type Theme = "light" | "dark" | "system";

export function setTheme(theme: Theme) {
  switch (theme) {
    case "light":
      setLightTheme();
      break;
    case "dark":
      setDarkTheme();
      break;
    case "system":
      setSystemTheme();
      break;
  }
}

export function setLightTheme() {
  document.documentElement.classList.remove("dark");
  localStorage.setItem("theme", "light");
}

export function setDarkTheme() {
  document.documentElement.classList.add("dark");
  localStorage.setItem("theme", "dark");
}

export function setSystemTheme() {
  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    setDarkTheme();
  } else {
    setLightTheme();
  }

  localStorage.setItem("theme", "system");
}
```

### Add a mode toggle

```tsx title="src/components/mode-toggle.tsx"
import { PressResponder } from "@react-aria/interactions";
import { setTheme } from "~/utils/theme";
import { Button } from "~/components/ui/button";
import { Menu } from "~/components/ui/menu";
import { Icons } from "~/components/icons";

export function ModeToggle() {
  return (
    <Menu.Root>
      <Menu.Trigger asChild>
        <PressResponder>
          <Button variant="ghost" size="icon" aria-label="Toggle theme">
            <Icons.Sun className="dark:-rotate-90 size-5 rotate-0 scale-100 transition dark:scale-0" />
            <Icons.Moon className="absolute size-5 rotate-90 scale-0 transition dark:rotate-0 dark:scale-100" />
          </Button>
        </PressResponder>
      </Menu.Trigger>

      <Menu.Content align="end">
        <Menu.Item onSelect={() => setTheme("light")}>
          <Icons.Sun className="size-4" />
          Light
        </Menu.Item>
        <Menu.Item onSelect={() => setTheme("dark")}>
          <Icons.Moon className="size-4" />
          Dark
        </Menu.Item>
        <Menu.Item onSelect={() => setTheme("system")}>
          <Icons.Laptop className="size-4" />
          System
        </Menu.Item>
      </Menu.Content>
    </Menu.Root>
  );
}
```

### 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 { ModeToggle } from "~/component/mode-toggle";
import RootLayout from "~/layouts/root.astro";
---

<RootLayout>
  <ModeToggle client:load />
</RootLayout>

```

</Steps>


# Dark Mode (/docs/dark-mode)

---
title: Dark Mode
description: How to add dark mode to your site.
---

## Frameworks

<div className="grid sm:grid-cols-2 gap-4 mt-8 sm:gap-6">
  <LinkButton
    variant="outline"
    className="p-6 sm:p-10 flex flex-col size-full"
    href="/docs/dark-mode/next"
  >
    <Icons.NextJS className="size-10" />
    <p className="font-medium mt-2">Next.js</p>
  </LinkButton>
  <LinkButton
    variant="outline"
    className="p-6 sm:p-10 flex flex-col size-full"
    href="/docs/dark-mode/astro"
  >
    <Icons.Astro className="size-10" />
    <p className="font-medium mt-2">Astro</p>
  </LinkButton>
</div>


# Next.js (/docs/dark-mode/next)

---
title: Next.js
description: Adding dark mode to your next app.
---

<Steps>

### Install next-themes

Start by installing `next-themes`:

```bash
npm install next-themes
```

### Create a providers

```tsx title="components/providers.tsx"
"use client";

import { ThemeProvider } from "next-themes";

interface ProvidersProps {
  children: React.ReactNode;
}

export function Providers({ children }: ProvidersProps) {
  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </ThemeProvider>
  );
}
```

### Wrap your root layout

Add the `Providers` to your root layout.

```tsx {1,/suppressHydrationWarning/,11} title="app/layout.tsx"
import { Providers } from "~/components/providers";

interface LayoutProps {
  children: React.ReactNode;
}

export default function RootLayout({ children }: LayoutProps) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}
```

<Alert.Root className="mt-6" variant="warning">
  <AlertIcon variant="warning" className="size-4" />
  <Alert.Description>
    Make sure to add the `suppressHydrationWarning` prop to the `html` tag to
    avoid a hydration mismatch error.
  </Alert.Description>
</Alert.Root>

</Steps>


# Forms (/docs/forms)

---
title: Forms
description: How to build accessible forms with Kanpeki.
---

## Architecture

Kanpeki's form system is built on three layers:

### Field (Layout)

[Field](/docs/components/field) is the composition and layout root. It owns:

- Label placement and styling
- Description text
- Error message rendering
- Visual structure and orientation

```tsx
<Field.Root>
  <Field.Label>Email</Field.Label>
  {/* control */}
  <Field.Description>Helper text</Field.Description>
  <Field.Error />
</Field.Root>
```

### TextField (Behavior)

[TextField](/docs/components/textfield) is a React Aria component that provides:

- Automatic ID wiring (label, description, error)
- Validation state
- Keyboard and focus handling
- ARIA attributes

TextField is composed **into** Field using the `render` prop:

```tsx
<Field.Root render={<TextField type="email" isRequired />}>
  <Field.Label>Email</Field.Label>
  <Input />
  <Field.Description>We'll never share your email.</Field.Description>
  <Field.Error />
</Field.Root>
```

### Form (Coordination)

[Form](/docs/components/form) is a minimal wrapper that handles:

- Submission via `onSubmit`
- Server-side validation errors
- Reset handling

Form does **not** manage fields or control layout.

## Composition Pattern

The recommended pattern composes TextField into Field:

```tsx
<Form onSubmit={handleSubmit}>
  <Field.Root render={<TextField name="email" type="email" isRequired />}>
    <Field.Label>Email</Field.Label>
    <Input placeholder="john@example.com" />
    <Field.Description>We'll never share your email.</Field.Description>
    <Field.Error />
  </Field.Root>
  <Button type="submit">Submit</Button>
</Form>
```

### Without TextField

You can use Field with Input directly, but you lose React Aria's automatic ID wiring:

```tsx
<Field.Root>
  <Field.Label htmlFor="email">Email</Field.Label>
  <Input id="email" aria-describedby="email-desc" />
  <Field.Description id="email-desc">Helper text</Field.Description>
</Field.Root>
```

This requires manual `htmlFor`, `id`, and `aria-describedby` attributes.

## Libraries

Choose a form library based on your needs:

<div className="grid sm:grid-cols-2 gap-4 mt-8 sm:gap-6">
  <LinkButton
    variant="outline"
    className="p-6 sm:p-10 flex flex-col size-full"
    href="/docs/forms/tanstack-form"
  >
    <Icons.Tanstack className="size-10" />
    <p className="font-medium mt-2">TanStack Form</p>
  </LinkButton>
  <LinkButton
    variant="outline"
    className="p-6 sm:p-10 flex flex-col size-full"
    href="/docs/forms/react-hook-form"
  >
    <div className="bg-pink-500 grid place-content-center size-10 p-2 rounded-full">
      <Icons.ReactHookForm className="size-full fill-current" />
    </div>
    <p className="font-medium mt-2">React Hook Form</p>
  </LinkButton>
  <LinkButton
    variant="outline"
    className="p-6 sm:p-10 flex flex-col size-full"
    href="/docs/forms/react-aria"
  >
    <Icons.Adobe className="size-10 text-red-600" />
    <p className="font-medium mt-2">React Aria</p>
  </LinkButton>
  <LinkButton
    variant="outline"
    className="p-6 sm:p-10 flex flex-col size-full"
    href="/docs/forms/use-action-state"
    isDisabled
  >
    <Icons.React className="size-10" />
    <div className="flex flex-col items-center">
      <p className="font-medium mt-2">useActionState</p>
      <p className="text-muted-foreground text-xs">(Coming Soon)</p>
    </div>
  </LinkButton>
</div>


# TanStack Form (/docs/forms/tanstack-form)

---
title: TanStack Form
description: Build forms with TanStack Form and Zod validation.
links:
  docs: https://tanstack.com/form
---

This guide shows how to build forms using TanStack Form with Kanpeki's [Field](/docs/components/field) component and Zod schema validation.

## Demo

## Component Preview: tanstack-form-demo

```tsx
"use client";

import { useForm } from "@tanstack/react-form";
import { toast } from "sonner";
import { z } from "zod";
import { Button } from "~/components/ui/button";
import { Field } from "~/components/ui/field";
import { Input } from "~/components/ui/input";
import { TextField } from "~/components/ui/text-field";
import { Textarea } from "~/components/ui/textarea";

const formSchema = z.object({
  title: z
    .string()
    .min(5, "Title must be at least 5 characters.")
    .max(32, "Title must be at most 32 characters."),
  description: z
    .string()
    .min(20, "Description must be at least 20 characters.")
    .max(200, "Description must be at most 200 characters."),
});

export function TanstackFormDemo() {
  const form = useForm({
    defaultValues: {
      title: "",
      description: "",
    },
    validators: {
      onChange: formSchema,
    },
    onSubmit: ({ value }) => {
      toast(JSON.stringify(value, null, 2));
    },
  });

  return (
    <form
      className="flex w-full max-w-md flex-col gap-4"
      onSubmit={(e) => {
        e.preventDefault();
        e.stopPropagation();
        form.handleSubmit();
      }}
    >
      <form.Field
        children={(field) => {
          const isInvalid =
            field.state.meta.isTouched && !field.state.meta.isValid;
          return (
            <Field.Root
              render={
                <TextField
                  id={field.name}
                  isInvalid={isInvalid}
                  name={field.name}
                  onBlur={field.handleBlur}
                  onChange={field.handleChange}
                  value={field.state.value}
                />
              }
            >
              <Field.Label>Title</Field.Label>
              <Input placeholder="Bug report title" />
              <Field.Description>
                Provide a concise title for your report.
              </Field.Description>
              <Field.Error errors={field.state.meta.errors} />
            </Field.Root>
          );
        }}
        name="title"
      />
      <form.Field
        children={(field) => {
          const isInvalid =
            field.state.meta.isTouched && !field.state.meta.isValid;
          return (
            <Field.Root
              render={
                <TextField
                  id={field.name}
                  isInvalid={isInvalid}
                  name={field.name}
                  onBlur={field.handleBlur}
                  onChange={field.handleChange}
                  value={field.state.value}
                />
              }
            >
              <Field.Label>Description</Field.Label>
              <Textarea
                className="min-h-15"
                placeholder="Describe the issue in detail..."
              />
              <Field.Description>
                Include steps to reproduce the issue.
              </Field.Description>
              <Field.Error errors={field.state.meta.errors} />
            </Field.Root>
          );
        }}
        name="description"
      />
      <div className="flex gap-2">
        <Button type="submit">Submit</Button>
        <Button onPress={() => form.reset()} type="reset" variant="outline">
          Reset
        </Button>
      </div>
    </form>
  );
}
```


## Approach

TanStack Form provides headless form state management. We combine it with:

- `Field` components for layout and accessibility
- Zod for schema validation
- Real-time validation feedback

## Anatomy

```tsx
<form
  onSubmit={(e) => {
    e.preventDefault();
    form.handleSubmit();
  }}
>
  <Field.Group>
    <form.Field
      name="email"
      children={(field) => {
        const isInvalid =
          field.state.meta.isTouched && !field.state.meta.isValid;
        return (
          <Field.Root data-invalid={isInvalid}>
            <Field.Label htmlFor={field.name}>Email</Field.Label>
            <Input
              id={field.name}
              name={field.name}
              value={field.state.value}
              onBlur={field.handleBlur}
              onChange={(e) => field.handleChange(e.target.value)}
              aria-invalid={isInvalid}
            />
            <Field.Description>Helper text</Field.Description>
            {isInvalid && <Field.Error errors={field.state.meta.errors} />}
          </Field.Root>
        );
      }}
    />
  </Field.Group>
  <Button type="submit">Submit</Button>
</form>
```

## Setup

### Install dependencies

```bash
npm install @tanstack/react-form zod
```

### Create a schema

Define your form shape with Zod:

```tsx
import { z } from "zod";

const formSchema = z.object({
  title: z
    .string()
    .min(5, "Title must be at least 5 characters.")
    .max(32, "Title must be at most 32 characters."),
  description: z
    .string()
    .min(20, "Description must be at least 20 characters."),
});
```

### Setup the form

Use `useForm` with Zod validation:

```tsx
import { useForm } from "@tanstack/react-form";

const form = useForm({
  defaultValues: {
    title: "",
    description: "",
  },
  validators: {
    onSubmit: formSchema,
  },
  onSubmit: ({ value }) => {
    console.log(value);
  },
});
```

## Validation

### Validation Modes

TanStack Form supports different validation strategies:

| Mode       | Description                     |
| ---------- | ------------------------------- |
| `onSubmit` | Validate on form submission     |
| `onChange` | Validate on every change        |
| `onBlur`   | Validate when field loses focus |

```tsx
const form = useForm({
  validators: {
    onSubmit: formSchema,
    onChange: formSchema,
    onBlur: formSchema,
  },
});
```

### Displaying Errors

Use `Field.Error` with the `errors` prop:

```tsx
<form.Field
  name="email"
  children={(field) => {
    const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
    return (
      <Field.Root data-invalid={isInvalid}>
        <Field.Label htmlFor={field.name}>Email</Field.Label>
        <Input
          id={field.name}
          value={field.state.value}
          onChange={(e) => field.handleChange(e.target.value)}
          onBlur={field.handleBlur}
          aria-invalid={isInvalid}
        />
        {isInvalid && <Field.Error errors={field.state.meta.errors} />}
      </Field.Root>
    );
  }}
/>
```

## Field Types

### Input

```tsx
<form.Field
  name="username"
  children={(field) => {
    const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
    return (
      <Field.Root data-invalid={isInvalid}>
        <Field.Label htmlFor={field.name}>Username</Field.Label>
        <Input
          id={field.name}
          name={field.name}
          value={field.state.value}
          onBlur={field.handleBlur}
          onChange={(e) => field.handleChange(e.target.value)}
          aria-invalid={isInvalid}
          placeholder="johndoe"
        />
        {isInvalid && <Field.Error errors={field.state.meta.errors} />}
      </Field.Root>
    );
  }}
/>
```

### Textarea

```tsx
<form.Field
  name="bio"
  children={(field) => {
    const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
    return (
      <Field.Root data-invalid={isInvalid}>
        <Field.Label htmlFor={field.name}>Bio</Field.Label>
        <Textarea
          id={field.name}
          name={field.name}
          value={field.state.value}
          onBlur={field.handleBlur}
          onChange={(e) => field.handleChange(e.target.value)}
          aria-invalid={isInvalid}
          placeholder="Tell us about yourself..."
        />
        {isInvalid && <Field.Error errors={field.state.meta.errors} />}
      </Field.Root>
    );
  }}
/>
```

### Select

```tsx
<form.Field
  name="country"
  children={(field) => {
    const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
    return (
      <Field.Root data-invalid={isInvalid}>
        <Field.Label>Country</Field.Label>
        <Select.Root
          name={field.name}
          selectedKey={field.state.value}
          onSelectionChange={(key) => field.handleChange(key as string)}
        >
          <Select.Trigger aria-invalid={isInvalid}>
            <Select.Value placeholder="Select a country" />
          </Select.Trigger>
          <Popover.Content>
            <Listbox.Root>
              <Listbox.Item id="us">United States</Listbox.Item>
              <Listbox.Item id="uk">United Kingdom</Listbox.Item>
              <Listbox.Item id="ca">Canada</Listbox.Item>
            </Listbox.Root>
          </Popover.Content>
        </Select.Root>
        {isInvalid && <Field.Error errors={field.state.meta.errors} />}
      </Field.Root>
    );
  }}
/>
```

### Checkbox

For checkbox arrays, use `mode="array"`:

```tsx
<form.Field
  name="notifications"
  mode="array"
  children={(field) => {
    const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
    return (
      <Field.Set>
        <Field.Legend variant="label">Notifications</Field.Legend>
        <Field.Group data-slot="checkbox-group">
          {options.map((option) => (
            <Field.Root
              key={option.id}
              orientation="horizontal"
              data-invalid={isInvalid}
            >
              <Checkbox.Provider
                isSelected={field.state.value.includes(option.id)}
                onChange={(checked) => {
                  if (checked) {
                    field.pushValue(option.id);
                  } else {
                    const index = field.state.value.indexOf(option.id);
                    if (index > -1) field.removeValue(index);
                  }
                }}
              >
                <Checkbox.Root>
                  <Checkbox.Indicator />
                </Checkbox.Root>
              </Checkbox.Provider>
              <Field.Label>{option.label}</Field.Label>
            </Field.Root>
          ))}
        </Field.Group>
        {isInvalid && <Field.Error errors={field.state.meta.errors} />}
      </Field.Set>
    );
  }}
/>
```

### Switch

```tsx
<form.Field
  name="marketing"
  children={(field) => {
    const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;
    return (
      <Field.Root orientation="horizontal" data-invalid={isInvalid}>
        <Field.Content>
          <Field.Title>Marketing emails</Field.Title>
          <Field.Description>
            Receive emails about new products and features.
          </Field.Description>
        </Field.Content>
        <Switch.Root
          isSelected={field.state.value}
          onChange={field.handleChange}
        >
          <Switch.Track>
            <Switch.Thumb />
          </Switch.Track>
        </Switch.Root>
      </Field.Root>
    );
  }}
/>
```

## Resetting the Form

Use `form.reset()` to reset to default values:

```tsx
<Button type="button" variant="outline" onClick={() => form.reset()}>
  Reset
</Button>
```

## Array Fields

TanStack Form supports dynamic array fields with `mode="array"`:

```tsx
const formSchema = z.object({
  emails: z
    .array(z.object({ address: z.string().email() }))
    .min(1, "Add at least one email."),
});

<form.Field
  name="emails"
  mode="array"
  children={(field) => (
    <Field.Set>
      <Field.Legend variant="label">Email Addresses</Field.Legend>
      <Field.Group>
        {field.state.value.map((_, index) => (
          <form.Field
            key={index}
            name={`emails[${index}].address`}
            children={(subField) => {
              const isInvalid =
                subField.state.meta.isTouched && !subField.state.meta.isValid;
              return (
                <Field.Root data-invalid={isInvalid}>
                  <Input
                    value={subField.state.value}
                    onChange={(e) => subField.handleChange(e.target.value)}
                    onBlur={subField.handleBlur}
                    aria-invalid={isInvalid}
                    placeholder="name@example.com"
                  />
                  {isInvalid && (
                    <Field.Error errors={subField.state.meta.errors} />
                  )}
                </Field.Root>
              );
            }}
          />
        ))}
      </Field.Group>
      <Button
        type="button"
        variant="outline"
        size="sm"
        onClick={() => field.pushValue({ address: "" })}
      >
        Add Email
      </Button>
    </Field.Set>
  )}
/>;
```

### Array Helpers

| Method                  | Description              |
| ----------------------- | ------------------------ |
| `field.pushValue(item)` | Add item to end of array |
| `field.removeValue(i)`  | Remove item at index     |
| `field.insertValue(i)`  | Insert item at index     |
| `field.swapValues(a,b)` | Swap items at indices    |


# Installation (/docs/installation)

---
title: Installation
description: How to install dependencies and structure your app.
---

## Frameworks

<div className="grid sm:grid-cols-2 gap-4 mt-8 sm:gap-6">
  <LinkButton
    variant="outline"
    className="p-6 sm:p-10 flex flex-col size-full"
    href="/docs/installation/next"
  >
    <Icons.NextJS className="size-10" />
    <p className="font-medium mt-2">Next.js</p>
  </LinkButton>
  <LinkButton
    variant="outline"
    className="p-6 sm:p-10 flex flex-col size-full"
    href="/docs/installation/manual"
  >
    <Icons.React className="size-10" />
    <p className="font-medium mt-2">Manual</p>
  </LinkButton>
</div>

## TypeScript

This project and the components are written in TypeScript. We recommend using TypeScript for your project as well.

But if you prefer JavaScript, you should learn TypeScript. It's a superset of JavaScript and provides static typing, interfaces, and more.
Learn more about TypeScript in the [official documentation](https://www.typescriptlang.org/docs/).


# Manual Installation (/docs/installation/manual)

---
title: Manual Installation
description: Add dependencies to your project manually.
---

<Steps>

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

## Add dependencies

Add the following dependencies to your project:

```bash title="Terminal"
npm install cva@beta tailwind-merge tailwindcss-motion tailwindcss-react-aria-components -D
```

## Configure path aliases

I use the `~` alias. This is how I configure it in tsconfig.json:

```json title="tsconfig.json"
{
  "compilerOptions": {
    "paths": {
      // [!code highlight]
      "~/*": ["./src/*"] // [!code highlight]
    } // [!code highlight]
  }
}
```

The `~` alias is a preference. You can use other aliases if you want, like `@` or `#`.

**If you use a different alias such as `@`, you'll need to update import statements when adding components.**

## 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="globals.css"
@import "tailwindcss";

@plugin "tailwindcss-react-aria-components";
@plugin "tailwindcss-motion";

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

@theme inline {
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: light-dark(oklch(1 0 0), oklch(0.145 0 0));
  --color-foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
  --color-card: light-dark(oklch(1 0 0), oklch(0.205 0 0));
  --color-card-foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
  --color-popover: light-dark(oklch(1 0 0), oklch(0.205 0 0));
  --color-popover-foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
  --color-primary: light-dark(oklch(0.205 0 0), oklch(0.922 0 0));
  --color-primary-foreground: light-dark(oklch(0.985 0 0), oklch(0.205 0 0));
  --color-secondary: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
  --color-secondary-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
  --color-muted: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
  --color-muted-foreground: light-dark(oklch(0.556 0 0), oklch(0.708 0 0));
  --color-accent: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
  --color-accent-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
  --color-destructive: light-dark(
    oklch(0.577 0.245 27.325),
    oklch(0.704 0.191 22.216)
  );
  --color-border: light-dark(oklch(0.922 0 0), oklch(1 0 0 / 10%));
  --color-input: light-dark(oklch(0.922 0 0), oklch(1 0 0 / 15%));
  --color-ring: light-dark(oklch(0.708 0 0), oklch(0.556 0 0));
  --color-chart-1: light-dark(
    oklch(0.646 0.222 41.116),
    oklch(0.488 0.243 264.376)
  );
  --color-chart-2: light-dark(
    oklch(0.6 0.118 184.704),
    oklch(0.696 0.17 162.48)
  );
  --color-chart-3: light-dark(
    oklch(0.398 0.07 227.392),
    oklch(0.769 0.188 70.08)
  );
  --color-chart-4: light-dark(
    oklch(0.828 0.189 84.429),
    oklch(0.627 0.265 303.9)
  );
  --color-chart-5: light-dark(
    oklch(0.769 0.188 70.08),
    oklch(0.645 0.246 16.439)
  );
  --color-sidebar: light-dark(oklch(0.985 0 0), oklch(0.205 0 0));
  --color-sidebar-foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
  --color-sidebar-primary: light-dark(
    oklch(0.205 0 0),
    oklch(0.488 0.243 264.376)
  );
  --color-sidebar-primary-foreground: light-dark(
    oklch(0.985 0 0),
    oklch(0.985 0 0)
  );
  --color-sidebar-accent: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
  --color-sidebar-accent-foreground: light-dark(
    oklch(0.205 0 0),
    oklch(0.985 0 0)
  );
  --color-sidebar-border: light-dark(oklch(0.922 0 0), oklch(1 0 0 / 10%));
  --color-sidebar-ring: light-dark(oklch(0.708 0 0), oklch(0.556 0 0));
}

@utility container {
  padding-inline: 2rem;
  margin-inline: auto;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  html {
    scroll-behavior: smooth;

    scrollbar-color: var(--color-border) transparent;
    scrollbar-width: thin;

    &.light {
      color-scheme: light;
    }

    &.dark {
      color-scheme: dark;
    }
  }

  body {
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;

    @apply bg-background text-foreground antialiased font-sans;
  }

  input:-webkit-autofill {
    background-clip: text;
  }
}
```

## Configure Class Variance Authority

[Class Variance Authority (a.k.a. CVA)](https://beta.cva.style) is a utility that helps you manage class variance in your project.
Here's how I define it in `lib/cva.ts`:

```ts title="lib/cva.ts"
import { defineConfig } from "cva";
import { twMerge } from "tailwind-merge";

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

## That's it ✨

You can now start adding components to your project.

</Steps>


# Next.js (/docs/installation/next)

---
title: Next.js
description: Install and configure Next.js.
---

<Steps>

### Create project

Start by creating a new Next.js project using `create-next-app`:

```bash title="Terminal"
npx create-next-app@latest --tailwind --ts --empty --app --src-dir --turbopack
```

You will be asked a few questions to create the project:

```bash
? What is your project named? » my-app
? Which linter would you like to use? » Biome
? Would you like to customize the default import alias (@/*)? » No / Yes
```

Currently, I prefer to use [Biome.js](https://biomejs.dev) instead of ESLint. You can use ESLint if you prefer.
Also I prefer to use `~` as the alias. You can use `@` or any other alias if you prefer.

### Run the shadcn CLI

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

```bash
npx shadcn@latest init
```

### Remove unused shadcn packages

Kanpeki uses modern tooling instead of shadcn's defaults. Remove packages you won't need:

```bash
npm remove class-variance-authority clsx tw-animate-css
```

**Why?** Kanpeki uses [CVA beta](/introduction#cva-beta-class-variance-authority) and [tailwindcss-motion](/introduction#tailwind-css-motion) instead. See the [introduction](/docs/introduction#modern-tooling) for details.

**Delete these files:**
- `src/lib/utils.ts` (optional - keep if you have other utilities)

**Remove this import from `src/styles/globals.css`:**

```css title="globals.css"
@import "tailwindcss";
@import "tw-animate-css";/* [!code --] */
```

### That's it ✨

You can now start adding components to your project.

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

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

```tsx
import { Button } from "~/components/ui/button"; // [!code highlight]

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

</Steps>

### Fonts (optional)

I use [Geist](https://vercel.com/font) as the default font.
You can use any font you like.

Here's how I configure Geist for Next.js:

**1. Create a `fonts.ts` file inside `src/config`:**

```ts title=fonts.ts
import { Geist } from "next/font/google";

const sans = Geist({
  subsets: ["latin"],
  variable: "--font-sans",
});

export const fonts = [sans.variable];
```

**2. Import the font in the root layout:**

```tsx title=app/layout.tsx
import "~/styles/globals.css";

import type { Metadata, Viewport } from "next";
import { fonts } from "~/config/fonts"; // [!code highlight]
import { cx } from "cva";

export const metadata: Metadata = {
  title: {
    default: "Next.js app",
    template: "%s | Next.js app",
  },
};

export const viewport: Viewport = {
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "white" },
    { media: "(prefers-color-scheme: dark)", color: "black" },
  ],
};

interface LayoutProps {
  children: React.ReactNode;
}

export default function Layout({ children }: LayoutProps) {
  return (
    // [!code word:cx(fonts)]
    <html className={cx(fonts)} lang="en" suppressHydrationWarning>
      <body>
        {children}
      </body>
    </html>
  );
}
```

**3. Configure `--font-sans` in `globals.css`**

```css title="globals.css"
@import "tailwindcss";

@plugin "tailwindcss-react-aria-components";
@plugin "tailwindcss-motion";

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

@theme inline {
  // [!code word:var(--font-sans)]
  --font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  ...
}
```

### App structure

Here's how I structure my Next.js apps. You can use this as a reference:

<Files className="mt-6">
  <Folder name="src">
    <Folder name="app">
      <File name="layout.tsx" />
      <File name="page.tsx" />
      <File name="providers.tsx" />
    </Folder>
    <Folder name="components">
      <Folder name="ui">
        <Folder name="button">
          <File name="button.tsx" />
          <File name="index.ts" />
          <File name="styles.ts" />
        </Folder>
        <Folder name="dialog">
          <File name="dialog.tsx" />
          <File name="index.ts" />
          <File name="namespace.ts" />
          <File name="styles.ts" />
        </Folder>
        <Folder name="tabs">
          <File name="index.ts" />
          <File name="namespace.ts" />
          <File name="styles.ts" />
          <File name="tabs.tsx" />
        </Folder>
      </Folder>
    </Folder>
    <Folder name="config">
      <File name="fonts.ts" />
    </Folder>
    <Folder name="lib">
      <File name="cva.ts" />
    </Folder>
    <Folder name="styles">
      <File name="globals.css" />
    </Folder>
  </Folder>
  <File name="components.json" />
  <File name="next.config.ts" />
  <File name="package.json" />
  <File name="postcss.config.js" />
  <File name="tsconfig.json" />
</Files>

- I place the UI components in the `src/components/ui` folder.
- The `lib` folder contains configuration for external libraries.
- The `styles` folder contains the global CSS.