BlankUI

overlay

Sheet

A panel that slides in from an edge of the screen, for filters, settings, details or mobile navigation.

npx blankui add sheet
Raw markdown for agentsRegistry JSON

When to use

  • Filters or settings next to a list the user still wants to see.
  • Details of a selected row or item.
  • Navigation menus on small screens.

Use something else when

  • A short focused task in the middle of the screen. Use dialog.
  • Confirming a destructive action. Use alert-dialog.
  • A few controls next to a button. Use popover.

Same API as Dialog, plus side. The title is a prop on SheetContent.

Import

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

Example

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Filters</Button>
  </SheetTrigger>
  <SheetContent side="right" title="Filters" description="Narrow down the list.">
    <Stack gap={4}>
      <Field label="Status">
        <Select defaultValue="open">...</Select>
      </Field>
    </Stack>
    <SheetFooter>
      <SheetClose asChild>
        <Button>Apply</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

side: right (default), left, top, bottom.

Mistakes to avoid

AvoidInstead
<SheetHeader><SheetTitle>...</SheetTitle></SheetHeader> (shadcn style)<SheetContent title="...">
A fixed-position div with a slide animation<Sheet> handles focus, Escape and scroll lock

Install with the shadcn CLI: npx shadcn add https://blank.vageshwar.dev/r/sheet.json