Drawer

Bottom sheet with drag-to-close, spring animations, and full accessibility via Radix UI.

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state
`onOpenChange`	`(open: boolean) => void`	—	Called when open state changes
`onClose`	`() => void`	—	Called when the drawer closes
`children`	`ReactNode`	—	Drawer content
`trigger`	`ReactNode`	—	Optional trigger element
`height`	`string \| number`	`'50vh'`	Drawer height (CSS value or number in px)
`dragToClose`	`boolean`	`true`	Whether dragging down dismisses the drawer
`dragThreshold`	`number`	`100`	Drag distance in px required to trigger close
`closeOnOverlayClick`	`boolean`	`true`	Whether clicking overlay closes the drawer
`showHandle`	`boolean`	`true`	Whether to show the drag handle indicator
`overlayColor`	`string`	`rgba(0,0,0,0.5)`	Overlay background color
`backgroundColor`	`string`	`#ffffff`	Drawer background color
`borderRadius`	`number`	`16`	Top border radius
`padding`	`string \| number`	`0`	Drawer panel padding
`className`	`string`	—	Panel className
`style`	`CSSProperties`	—	Panel style

Ref Handle

Method	Description
`open()`	Open the drawer
`close()`	Close the drawer

Example


const drawerRef = useRef<DrawerHandle>(null)
 
<Drawer ref={drawerRef} height="60vh" showHandle>
  <div style={{ padding: 24 }}>
    <h2>Filters</h2>
    <p>Drawer content here</p>
  </div>
</Drawer>
 
<button onClick={() => drawerRef.current?.open()}>Show filters</button>