A slide-in panel for presenting additional content without disrupting the main screen. It slides in from the side to show related information or options.

Basic

A sheet is a modal component that slides in from the side of the screen. It's used to display a small amount of content that is related to the main content.

Installation

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.

This component comes packed with several components to enhance functionality and provide a seamless experience.

dialog

Manual installation

npm i 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>

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.

Sticky

You can use the SheetBody component to make the sheet sticky.

Popover

Tooltip

Sheet