Drawer

A panel that slides in from screen edges. Extends the Dialog pattern with slide animations and edge positioning.

Setup

import { Drawer } from '@fragments-sdk/ui';

Loading preview...

Prop	Type	Default	Description
`children`Required	`node`	Not set	Drawer content (use Drawer.Content, Drawer.Header, etc.)
`open`	`boolean`	Not set	Controlled open state
`defaultOpen`	`boolean`	`false`	Default open state (uncontrolled)
`onOpenChange`	`function`	Not set	Called when open state changes
`onOpenChangeComplete`	`function`	Not set	Called after open/close animation completes
`modal`	`union`	`true`	Whether to render as modal (blocks interaction with rest of page)
`swipeDirection`	`enumupdownleftright`	derived from `side` prop on Content	Swipe direction to dismiss.
`snapPoints`	`array`	Not set	Preset snap-point heights for bottom-sheet drawers
`disablePointerDismissal`	`boolean`	Not set	Disable outside-click dismissal

Default to right side for content editing and forms
Use left side for navigation drawers
Use bottom for mobile-style action sheets
Provide clear close affordance (X button or cancel)
Keep drawer content focused on a single task
Drawer.Trigger and Drawer.Close with asChild require a single valid React element child
Set Drawer.Content initialFocus={false} when custom focus management is needed

Accessibility