Sheet

The drawing opens on the surface: the frame is the window, the md panel is flush to the right edge it names, and the edge buttons re-open it — top and bottom wear the grabber — while the veil washes and blurs the page behind it.

UsageCopy Anchor Link

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

Sheet is shadcn's name for the surface Drawer already paints: a veil over the window, a panel on one edge, a focus trap inside it, Escape and an outside press to close, and focus returned to the opener. It re-exports that machinery, so the drawing above is the Drawer page's — there is one implementation, not two.

The sheet animates in: the panel slides its own span from the edge it names (a bottom sheet rises a whole 320px) over the slow level, the veil fades, and the surface is clipped by the window while it travels. A bottom sheet wears the vaul grabber and rounded inner corners; MotionProvider preference="reduced" paints the settled frame at once. The veil is the page's background at 55%; the blur the drawing carries has no native route (StyleDesc has no filter).

<Sheet>
  <SheetTrigger>Filters</SheetTrigger>
  <SheetContent side="right" label="Filters">
    <SheetHeader>
      <SheetTitle>Filters</SheetTitle>
      <SheetDescription>Narrow the result set, then apply.</SheetDescription>
    </SheetHeader>
    <SheetFooter>
      <SheetClose>Cancel</SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

APICopy Anchor Link

Edit this page on GitHubpackages/components/docs/sheet.mdx