Sheet

1. Use for side panels

   • Forms with multiple fields
   • Settings panels
   • Detailed editors

2. Consider screen size

   • Sheets work well on desktop
   • On mobile, consider full-screen or bottom sheet variants

3. Structure content clearly

   • Use SheetHeader and SheetTitle for context
   • Use SheetSection to group related fields
   • Use SheetFooter for actions

Installation

npx shadcn-ui@latest add sheet

<Step>Install the following dependencies:</Step>

npm install @radix-ui/react-dialog

<Step>Copy and paste the following code into your project.</Step>

<Step>Update the import paths to match your project setup.</Step>

Usage

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet'

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>
        This action cannot be undone. This will permanently delete your account and remove your data
        from our servers.
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Examples

Nonmodal

This sheet is nonmodal, meaning it does not block the underlying content. It’s useful when you want to display content that complements the main content of the screen.

To have the underlying content resize to fit the sheet (so nothing is overlapping) use the Sidebar component or build a custom panel. You can refer to the following Studio components for guidance:

• AIAssistant
• EditorPanel
• AdvisorPanel

See LayoutSidebarProvider for more.

Size

You can adjust the size of the sheet using CSS classes:

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent className="w-[400px] sm:w-[540px]">
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>
        This action cannot be undone. This will permanently delete your account and remove your data
        from our servers.
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Side

Use the side property to <SheetContent /> to indicate the edge of the screen where the component will appear. The values can be top, right, bottom or left.

That said, stick to the default right unless you have a strong reason not to.