Drawer
A glass sheet that slides in from any edge and swipes back out, its side read from the direction it dismisses in.
01Preview
0102Installation
npx shadcn@latest add https://aiellie.app/r/drawer.json03API reference
16From the Base UI documentation
Groups all parts of the drawer. Doesn't render its own HTML element.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultOpen | boolean | false | Whether the drawer is initially open. To render a controlled drawer, use the open prop instead. |
| open | boolean | - | Whether the drawer is currently open. |
| onOpenChange | ((open: boolean, eventDetails: Drawer.Root.ChangeEventDetails) => void) | - | Event handler called when the drawer is opened or closed. |
| snapPoints | DrawerSnapPoint[] | - | Snap points used to position the drawer. Use numbers between 0 and 1 to represent fractions of the viewport height, numbers greater than 1 as pixel values, or strings in px/rem units (for example, '148px' or '30rem'). |
| defaultSnapPoint | DrawerSnapPoint | null | - | The initial snap point value when uncontrolled. |
| snapPoint | DrawerSnapPoint | null | - | The currently active snap point. Use with onSnapPointChange to control the snap point. |
| onSnapPointChange | ((snapPoint: DrawerSnapPoint | null, eventDetails: Drawer.Root.SnapPointChangeEventDetails) => void) | - | Callback fired when the snap point changes. |
| actionsRef | React.RefObject<Drawer.Root.Actions | null> | - | A ref to imperative actions. unmount: Manually unmounts the drawer. Call this after any externally controlled closing animation finishes.close: Closes the drawer imperatively when called. |
| defaultTriggerId | string | null | - | ID of the trigger that the drawer is associated with. This is useful in conjunction with the defaultOpen prop to create an initially open drawer. |
| disablePointerDismissal | boolean | false | Whether to prevent the drawer from closing on outside presses. For non-modal drawers, this also prevents the drawer from closing when focus moves outside of it. |
| handle | Drawer.Handle<Payload> | - | A handle to associate the drawer with a trigger. If specified, allows detached triggers to control the drawer's open state. Can be created with the Drawer.createHandle() method. |
| modal | boolean | 'trap-focus' | true | Determines if the drawer enters a modal state when open. true: user interaction is limited to just the drawer: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.false: user interaction with the rest of the document is allowed.'trap-focus': focus is trapped inside the drawer, but document page scroll is not locked and pointer interactions outside of it remain enabled. |
| onOpenChangeComplete | ((open: boolean) => void) | - | Event handler called after any animations complete when the drawer is opened or closed. |
| snapToSequentialPoints | boolean | false | Disables velocity-based snap skipping so drag distance determines the next snap point. |
| swipeDirection | DrawerSwipeDirection | 'down' | The swipe direction used to dismiss the drawer. |
| triggerId | string | null | - | ID of the trigger that the drawer is associated with. This is useful in conjunction with the open prop to create a controlled drawer. There's no need to specify this prop when the drawer is uncontrolled (that is, when the open prop is not set). |
| children | React.ReactNode | PayloadChildRenderFunction<Payload> | - | The content of the drawer. |