Plinth

Sheet

Panel that slides in from an edge, for filters, detail views, and mobile nav.

Install

npx shadcn@latest add https://plinth.dhrumilkherde.com/r/sheet.json

Usage

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

<Sheet>
  <SheetTrigger render={<Button variant="outline">Filters</Button>} />
  <SheetContent side="right">
    <SheetHeader><SheetTitle>Filters</SheetTitle></SheetHeader>
  </SheetContent>
</Sheet>

Sides

Props

SheetContent: side (right · left · top · bottom, default right), showClose (default true).

Accessibility

  • Built on Base UI Dialog, so it inherits full modal semantics: focus trap, focus restore, Escape, inert background.
  • The bottom sheet pattern is the mobile-friendly variant; keep its content short and scrollable.

Alert Dialog

Confirmation dialog for consequential actions; must be answered explicitly.

Toast

Transient notifications with queueing, swipe-to-dismiss, and promise support.

On this page

InstallUsageSidesPropsAccessibility