Drawer Examples

Default Drawer

The most basic setup for a drawer.

Scrollable Drawer

A scrollable drawer. The behavior here mimics Apple's Sheet component.

Snap Drawer

A way to define a set of points that the drawer can snap to during a drag operation. This means that a drawer no longer only has to be open or closed, but can also be partially open.

Snap To Sequential Point

Disable velocity-based snapping by using snapToSequentialPoint prop. This means that a snap point won't be skipped even if the velocity is high enough. Useful if each snap point in a drawer is equally important.

Custom Fade Index

Use the fadeFromIndex prop to specify the snap point index from which the drawer should start fading. It defaults to the last point, but in the demo below we change it to the second point.

Non Modal

Set the modal prop to false to allow interaction with the background while the drawer is open.

Non Dismissible

Set the dismissible prop to false to prevent the user from closing the drawer by clicking outside of it, pressing the escape key, or dragging it down.

Controlled Drawer

You can use the open prop to programmatically open or close the drawer. You can also pass the onOpenChange prop which will be called when the open state of the dialog changes, it's useful if you want to react to esc/outside clicks when controlled.

Nested Drawers

Nest drawers inside each other.

Side Drawer

Set the direction prop to "right" or "left" to change the position of the drawer. Use the --initial-transform CSS variable to adjust the animation, useful when the drawer does not touch the edge of the screen (like in this case).