Component · Overlay · 31
Drawer
Drawer = a 320px panel anchored to a screen edge, with a scrim behind it and the page still visible.
Row detail
What is a Drawer?
A drawer slides in from an edge and keeps the page visible. Name the edge, the width, and how it closes.
Variants
Tap a property to highlight it in the preview.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Give a value, not a vibe word.
- The horizontal size of the surface (modal max-width, sidebar width).
- The dimmed layer behind a modal that blocks the page.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
States
Tap a property to highlight it in the preview.
- Say this state explicitly in the prompt.
- Say this state explicitly in the prompt.
- The expanded state of a menu, dropdown, or dialog while it is visible.
- Say this state explicitly in the prompt.
Anatomy
These are the parts to name in your prompt.
- 01 Scrim
- 02 Panel
- 03 Header
- 04 Body
- 05 Footer
When to use
- Detail panels that keep the list visible behind them
- Filters on mobile where the screen is narrow
- Navigation on small viewports
Avoid when
- The decision is a single yes or no — use Dialog
- The content is short and centered — use Modal
- The panel needs to be open alongside a second panel
A drawer is for context, not decisions — if the user must answer yes or no, that is a dialog, not a panel.
See also
Create a drawer component.
STYLE
- 320px panel anchored right, full height, 16px radius on the leading edge
- #FFFFFF surface over a #1D1D1F 32% scrim
- header 16px 600 with a close icon, body scrolls, footer sticks
- slides in 240ms ease-out, closes in 180ms ease-in
STATES
- closed, opening, open with scrim, closing
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui