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.

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.

Props

SheetContent

Sliding panel container with backdrop and positioning. Composes Dialog.Portal, Dialog.Backdrop, and Dialog.Popup. Props are forwarded to Dialog.Popup.

SheetBody

Scrollable content area within the sheet.