Sheet

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

Installation

bash
npx shadcn@latest add sheet

Import

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

Default (right side)

<Sheet>  <SheetTrigger asChild>    <Button variant="outline">Open Sheet</Button>  </SheetTrigger>  <SheetContent>    <SheetHeader>      <SheetTitle>Edit profile</SheetTitle>      <SheetDescription>        Make changes to your profile here. Click save when you're done.      </SheetDescription>    </SheetHeader>    <div className="grid gap-4 py-4">      <div className="grid grid-cols-4 items-center gap-4">        <Label htmlFor="name" className="text-right">Name</Label>        <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />      </div>    </div>    <SheetFooter>      <SheetClose asChild>        <Button type="submit">Save changes</Button>      </SheetClose>    </SheetFooter>  </SheetContent></Sheet>

All sides

const sides = ["top", "right", "bottom", "left"] as constexport function SheetSides() {  return (    <div className="flex gap-2">      {sides.map((side) => (        <Sheet key={side}>          <SheetTrigger asChild>            <Button variant="outline">{side}</Button>          </SheetTrigger>          <SheetContent side={side}>            <SheetHeader>              <SheetTitle>Sheet from {side}</SheetTitle>              <SheetDescription>                This sheet slides in from the {side}.              </SheetDescription>            </SheetHeader>          </SheetContent>        </Sheet>      ))}    </div>  )}

Props

PROPTYPEDEFAULTDESCRIPTION
side"top" | "right" | "bottom" | "left""right"The edge the sheet slides in from
openboolean—Controlled open state
onOpenChange(open: boolean) => void—Called when open state changes
defaultOpenbooleanfalseInitial open state (uncontrolled)

Accessibility

  • Same accessibility behaviour as Dialog — focus trap, Escape to close, aria-labelledby wired via SheetTitle
  • side is purely visual — screen readers announce it the same as a dialog