Sheet

The sheet is a panel that slides in from a screen edge for navigation, forms, or supplementary content. Use it for a mobile nav menu, a side filter panel, a detail pane, or an action sheet. For a panel the user drags between snap-point heights, use Drawer instead.

Preview

Installation

npx shadcn@latest add @cubby-ui/sheet

Usage

import {
  Sheet,
  SheetBody,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/cubby-ui/sheet";

<Sheet>
  <SheetTrigger />
  <SheetContent>
    <SheetHeader>
      <SheetTitle />
    </SheetHeader>
    <SheetBody />
  </SheetContent>
</Sheet>

Composition

Sheet
├── SheetTrigger
└── SheetContent
    ├── SheetHeader
    │   ├── SheetTitle
    │   └── SheetDescription
    ├── SheetBody
    └── SheetFooter
        └── SheetClose

SheetContent composes the portal, viewport, and popup, and renders a backdrop when the sheet is modal. Use SheetBody for scrollable content.

Examples

Positions

Use side on SheetContent to choose which edge the sheet slides in from.

Floating Variant

Use variant="floating" for a card-like sheet with rounded corners and margins from the screen edges.

With Form

Place form fields inside SheetBody, with actions in SheetFooter.

Nested Sheets

Open a sheet from inside another; the parent scales down and shifts toward its edge behind the nested sheet.

Inset Footer

Use footerVariant="inset" to give the footer a muted background with a top border.

Detached Trigger

Use createSheetHandle() to place the trigger outside the Sheet.

Non-Modal

Pass modal={false} to keep the page interactive: the backdrop is hidden, pointer events pass through the empty area, and outside clicks don't dismiss the sheet.

Accessibility

Include a SheetTitle inside every SheetContent so the dialog is named for assistive technology; add a SheetDescription when extra context helps. When a modal sheet opens, focus moves into it and is trapped until it closes, and the built-in close button is labeled for screen readers. With modal={false}, the page stays interactive and focus is not trapped, so make sure the sheet can still be closed from the keyboard.

API Reference

The Sheet component is built on top of Base UI's Dialog. All Base UI props are supported. The documentation below only covers custom props specific to our implementation.

For the complete Base UI API, see the Base UI Dialog documentation.

Utilities

createSheetHandle

Creates a handle that connects a sheet to one or more external SheetTrigger components. Useful when the triggers need to live outside the Sheet, for example when each row in a list has its own trigger but they all share one sheet.

import { createSheetHandle } from "@/registry/default/sheet/sheet";
 
const handle = createSheetHandle();

Passing data from the trigger to the sheet

The handle accepts an optional <Payload> generic that types a value each trigger can pass along. The sheet reads it through a render-prop child, so you can render different content per trigger without duplicating the sheet markup.

type Skill = { id: string; name: string };
 
const handle = createSheetHandle<Skill>();
 
// Multiple triggers, each with its own payload:
skills.map((skill) => (
  <SheetTrigger key={skill.id} handle={handle} payload={skill}>
    View {skill.name}
  </SheetTrigger>
));
 
// One shared sheet that renders based on the active trigger:
<Sheet handle={handle}>
  <SheetContent>
    {({ payload: skill }) => (
      <SheetHeader>
        <SheetTitle>{skill?.name}</SheetTitle>
      </SheetHeader>
    )}
  </SheetContent>
</Sheet>;

Without the <Skill> generic, payload inside the render prop resolves to unknown.

Props

Sheet

Root component. Forwards all props to Base UI's Dialog.Root, with modified defaults for the modal prop.

SheetContent

Sliding panel container with positioning. Composes Dialog.Portal, Dialog.Viewport, and Dialog.Popup. Also renders Dialog.Backdrop when the sheet is modal. Props are forwarded to Dialog.Popup.

SheetBody

Scrollable content area within the sheet.