Skip to main content

Drawer

Drawer is a panel that slides in from an edge of the screen, like a filters panel or a mobile action sheet. It can snap to set heights, be dragged to close, and stack nested drawers.

Import

import { Drawer } from '@vortexlabs/vortex';
import type { DrawerProps } from '@vortexlabs/vortex';

Other links

Drawer.Root

Drawer.Root props
PropTypeDefaultAttributes
children
React.ReactNode
No default value
open
boolean
No default value
defaultOpen
boolean
false
onOpenChange
callback
No default value
dismissible
boolean
true
dragHandleOnly
boolean
false
backgroundInteraction
union
blocked
closeThreshold
number
0.25
scrollLockTimeout
number
500
onClose
callback
No default value
onDrag
callback
No default value
onRelease
callback
No default value
onAnimationEnd
callback
No default value
container
union
document.body
autoFocus
boolean
true
variant
union
dim
position
union
bottom
snapPoints
array
No default value
activeSnapPoint
union
No default value
onActiveSnapPointChange
callback
No default value
fadeFromIndex
number
No default value
snapToSequentialPoint
boolean
false
width
union
384px
grabber
boolean
false

Drawer.Portal

Drawer.Portal props
PropTypeDefaultAttributes
children
React.ReactNode
No default value
container
union
No default value

Drawer.Content

Drawer.Content props
PropTypeDefaultAttributes
children
React.ReactNode
No default value
className
union
No default value
style
union
No default value
attributes
object
No default value
ref
ref
No default value

Drawer.Handle

Drawer.Handle props
PropTypeDefaultAttributes
preventCycle
boolean
false
children
React.ReactNode
No default value
className
union
No default value
attributes
object
No default value
ref
ref
No default value

Drawer.Trigger

Drawer.Trigger props
PropTypeDefaultAttributes
children
function
No default value

Drawer.Close

Drawer.Close props
PropTypeDefaultAttributes
children
function
No default value

Drawer.NestedRoot

Drawer.NestedRoot props
PropTypeDefaultAttributes
children
React.ReactNode
No default value
open
boolean
No default value
defaultOpen
boolean
false
onOpenChange
callback
No default value
dismissible
boolean
true
dragHandleOnly
boolean
false
backgroundInteraction
union
blocked
closeThreshold
number
0.25
scrollLockTimeout
number
500
onClose
callback
No default value
onDrag
callback
No default value
onRelease
callback
No default value
onAnimationEnd
callback
No default value
container
union
document.body
autoFocus
boolean
true
variant
union
dim
position
union
bottom
snapPoints
array
No default value
activeSnapPoint
union
No default value
onActiveSnapPointChange
callback
No default value
fadeFromIndex
number
No default value
snapToSequentialPoint
boolean
false
width
union
384px
grabber
boolean
false