Sheet

Extends the Dialog component to display content that slides in from the edge of the screen.

Installation

npx shadcn@latest add @uqudo/sheet

Installing it also installs Button, which renders the close button in the corner of the sheet.

Usage

import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/uqudo/ui/sheet"

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>
        This action cannot be undone.
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

SheetHeader and SheetFooter add their own padding (p-6). Content you place between them needs its own horizontal padding, for example px-6.

Examples

Side

SheetContent slides in from the right by default. Pass side to change the edge.

API Reference

The root. Forwards every prop of SheetPrimitive.Root (open, defaultOpen, onOpenChange, modal).

SheetContent

Prop

Type

Other parts

Component	Renders	Notes
`SheetTrigger`	`SheetPrimitive.Trigger`	Use `asChild` to wrap your own button.
`SheetClose`	`SheetPrimitive.Close`	Closes the sheet. Use `asChild` to wrap a `Button`.
`SheetHeader`	`<div>`	Column layout with `gap-1.5 p-6`.
`SheetFooter`	`<div>`	Pushed to the bottom with `mt-auto`, `gap-2 p-6`.
`SheetTitle`	`SheetPrimitive.Title`	Required for accessibility.
`SheetDescription`	`SheetPrimitive.Description`	Muted supporting copy.

Each part carries a data-slot attribute named after it (sheet, sheet-trigger, sheet-content, sheet-header, ...). The content also exposes data-side and the Radix data-state.

Sheet

On this page