Get started
Fabricator UI

Search documentation

Search pages, components, blocks, styles and colours.

Sheet

PreviousNext

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

Base UIReact AriaRadix UI
Radix UI

Installation

bunx --bun fabricator-ui@latest add sheet

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

See the Radix UI Dialog documentation.