Sheet

RAC

Installation

Install the component via the CLI in one command.

npm

pnpm

yarn

bun

npx shadcn@latest add @intentui/sheet

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

dialog

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm

pnpm

yarn

bun

npm install react-aria-components tailwind-merge tailwind-variants

Anatomy

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Sheet Title</SheetTitle>
      <SheetDescription>Sheet Description</SheetDescription>
    </SheetHeader>
    <SheetBody>Sheet Body</SheetBody>
    <SheetFooter>
      <SheetClose>Cancel</SheetClose>
      <Button>Save</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

Examples

Like github

This example is like Github's profile page. You can see the sheet component is used to display the profile information.

Controlled

You can control the open state of the sheet by using the isOpen prop. You can also use the onOpenChange prop to listen to the open state change.

Positioning

You can position the modal component in different ways. You can use the side prop to position the modal component in the different directions.

Custom close

You can customize the close button by using the SheetClose component. This example demonstrates how to use the SheetClose component to create a custom close button.

Float

By default, the sheet will stack, but you can change this behavior by using the isFloat prop. This example demonstrates how to use the isFloat prop to create a sheet that does not stack.