Drawer - Keep React

The Drawer component provides a flexible and customizable way to create drawers that can slide in from different directions (left, right, top, or bottom) within your React application. It supports features like animation, keyboard accessibility (ESC key to close), and clicking outside the drawer to close it.

Default Drawer#

The Default Drawer component showcases a simple content inside the drawer.

Drawer Position#

You can position the drawer in a specific direction, such as left, right, top, or bottom.

API Reference#

Here is a list of the props that you can pass to the drawer component:

Property	Description	Type	Default
open	Drawer show or not?	string	false
onOpenChange	setState function	Function	None
showCloseIcon	Drawer close button show or not?	boolean	true

Content API Reference#

Here is a list of the props that you can pass to the drawer content component:

Property	Description	Type	Default
position	Drawer position	left top right bottom	bottom

Property

Description

Type

Default

position

Drawer position

left

top

right

bottom

bottom

Reference#

Our drawer component is built using the @radix-ui/react-dialog package. For more information , follow the documentation @radix-ui/react-dialog.

Edit this page Empty