Drawer
Preview appears after the next Storybook update.
<Drawer />When to use
Use it for
- Details or editing for one item of a list or table, where the user wants to keep the list in mind.
- Filters and settings for the current view.
- side end (default) for details, start for navigation, bottom for small screens and quick choices.
Not for
- A short task that needs full attention: use Dialog.
- Content that should stay visible while the user works on the page: use a non-modal side panel in the layout.
Do and don't
Every example is rendered with the real component, so it always matches what ships.
Title it with the item's name
"color.signal.default" tells the user which row they opened. The description says what it is for.
Put the actions in the footer
The footer stays visible while the body scrolls.
A drawer that opens another drawer
Stacked sheets hide where the user came from. Navigate inside the drawer or use a page.
Accessibility
- Base UI Drawer: modal dialog semantics, named by the title, focus trapped, Escape closes, focus returns to the trigger.
- Swipe to dismiss is an extra for touch, never the only way: the close button and Escape always work.
- The page behind is inert while the drawer is open.
- When the body is taller than the sheet it becomes a focusable region named by the title, so keyboard users can Tab to it and scroll with the arrow keys. A body that fits adds no tab stop.
- Slides in 300ms with an exponential ease-out; reduced motion shows it instantly.
- start and end follow the physical left and right in v1; RTL layouts should pass the mirrored side.
Content guidelines
- Title: the item's name, or the task when there is no item ("Filter tokens").
- Footer: the same verb rules as Dialog. Primary last.
From the code Generated from the component, not editable here.
Anatomy and tokens
Read from packages/react/src/components/Drawer/Drawer.module.css at build time. Every value is a token: open one to see its alias chain in both themes.
- Scrim
.backdrop - Scrim
.backdrop[data-swiping] - Positioning layer
.viewport - Sheet (drawer.bg, drawer.radius on the inner edge, drawer.shadow)
.popup - Sheet (drawer.bg, drawer.radius on the inner edge, drawer.shadow)
.popup[data-swiping] - Sheet (drawer.bg, drawer.radius on the inner edge, drawer.shadow)
.popup[data-ending-style] - sm
.sm - md
.md - lg
.lg - From the end edge
.end, .start - From the end edge
.end - From the start edge
.start - From the bottom
.bottom - Drag handle (bottom sheets)
.handle - Header
.header - heading
.heading - Title
.title - Description
.description - Close button
.close - Scrolling body
.body - Scrolling body, focus
.body:focus-visible - Footer
.footer
Motion and interaction
Drawer animates on open and close. Try it in the preview at the top.
| When | What changes | Duration | Easing |
|---|---|---|---|
| Open | Movement | motion.duration.slow300 ms | motion.easing.enterstarts fast, lands softly |
| Close | Movement | motion.duration.moderate200 ms | motion.easing.exitstarts softly, leaves fast |
With reduced motion turned on, every change happens at once.
It also uses motion.duration.instant for motion this table does not list yet.
From the code Generated from the component, not editable here.
Props
Parsed from the TypeScript types in packages/react/src/components/Drawer/Drawer.tsx, so this table cannot drift from the code.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | none | No description in the code yet. |
defaultOpen | boolean | none | No description in the code yet. |
onOpenChange | (open: boolean) => void | none | No description in the code yet. |
side | 'start' | 'end' | 'bottom' | 'end' | Edge the sheet slides from. `end` (default) for details and filters, `start` for navigation, `bottom` on small screens. |
disablePointerDismissal | boolean | false | Keep it open when the scrim is clicked. |
children | ReactNode | none | DrawerTrigger and DrawerContent. |
Playground
Drawer has no typed options to play with: it is a container. Compose it with other components and any native attribute. Here it is in both themes.
Workbench
For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Drawer in Storybook).
Embed Storybook stories here (5)
Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.
End
Start
Bottom
AllStates
LongContent
From the code Generated from the component, not editable here.
Changelog
- New
The measure now writes the Figma sets drawn under a component's folder as their own entries, so Claude can fix them: popups drawn open (Dialog/Popup, AlertDialog/Popup, Drawer/Popup, Menu/Popup, Popover/Popup, Tooltip/Popup, and Select/Popup or Combobox/Popup, measured open when the stories show them closed) and sets that fix a prop (Pagination/Full, Pagination/Compact, Progress/Linear)
v1.0.0, Nov 11, 2026
- New
Overlays: Dialog (sizes, scrolling body, footer, close last in focus order), AlertDialog (destructive confirmations, async confirm), Drawer (start, end, bottom with swipe), Popover, Tooltip with TooltipProvider, Menu (icons, shortcuts, groups, submenus, checkbox and radio items, danger items)
v1.0.0, Nov 11, 2026
- New
Component change requests in Studio: a Requests view in Changes (status, linked pull request, Jira key, a detail with "Implement with Claude"), "Request a change" in the Components drawer, an Integrations section in Settings that proposes Jira settings as a pull request, a line on the Overview when requests wait, and a "Component change requests" section in How review works
v1.0.0, Nov 11, 2026
- Fix
Drawer: a body taller than the sheet is now a focusable region named by the title, so it can be scrolled with the keyboard
v1.0.0, Nov 11, 2026
- Fix
Studio Components drawer: the story preview sizes to the story (Bridge's Storybook posts its height when embedded) instead of a 1200px frame with its own scrollbar; other Storybooks rest at a sensible height
v1.0.0, Nov 11, 2026
- Fix
Studio Components: the Open requests column leaves the table (teams triage requests in Jira); the component drawer still counts them with a link to GitHub
v1.0.0, Nov 11, 2026
- Fix
Library token drawer: the token name is a plain heading, one summary comes first (a large specimen next to the value with copy, where the value comes from on one line with each token clickable, one plain sentence such as "Primitive. 9 brand tokens point to it, used by 36 components."), then Aliased by, Used by, Contrast and History as collapsed rows that share one row component (first 5, then "Show all"), and one "For developers" fold at the bottom (code names, the developer note, the files)
v1.0.0, Nov 11, 2026
- Fix
Studio Components, calmer list and drawer
v1.0.0, Nov 11, 2026