GitHub
New

Sheet

Extends the Dialog component to display content that complements the main content of the screen.

Kobalte
Kobalte

The Sheet component is built on top of Kobalte Dialog, which provides accessible modal, focus-management, and keyboard behavior.

Installation

Usage

import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  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.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Composition

Use the following composition to build a Sheet:

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

Side

Use the side prop on SheetContent to set the edge of the screen where the sheet appears. Values are top, right, bottom, or left.

No Close Button

Use showCloseButton={false} on SheetContent to hide the close button.

API Reference

For all primitive props and keyboard interactions, see the Kobalte Dialog API reference.