Sheet

Extends the Dialog component to display content that complements the main view.

Installation


$ pnpm dlx shadcn@latest add "https://ui.manpuc.me/r/sheet.json"

Usage

After you add the component with the CLI, import it from your UI folder:

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
 
export function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger>Open</SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Are you absolutely sure?</SheetTitle>
          <SheetDescription>
            This action cannot be undone. This will permanently delete your account
            and remove your data from our servers.
          </SheetDescription>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  )
}

Examples

Positions

API Reference

The component uses Radix UI Primitives. For a complete API reference, please refer to the Radix UI Dialog Documentation.

Prop	Type	Default	Description
`side`	`enum`	`"right"`	The position of the sheet (`top`, `bottom`, `left`, `right`).
`open`	`boolean`	-	The controlled open state of the sheet.
`onOpenChange`	`function`	-	Event handler called when the open state changes.

Separator Sidebar

On This Page

Installation Usage Examples Positions API Reference