Skip to main content

Drawer

Drawer is an overlay that slides a panel in from an edge of the screen, such as a filters panel or a mobile action sheet.

Import

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

Allied components

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
Last snap point index.
snapToSequentialPoint
boolean
false
width
union
24rem
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
callback
No default value

Drawer.Close

Drawer.Close props
PropTypeDefaultAttributes
children
callback
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
Last snap point index.
snapToSequentialPoint
boolean
false
width
union
24rem
grabber
boolean
false