Sheet

The Sheet component is an extension of the Dialog primitive, designed to reveal supplementary content that slides in from the edge of the screen, complementing the primary view without obscuring it entirely.

Docs API Reference

Setting Up the Sheet Component

npx shadcn@latest add sheet

Implementing the Sheet Component

  Sheet, // The main container for the sheet component
  SheetContent, // Contains the content displayed within the sheet
  SheetDescription, // Provides a descriptive text for the sheet
  SheetHeader, // A container for the sheet's title and description
  SheetTitle, // The title of the sheet
  SheetTrigger, // The interactive element that opens the sheet
} from "@/components/ui/sheet";

<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>

Practical Examples and Implementations

Controlling the Sheet's Appearance Side

Specify the screen edge from which the sheet will emerge by utilizing the side property on the <SheetContent /> component. Valid values include top, right, bottom, and left.

Adjusting the Sheet's Dimensions

Modify the dimensions of the sheet by applying standard CSS classes for width and height.

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent className="w-[400px] sm:w-[540px]">
    <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>

Separator Sidebar