Fourteen variants across two containers: a sheet that slides in from three edges, and the round stepper button the usage frame builds a calorie picker out of.
Two containers, fourteen variants
Drawer - Direction × Show Header: bottom · right · left × Yes · No - there is no top
Drawer / Example Content / Button - Variant × State: Minus · Plus × Default · Hover · Focus · Pressed
Using the Drawer
Why is there no top direction?
A sheet dropping from the top runs into the status bar, the notch, the notification shade and browser chrome, and shadcn/ui's own examples do not use one. Three directions times a header switch gives six variants, and the file spends its variants on the cases that get built.
Which corners are rounded?
Only the two facing into the screen: the bottom sheet rounds its top pair, the right panel its left pair, the left panel its right pair. Rounding a corner that meets the screen edge leaves a notch with the scrim showing through, so the rule is per-direction rather than one radius applied all round.
Does the side panel have a grabber?
No. The 120 by 4 grabber belongs to the bottom sheet, where dragging down to dismiss is the gesture. A side panel is dismissed by tapping the scrim or the close action, so it starts straight at the header.
Why is the scrim so light?
It is base.foreground at 10%, where shadcn/ui puts 80% behind a dialog. A drawer usually keeps its context in view, so the page behind stays legible rather than being dimmed away. If you want it to feel like a hard modal, that is the number to change.
What is the stepper button doing here?
The usage frame builds a calorie picker into the phone sheet, and a plus and a minus in a bottom sheet want to be larger and rounder than an ordinary icon button. It is a 32px circle in eight variants, published alongside the drawer rather than off in Button.