Overlays & menusBrick 0.1.2

Drawer

Drawer is a modal task surface that enters from a logical or physical edge.

Live example

Built from the published package

Interactive

Choose with confidence

Know when Drawer is the right part

Use it when

Use it for focused navigation, details, or editing that benefits from retaining page context.

Choose another path when

Use Dialog for a centered modal task and nonmodal layout for persistent page content. Drawer does not own application navigation or responsive shell policy.

Installation and imports

tsx

import { Drawer } from "@flowstack-ui/brick/drawer";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

tsx

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/drawer.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Quick start

tsx

<Drawer.Root>
  <Drawer.Trigger>Open</Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Overlay />
    <Drawer.Content>
      <Drawer.Header><Drawer.Title>Settings</Drawer.Title></Drawer.Header>
      <Drawer.Body>Settings content</Drawer.Body>
      <Drawer.Footer><Drawer.Close>Done</Drawer.Close></Drawer.Footer>
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>

Visual recipes and states

Placement selects the entering edge; start/end are logical. Size selects inline dimensions for side drawers and block dimensions for top/bottom; full uses the viewport. Atom owns state, focus trap/return, dismissal, presence, portal, and placement state.

Examples

tsx

<Drawer.Content placement="start" size="lg">
  <Drawer.Title>Navigation</Drawer.Title>
  <Drawer.Body>…</Drawer.Body>
</Drawer.Content>

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Public exports are the Drawer namespace; named DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose, and DrawerBranch parts; their corresponding prop types; and DrawerPlacement plus DrawerSize.

DrawerRootProps
DrawerTriggerProps
DrawerPortalProps
DrawerOverlayProps
DrawerContentProps
DrawerHeaderProps
DrawerTitleProps
DrawerDescriptionProps
DrawerBodyProps
DrawerFooterProps
DrawerCloseProps
DrawerBranchProps

Content prop	Values	Default
`placement`	`start`, `end`, `top`, `bottom`	`end`
`size`	`sm`, `md`, `lg`, `full`	`md`

Root and all behavior parts inherit Atom modal/drawer props. Header, Body, and Footer accept native div attributes and data-slot.

Shared responsibility

Accessibility

Atom owns modal semantics, focus containment/return, Escape and outside dismissal. Supply a Title and, when useful, Description. Keep an accessible Close action and use Branch only for externally portalled content that belongs to the same modal interaction.

Responsive behavior

Drawer constrains its dimensions to the viewport and uses safe-area tokens. The application chooses breakpoints and whether a Drawer becomes another pattern. Logical placement supports RTL.

Stable visual contract

Styling and tokens

Customization

Use placement/size and Atom modal props first, then public tokens and compound parts. Apply className/style to the owning part for scoped exceptions.

Tokens and CSS hooks

Stable classes and overridable data-slot values cover Trigger, Overlay, Content, Header, Title, Description, Body, Footer, Close, and Branch. Content reflects data-size; Atom reflects placement. Public tokens are --brick-drawer-inline-size-sm, --brick-drawer-inline-size-md, --brick-drawer-inline-size-lg, --brick-drawer-block-size-sm, --brick-drawer-block-size-md, --brick-drawer-block-size-lg, --brick-drawer-radius, --brick-drawer-shadow, --brick-drawer-space, --brick-drawer-safe-top, --brick-drawer-safe-right, --brick-drawer-safe-bottom, and --brick-drawer-safe-left.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground