Drawer
Markdown for agentsEdge sheet for secondary flows: slides from any side (sm/md/lg), with Dialog-grade modal semantics (portal, focus trap, Escape, focus restoration).
npx slipstream-ui@latest add drawerPlayground (interactive)
Bottom sheet
Common on mobile — an action sheet from the bottom edge.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | required | Whether the drawer is visible (controlled). |
| onOpenChange | (open: boolean) => void | required | Close requests (✕, Escape, backdrop, your own triggers). |
| title | string | required | Accessible dialog name rendered as the header title. |
| description | string | — | Supporting line under the title (wired via aria-describedby). |
| side | 'left' | 'right' | 'top' | 'bottom' | 'right' | Edge the drawer slides from. |
| size | 'sm' | 'md' | 'lg' | 'md' | Extent along the side axis (width for sides, height for top/bottom). |
| closeOnBackdrop | boolean | true | Clicking the backdrop closes the drawer. |
| showClose | boolean | true | Hide the header ✕ (Escape and backdrop still close). |
| initialFocusRef | RefObject<HTMLElement | null> | — | Element focused on open (defaults to first focusable). |
Accessibility
- role=dialog + aria-modal, labelled by title, described by description; portals to body.
- Focus moves in on open, Tab/Shift+Tab are trapped, focus restores to the opener on close.
- Escape closes; backdrop click closes when closeOnBackdrop (default).
- Body scrolls internally — the page behind never moves.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.