Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA side or edge drawer that follows a finger: drag it away to close, drag from the screen edge to open, with start and end edges that flip in right-to-left text.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for navigation menus, filters and detail panels that slide in from a side on a phone, where dragging to dismiss feels natural.
Do not use it as the only way to reach main destinations (use a Tab Bar) or for a panel that should stay open beside the page. Use a sidebar there.
| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
SwipeDrawer | edge | "start" | "end" | "top" | "bottom" | "start" | The edge it slides from; start and end follow the text direction. |
SwipeDrawer | open / defaultOpen / onOpenChange | - | - | As on the Radix dialog. |
SwipeDrawerContent | showCloseButton | boolean | true | Show the close button. |
SwipeDrawerEdge | onOpen | () => void | required | Called when a drag from the edge passes the threshold. |
SwipeDrawerEdge | threshold / edge | number / "start" | "end" | 48 / "start" | Drag distance in px and which edge. |
The component ships with a Testing Library test (swipe-drawer.test.tsx). jsdom has no touch or layout, so the test drives the component through its keyboard and pointer-free paths and checks roles, names and state.