Sheet

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>

Examples

Positions

Open sheet from different screen edges.

Floating Variant

Use variant="floating" for a card-like appearance with rounded corners and margins from screen edges. Great for action sheets and share menus.

With Form

Include form elements within the sheet.

Nested Sheets

Sheets can be nested within each other. When a nested sheet opens, the parent sheet scales down slightly and shifts away from its edge, revealing a sliver of it behind the nested sheet.

Inset Footer

Use footerVariant="inset" to give the footer a muted background with a top border, visually separating it from the content.

Detached Trigger

Place the trigger outside of the Sheet component using createSheetHandle().

Non-Modal

Pass modal={false} for a floating sheet that keeps the page interactive. The backdrop is hidden, pointer events pass through the empty area around the popup, and outside clicks don't dismiss the sheet.

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.