ui Documentation

File: apps/www/registry/README.md

Files inside this directory is autogenerated by ./scripts/build-registry.ts. Do not edit them manually. - shadcn

File: apps/www/content/docs/components/accordion.mdx

title: Accordion component: true links: doc: https://www.radix-ui.com/docs/primitives/components/accordion api: https://www.radix-ui.com/docs/primitives/components/accordion#api-reference

Installation

CLI Manual

bash

npx shadcn@latest add accordion

Install the following dependencies:

bash

npm install @radix-ui/react-accordion

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Update tailwind.config.js

Add the following animations to your tailwind.config.js file:

js title="tailwind.config.js" {5-18}

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
}

Usage

tsx

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

tsx

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

File: apps/www/content/docs/components/alert.mdx

title: Alert component: true

Installation

CLI Manual

bash

npx shadcn@latest add alert

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

tsx

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

tsx

<Alert>
  <Terminal className="h-4 w-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Examples

Default

Destructive

File: apps/www/content/docs/components/alert-dialog.mdx

title: Alert Dialog featured: true component: true links: doc: https://www.radix-ui.com/docs/primitives/components/alert-dialog api: https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference

Installation

CLI Manual

bash

npx shadcn@latest add alert-dialog

Install the following dependencies:

bash

npm install @radix-ui/react-alert-dialog

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

tsx

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

tsx

<AlertDialog>
  <AlertDialogTrigger>Open</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

File: apps/www/content/docs/components/aspect-ratio.mdx

title: Aspect Ratio component: true links: doc: https://www.radix-ui.com/docs/primitives/components/aspect-ratio api: https://www.radix-ui.com/docs/primitives/components/aspect-ratio#api-reference

Installation

CLI Manual

bash

npx shadcn@latest add aspect-ratio

Install the following dependencies:

bash

npm install @radix-ui/react-aspect-ratio

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

tsx

import Image from "next/image"

import { AspectRatio } from "@/components/ui/aspect-ratio"

tsx

<div className="w-[450px]">
  <AspectRatio ratio={16 / 9}>
    <Image src="..." alt="Image" className="rounded-md object-cover" />
  </AspectRatio>
</div>

File: apps/www/content/docs/components/avatar.mdx

title: Avatar component: true links: doc: https://www.radix-ui.com/docs/primitives/components/avatar api: https://www.radix-ui.com/docs/primitives/components/avatar#api-reference

Installation

CLI Manual

bash

npx shadcn@latest add avatar

Install the following dependencies:

bash

npm install @radix-ui/react-avatar

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

tsx

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

tsx

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

File: apps/www/content/docs/components/badge.mdx

title: Badge component: true

Installation

CLI Manual

bash

npx shadcn@latest add badge

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

tsx

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

tsx

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

Link

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

tsx

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

tsx

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

Examples

Default

Secondary

Outline

Destructive

Installation

CLI Manual

bash

npx shadcn@latest add breadcrumb

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

tsx

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

tsx

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Examples

Custom separator

Use a custom component as children for `` to create a custom separator.

tsx showlinenumbers {1,10-12}

import { Slash } from "lucide-react"

...

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>
      <Slash />
    </BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

You can compose `` with a <DropdownMenu /> to create a dropdown in the breadcrumb.

tsx showlinenumbers {1-6,11-21}

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

...

<BreadcrumbItem>
  <DropdownMenu>
    <DropdownMenuTrigger className="flex items-center gap-1">
      Components
      <ChevronDownIcon />
    </DropdownMenuTrigger>
    <DropdownMenuContent align="start">
      <DropdownMenuItem>Documentation</DropdownMenuItem>
      <DropdownMenuItem>Themes</DropdownMenuItem>
      <DropdownMenuItem>GitHub</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</BreadcrumbItem>

Collapsed

We provide a `` component to show a collapsed state when the breadcrumb is too long.

tsx showlinenumbers {1,9}

import { BreadcrumbEllipsis } from "@/components/ui/breadcrumb"

...

<Breadcrumb>
  <BreadcrumbList>
    {/* ... */}
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    {/* ... */}
  </BreadcrumbList>
</Breadcrumb>

Link component

To use a custom link component from your routing library, you can use the asChild prop on ``.

tsx showlinenumbers {1,8-10}

import { Link } from "next/link"

...

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink asChild>
        <Link href="/">Home</Link>
      </BreadcrumbLink>
    </BreadcrumbItem>
    {/* ... */}
  </BreadcrumbList>
</Breadcrumb>

Responsive

Here's an example of a responsive breadcrumb that composes with, <DropdownMenu />, and <Drawer />.

It displays a dropdown on desktop and a drawer on mobile.

File: apps/www/content/docs/components/button.mdx

title: Button featured: true component: true

Installation

CLI Manual

bash

npx shadcn@latest add button

Install the following dependencies:

bash

npm install @radix-ui/react-slot

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

tsx

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

tsx

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

Link

You can use the buttonVariants helper to create a link that looks like a button.

tsx

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

tsx

<Link className={buttonVariants({ variant: "outline" })}>Click here</Link>

Alternatively, you can set the asChild parameter and nest the link component.

tsx

<Button asChild>
  <Link href="/login">Login</Link>
</Button>

Examples

Primary

Secondary

Destructive

Outline

Ghost

Link

Icon

With Icon

Loading

As Child

Changelog

2024-10-16 Classes for icons

Added gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 to the button to automatically style icon inside the button.

Add the following classes to the cva call in your button.tsx file.

diff showlinenumbers title="button.tsx"

const buttonVariants = cva(
  "inline-flex ... gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
)

File: apps/www/content/docs/components/calendar.mdx

title: Calendar component: true links: doc: https://react-day-picker.js.org

About

The Calendar component is built on top of React DayPicker.

Installation

CLI Manual

bash

npx shadcn@latest add calendar

Install the following dependencies:

bash

npm install react-day-picker date-fns

Add the Button component to your project.

The Calendar component uses the Button component. Make sure you have it installed in your project.

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

tsx

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

tsx

const [date, setDate] = React.useState<Date | undefined>(new Date())

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

See the React DayPicker documentation for more information.

Date Picker

You can use the <Calendar> component to build a date picker. See the Date Picker page for more information.

Examples

Form

Changelog

11-03-2024 day_outside color

Changed the color of the day_outside class to the following to improve contrast:
tsx showlinenumbers title="calendar.tsx"
```
"day_outside:
      "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
```

File: apps/www/content/docs/components/card.mdx

title: Card component: true

Installation

CLI Manual

bash

npx shadcn@latest add card

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

tsx

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

tsx

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

Examples

Changelog

Changed the CardTitle and CardDescription components to use div instead of h3 and p to improve accessibility.

tsx showlinenumbers title="card.tsx"

const CardTitle = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("font-semibold leading-none tracking-tight", className)}
    {...props}
  />
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
CardDescription.displayName = "CardDescription"

File: apps/www/content/docs/components/carousel.mdx

title: Carousel component: true links: doc: https://www.embla-carousel.com/get-started/react api: https://www.embla-carousel.com/api

About

The carousel component is built using the Embla Carousel library.

Installation

CLI Manual

bash

npx shadcn@latest add carousel

Install the following dependencies:

bash

npm install embla-carousel-react

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

tsx

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

tsx

<Carousel>
  <CarouselContent>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Examples

Sizes

To set the size of the items, you can use the basis utility class on the <CarouselItem />.

tsx title="example" showlinenumbers {4-6}

// 33% of the carousel width.
<Carousel>
  <CarouselContent>
    <CarouselItem className="basis-1/3">...</CarouselItem>
    <CarouselItem className="basis-1/3">...</CarouselItem>
    <CarouselItem className="basis-1/3">...</CarouselItem>
  </CarouselContent>
</Carousel>

tsx title="responsive" showlinenumbers {4-6}

// 50% on small screens and 33% on larger screens.
<Carousel>
  <CarouselContent>
    <CarouselItem className="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
    <CarouselItem className="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
    <CarouselItem className="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
  </CarouselContent>
</Carousel>

Spacing

To set the spacing between the items, we use a pl-[VALUE] utility on the <CarouselItem /> and a negative -ml-[VALUE] on the <CarouselContent />.

**Why:** I tried to use the `gap` property or a `grid` layout on the ` ` but it required a lot of math and mental effort to get the spacing right. I found `pl-[VALUE]` and `-ml-[VALUE]` utilities much easier to use.

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

tsx title="example" showlinenumbers /-ml-4/ /pl-4/

<Carousel>
  <CarouselContent className="-ml-4">
    <CarouselItem className="pl-4">...</CarouselItem>
    <CarouselItem className="pl-4">...</CarouselItem>
    <CarouselItem className="pl-4">...</CarouselItem>
  </CarouselContent>
</Carousel>

tsx title="responsive" showlinenumbers /-ml-2/ /pl-2/ /md:-ml-4/ /md:pl-4/

<Carousel>
  <CarouselContent className="-ml-2 md:-ml-4">
    <CarouselItem className="pl-2 md:pl-4">...</CarouselItem>
    <CarouselItem className="pl-2 md:pl-4">...</CarouselItem>
    <CarouselItem className="pl-2 md:pl-4">...</CarouselItem>
  </CarouselContent>
</Carousel>

Orientation

Use the orientation prop to set the orientation of the carousel.

tsx showlinenumbers /vertical | horizontal/

<Carousel orientation="vertical | horizontal">
  <CarouselContent>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
  </CarouselContent>
</Carousel>

Options

You can pass options to the carousel using the opts prop. See the Embla Carousel docs for more information.

tsx showlinenumbers {2-5}

<Carousel
  opts={{
    align: "start",
    loop: true,
  }}
>
  <CarouselContent>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
  </CarouselContent>
</Carousel>

API

Use a state and the setApi props to get an instance of the carousel API.

tsx showlinenumbers {1,4,22}

import { type CarouselApi } from "@/components/ui/carousel"

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

  React.useEffect(() => {
    if (!api) {
      return
    }

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

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

  return (
    <Carousel setApi={setApi}>
      <CarouselContent>
        <CarouselItem>...</CarouselItem>
        <CarouselItem>...</CarouselItem>
        <CarouselItem>...</CarouselItem>
      </CarouselContent>
    </Carousel>
  )
}

Events

You can listen to events using the api instance from setApi.

tsx showlinenumbers {1,4-14,16}

import { type CarouselApi } from "@/components/ui/carousel"

export function Example() {
  const [api, setApi] = React.useState<CarouselApi>()

  React.useEffect(() => {
    if (!api) {
      return
    }

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

  return (
    <Carousel setApi={setApi}>
      <CarouselContent>
        <CarouselItem>...</CarouselItem>
        <CarouselItem>...</CarouselItem>
        <CarouselItem>...</CarouselItem>
      </CarouselContent>
    </Carousel>
  )
}

See the Embla Carousel docs for more information on using events.

Plugins

You can use the plugins prop to add plugins to the carousel.

ts showlinenumbers {1,6-10}

import Autoplay from "embla-carousel-autoplay"

export function Example() {
  return (
    <Carousel
      plugins={[
        Autoplay({
          delay: 2000,
        }),
      ]}
    >
      // ...
    </Carousel>
  )
}

See the Embla Carousel docs for more information on using plugins.

Docker & Self-Hosted Deployment Verified OCI

File: apps/www/__registry__/README.md Copy Chapter

File: apps/www/content/docs/components/accordion.mdx Copy Chapter

title: Accordion component: true links: doc: https://www.radix-ui.com/docs/primitives/components/accordion api: https://www.radix-ui.com/docs/primitives/components/accordion#api-reference Copy Chapter

Installation Copy Chapter

Usage Copy Chapter

File: apps/www/content/docs/components/alert.mdx Copy Chapter

title: Alert component: true Copy Chapter

Installation Copy Chapter

Usage Copy Chapter

Examples Copy Chapter

Default Copy Section

Destructive Copy Section

File: apps/www/content/docs/components/alert-dialog.mdx Copy Chapter

title: Alert Dialog featured: true component: true links: doc: https://www.radix-ui.com/docs/primitives/components/alert-dialog api: https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference Copy Chapter

Installation Copy Chapter

Usage Copy Chapter

File: apps/www/content/docs/components/aspect-ratio.mdx Copy Chapter

title: Aspect Ratio component: true links: doc: https://www.radix-ui.com/docs/primitives/components/aspect-ratio api: https://www.radix-ui.com/docs/primitives/components/aspect-ratio#api-reference Copy Chapter

Installation Copy Chapter

Usage Copy Chapter

File: apps/www/content/docs/components/avatar.mdx Copy Chapter

title: Avatar component: true links: doc: https://www.radix-ui.com/docs/primitives/components/avatar api: https://www.radix-ui.com/docs/primitives/components/avatar#api-reference Copy Chapter

Installation Copy Chapter

Usage Copy Chapter

File: apps/www/content/docs/components/badge.mdx Copy Chapter

title: Badge component: true Copy Chapter

Installation Copy Chapter

Usage Copy Chapter

Link Copy Section

Examples Copy Chapter

Default Copy Section

Secondary Copy Section

Outline Copy Section

Destructive Copy Section

File: apps/www/content/docs/components/breadcrumb.mdx Copy Chapter

title: Breadcrumb component: true Copy Chapter

Installation Copy Chapter

Usage Copy Chapter

Examples Copy Chapter

Custom separator Copy Section

Dropdown Copy Section

Collapsed Copy Section

Link component Copy Section

Responsive Copy Section

File: apps/www/content/docs/components/button.mdx Copy Chapter

title: Button featured: true component: true Copy Chapter

Installation Copy Chapter

Usage Copy Chapter

Link Copy Chapter

Examples Copy Chapter

Primary Copy Section

Secondary Copy Section

Destructive Copy Section

Outline Copy Section

Ghost Copy Section

Link Copy Section

Icon Copy Section

With Icon Copy Section

Loading Copy Section

As Child Copy Section

Changelog Copy Chapter

2024-10-16 Classes for icons Copy Section

File: apps/www/content/docs/components/calendar.mdx Copy Chapter

title: Calendar component: true links: doc: https://react-day-picker.js.org Copy Chapter

About Copy Chapter

Installation Copy Chapter

Usage Copy Chapter

Date Picker Copy Chapter

Examples Copy Chapter

Form Copy Section

Changelog Copy Chapter

11-03-2024 day_outside color Copy Section

File: apps/www/content/docs/components/card.mdx Copy Chapter

title: Card component: true Copy Chapter

Installation Copy Chapter

Usage Copy Chapter

Examples Copy Chapter

Changelog Copy Chapter

11-03-2024 a11y for title and description Copy Section

File: apps/www/registry/README.md

File: apps/www/content/docs/components/accordion.mdx

title: Accordion component: true links: doc: https://www.radix-ui.com/docs/primitives/components/accordion api: https://www.radix-ui.com/docs/primitives/components/accordion#api-reference

Installation

Usage

File: apps/www/content/docs/components/alert.mdx

title: Alert component: true

Installation

Usage

Examples

Default

Destructive

File: apps/www/content/docs/components/alert-dialog.mdx

title: Alert Dialog featured: true component: true links: doc: https://www.radix-ui.com/docs/primitives/components/alert-dialog api: https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference

Installation

Usage

File: apps/www/content/docs/components/aspect-ratio.mdx

title: Aspect Ratio component: true links: doc: https://www.radix-ui.com/docs/primitives/components/aspect-ratio api: https://www.radix-ui.com/docs/primitives/components/aspect-ratio#api-reference

Installation

Usage

File: apps/www/content/docs/components/avatar.mdx

title: Avatar component: true links: doc: https://www.radix-ui.com/docs/primitives/components/avatar api: https://www.radix-ui.com/docs/primitives/components/avatar#api-reference

Installation

Usage

File: apps/www/content/docs/components/badge.mdx

title: Badge component: true

Installation

Usage

Link

Examples

Default

Secondary

Outline

Destructive

File: apps/www/content/docs/components/breadcrumb.mdx

title: Breadcrumb component: true

Installation

Usage

Examples

Custom separator

Dropdown

Collapsed

Link component

Responsive

File: apps/www/content/docs/components/button.mdx

title: Button featured: true component: true

Installation

Usage

Link

Examples

Primary

Secondary

Destructive

Outline

Ghost

Link

Icon

With Icon

Loading

As Child

Changelog

2024-10-16 Classes for icons

File: apps/www/content/docs/components/calendar.mdx

title: Calendar component: true links: doc: https://react-day-picker.js.org

About

Installation

Usage

Date Picker

Examples

Form

Changelog

11-03-2024 day_outside color

File: apps/www/content/docs/components/card.mdx

title: Card component: true

Installation

Usage

Examples

Changelog

11-03-2024 a11y for title and description

File: apps/www/content/docs/components/carousel.mdx