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.

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.

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.

Prop	Type	Default
`className`	`string`	-

SheetContent

The SheetContent component renders the slide-in sheet panel.

Prop	Type	Default
`className`	`string`	-
`closeButton`	`boolean`	`true`
`isFloat`	`boolean`	`true`
`overlay`	`Omit<ModalOverlayProps, "children">`	-
`side`	`"top" \| "bottom" \| "left" \| "right"`	`right`

SheetHeader

The SheetHeader component groups the sheet title and description.

Prop	Type	Default
`className`	`string`	-
`description`	`string`	-
`title`	`string`	-

SheetTitle

The SheetTitle component renders the sheet heading.

Prop	Type	Default
`className`	`string`	-

SheetDescription

The SheetDescription component renders supporting text inside a sheet.

Prop	Type	Default
`className`	`string`	-

SheetBody

The SheetBody component wraps the main sheet content.

Prop	Type	Default
`className`	`string`	-

SheetFooter

The SheetFooter component groups sheet actions.

Prop	Type	Default
`className`	`string`	-

SheetClose

The SheetClose component renders a button that closes the sheet.

Prop	Type	Default
`className`	`string`	-
`intent`	`"primary" \| "secondary" \| "warning" \| "danger" \| "success" \| "outline" \| "plain"`	`plain`

See the React Aria for the full API reference.

Unlock the full power of
Intent UI Design

Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.

Learn more

Popover

Tooltip

Sheet

On this page