Sheet

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/sheet

Composed components

Manual installation

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

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.

Sticky

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

Component API

Sheet

The Sheet component controls the sheet trigger and content.

SheetTrigger

The SheetTrigger component defines the element that opens a sheet.

SheetContent

The SheetContent component renders the slide-in sheet panel.

SheetHeader

The SheetHeader component groups the sheet title and description.

SheetTitle

The SheetTitle component renders the sheet heading.

SheetDescription

The SheetDescription component renders supporting text inside a sheet.

SheetBody

The SheetBody component wraps the main sheet content.

SheetFooter

The SheetFooter component groups sheet actions.

SheetClose

The SheetClose component renders a button that closes the sheet.

See the React Aria for the full API reference.