Sheet
A panel that slides in from an edge of the screen, for filters, detail views and side forms that want room without taking over the page.
import from ~/components/ui/sheet
Sides
side
A closed set of four. Right is the default and the one to reach for on desktop; bottom is the one that works on a phone.
Anatomy
header, body, footer
SheetHeader carries the title and one line of context, the body carries the work, and SheetFooter pins the actions to the bottom of the panel.
Rules
Do
Use it when the page behind matters: filters, a detail panel, a side form.
Give every sheet a SheetTitle. It is a dialog underneath, and a dialog needs an accessible name.
Pick the side from the layout: right or left on desktop, bottom on a phone.
Escape closes it, the overlay closes it, and focus returns to the trigger. Leave all three alone.
Don't
Do not open a sheet from inside a dialog, or a dialog from inside a sheet. Two trapped layers is a trap.
Do not use a sheet for a yes or no confirmation. That is a Dialog, and a small one.
Do not pass width, color or shadow classes to SheetContent. The side variant already sets the size and the surface.
Do not fill a sheet with a whole workflow. If it needs its own back button it needs its own page.