Drawer
The edge-anchored panel, also called a side sheet. Same Radix foundation and three-region layout as Dialog, anchored to an edge instead of centred. Right, left and bottom are one component because they are one mechanism — a surface arriving from off-screen — differing only in axis. Source: src/components/ds/ui/Drawer.tsx.
Sides
Right and left become near-full-screen below the sm breakpoint: a 24rem side panel on a 375px screen is not a side panel. Bottom keeps its posture at every width.
Sizes
For right and left, size sets the width. For bottom it sets the height, since that is the axis the panel travels along.
Fit to content
By default a right or left drawer fills its edge. `fit` sizes it to its content and caps it at the viewport instead — the posture the shipping CartDrawer uses. DrawerBody is `flex: 1 1 auto`, so it grows to fill a full-height panel and hugs its content in a fit one without either call site configuring anything.
Anchor
Where a right or left panel's top edge sits. `viewport` uses the window's top gutter; `navbar` clears the site header so the panel reads as belonging to the chrome that opened it. This is the audit's sixth posture — the shipping CartDrawer was a separate implementation only because its top offset had nowhere to live. The offset reads --navbar-height with the same 56px fallback the navbar uses, so the panel stays correct if the header resizes.
Header actions
The header takes arbitrary controls left of the close button — the pattern BuilderGuideDialog needs for its 'Plain text' link.
Motion
Drawers use --motion-duration-sheet (280ms) and --motion-ease-sheet, which already existed for exactly this and were previously used only by /shop. Dialog uses the faster --motion-duration-fast: a centred dialog appears, a sheet travels, and travel needs longer to read as physical.
- The panel slides only — no fade. The scrim fades.
- Exit animations play: Radix Presence waits for animationend before unmounting.
- prefers-reduced-motion removes the movement but keeps the state change.
- Bottom is centred with auto margins rather than a translate, so transform stays free for the slide — Tailwind v4 compiles -translate-x-1/2 to the independent translate property, which composes with transform rather than being replaced by it.