Sheet

Installation

npx shadcn@latest add @fujin/sheet

Usage

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

<Sheet>
  <SheetTrigger render={<Button variant="outline">Open</Button>} />
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Shipping address</SheetTitle>
      <SheetDescription>Used for this order only.</SheetDescription>
    </SheetHeader>
    ...
  </SheetContent>
</Sheet>

Side

side is "top", "right" (default), "bottom" or "left". Left and right sheets are 3/4 of the screen wide, up to max-w-sm; override with className="sm:max-w-lg".

Sheet or drawer?

Sheet is a Base UI Dialog positioned against an edge. It has no swipe or drag gestures. For a mobile bottom sheet that the user can swipe away or snap to heights, a drawer component built on Base UI's Drawer is planned.

What's different from shadcn/ui

• Built on Base UI's Dialog; render replaces asChild.
• The close button is a 32px Button with a solid focus ring (WCAG 2.5.8, 1.4.11).
• Transitions are skipped under prefers-reduced-motion.

API Reference

Every other prop is forwarded to the Base UI Dialog.