Sheet

Side panel on the native <dialog> that slides in from any edge with a springy ease, staggers its content in, blurs the backdrop and returns focus on close.

Open

side

Installation

npx shadcn@latest add @glint-ui/sheet

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/sheet.json

Usage

import { Sheet } from "@/components/ui/sheet";

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>Save when you are done.</SheetDescription>
    </SheetHeader>
    {/* fields */}
    <SheetFooter>
      <SheetClose>Cancel</SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

Props

Prop	Type	Default	Description
side	"right" \| "left" \| "top" \| "bottom"	"right"	Edge the sheet slides in from (SheetContent prop).
defaultOpen	boolean	false	Initial open state when uncontrolled.
open	ReactNode	—	Controlled open state (with onOpenChange).
position	"fixed" \| "absolute"	"fixed"	fixed = true modal via showModal(); absolute = contained in the nearest positioned parent.
children	ReactNode	—	SheetTrigger and SheetContent (with SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose).
className	string	—	Extra classes for the root element.