minflow

Overlays

Sheet

The sheet is the dialog's less demanding cousin: the same scrim and the same dismissal, but it slides in from an edge and keeps the context it came from visible alongside. The right edge is for detail and metadata on a wide layout, the bottom edge is for thumb-reach actions on a small one, and the bottom variant grows a grab handle so it reads as draggable material.

npx shadcn@latest add @minflow/sheet

Where to use it

  • Detail, metadata, history, and quiet actions that belong to a row you do not want to leave.
  • Small-screen action lists, where the bottom edge is the only comfortable reach.
  • Never for a decision that must be answered before anything else continues; that is a dialog.

Variations

Side sheet

The default on wide layouts. Everything secondary lives one slide away and the list behind it stays exactly where the reader left it.

Bottom sheet

Small screens and touch. The grab handle marks the top edge as material, and the sheet stops well short of the full height so the context stays visible above it.

Widened

When the detail is genuinely two columns wide, such as a diff or a record with a preview. Widen through className rather than reaching for a dialog.