Drawer
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.
A sheet is flush to one edge of the screen, so rounding the corners that meet that edge would leave notches with the scrim showing through. The bottom sheet rounds its top two, the right panel its left two, the left panel its right two. The radius is per-direction, never one value applied all round.
Bottom, right and left. A sheet dropping from the top collides with every status bar, notification and browser chrome there is, and nothing in shadcn/ui's own examples uses one, so the file does not draw it. Three directions times a header switch is six variants.
A round stepper button, published with the drawer
32 by 32 at radius 16, so a full circle. It exists because the bottom sheet in the usage frame is a calorie stepper, and a plus and a minus in a sheet want to be bigger and rounder than an ordinary icon button. Two glyphs times four states.
The 1px edge moves from base.border to base.ring and a 2px ring goes outside it, so the control reads as focused even at a glance on a busy sheet. Pressed drops the whole button to 60% rather than darkening the fill, which keeps the glyph and the edge fading together.
The same sheet on a phone and on a desktop
1200 by 2960, holding four scenes. The bottom sheet appears twice at 424 and at 1024 wide to make the point that a drawer is a width, not a device. The copy is the file's.
The scrim is base.foreground at 10%, much lighter than the 80% shadcn/ui puts behind a dialog. A drawer usually keeps its context visible, so the page behind stays legible rather than being dimmed away. Worth knowing if you expect a modal to feel modal.
Two containers, fourteen variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Drawer
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.
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.
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.
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.
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.