Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA drawer with spring physics. Drag the handle to snap between heights or flick it closed, or slide it in from the left or right, on Radix Dialog for focus trapping and scroll lock.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | Controlled open state. |
defaultOpen | boolean | false | Initial open state when uncontrolled. |
onOpenChange | (open: boolean) => void | - | Called when the drawer opens or closes. |
side | "bottom" | "left" | "right" | "bottom" | Edge the drawer comes from. Only the bottom drawer has snap points. |
snapPoints | number[] | [1] | Heights the bottom drawer can rest at, as fractions of the screen, smallest first. |
defaultSnap | number | 0 | Index of the snap point the drawer opens at. |
snap | number | - | Controlled snap index. |
onSnapChange | (index: number) => void | - | Called when the drawer settles at another snap point. |
| Prop | Type | Default | Description |
|---|---|---|---|
showCloseButton | boolean | true | Show the close button in the corner. |
closeLabel | string | "Close" | Accessible name of the close button. |
handleLabel | string | "Resize drawer" | Name of the resize handle (bottom drawer with snap points). |
maxWidth | string | "42rem" (bottom), "min(24rem, 90vw)" (side) | Largest width of a bottom drawer, or the width of a side drawer. |
SpringDrawerTrigger, SpringDrawerClose, SpringDrawerTitle and SpringDrawerDescription wrap their Radix Dialog parts. SpringDrawerHeader, SpringDrawerBody and SpringDrawerFooter are styled <div>s; the body scrolls.