ExperimentalorganismOverlays

Drawer

A right-hand panel for one item's details or a short list, below the top bar.

import { … } from "@brdgapp/ui/components/drawer"

Usage

Drawer opens one item's details, or a short list, from the right, below the top bar, so the page it came from stays in view. Bridge uses it for an intro, a relationship, or a week of contacts. It comes in two widths: one item, or a list.

When to use

Details of a row people opened from a table or feed.
A short list behind a number (who you met that week).

When not to use

For a short form. Use Dialog instead.
For confirming something. Use ConfirmDialog instead.
For a whole area of the app. Give it a page.

Anatomy

Top bar

Priya Natarajan → Leah Okonkwo

Made by you · 4 days ago

Accepted

Priya Natarajan

Co-founder & CEO

Leah Okonkwo

Partner

Drawn in place and smaller. The real drawer opens from the right edge of the page.

Scrim. Dims the page below the top bar.
Panel. Full height below the 56px top bar, from the right edge: 576px (item) or 672px (list), the drawer shadow.
Header. Title, a muted line under it, optional actions, and Close.
Body. Scrolls on its own.

Examples

An intro

Opens from the right, below the top bar.

States

State	What happens
Open	Slides in from the right; focus moves into it.
Closed	Slides out; focus returns to the row that opened it.

Behavior

Built on Base UI Dialog: focus stays inside; Esc and Close shut it.
A drawer opened from a drawer closes first on Esc.
Layer 60, so menus (80) and confirm dialogs (90) opened from inside appear above it.
On phones it fills the width.

Do and don't

Load the drawer's data with DataState inside the body.

Don't

Wait to open it until the data arrives.

Content

Title: the thing itself ("Priya Natarajan → Leah Okonkwo"). Subtitle: who and when.

Accessibility

The title names it for screen readers.

Keys	Action
`Tab`	Moves through the drawer and stays inside it.
`Esc`	Closes it.

API reference

Drawer

The panel, built on Base UI Dialog.

Prop	Type	Default	Description
`open`	`boolean`	—	Whether it shows.
`onClose`	`() => void`	—	Called on Close or Esc.
`title`	`ReactNode`	—	The item.
`subtitle`	`ReactNode`	—	Who and when.
`size`	`"item" \| "list"`	`"item"`	576 or 672px.
`actions`	`ReactNode`	—	Beside Close, e.g. an ActionMenu.
`children`	`ReactNode`	—	The body.

Lineage

What it's built from and where it's used, read from the code. When you change it, check these too.

Built from: IconButton
Used by components: None
Used in patterns: Keyboard and commands Inline editing Deep links and URL state Panes, rails and sheets
Used in templates: None

Known gaps

Where the code still differs from the system. Follow the system, not the gap.

New in the package (approved 2026-11-02). Bridge OS's four drawers are hand-built with their own animation and close handling; they move onto it.

Sources

Bridge OS intro-detail-drawer, relationship-detail-drawer, week-contacts-drawer (widths, position, closing).
Pattern: Panes, rails and sheets (proposal approved 2026-11-02).