Drawer

A panel that slides in from the edge of the screen.

When To Use

Use the Drawer component when you need to:

Provide quick access to content or actions without leaving the current page
Display additional information or forms in a side panel
Create a menu that slides in from the edge of the screen
Implement a mobile navigation pattern
Show contextual information related to the current view

Drawers are particularly useful for mobile interfaces or when you need to preserve context while accessing additional functionality.

Examples

Basic#

Different Sides#

Drawer side:

Form#

Responsive#

Props

Prop	Type	Default
`displayName`	`string`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`displayName`	`string`	-

Prop	Type	Default
`displayName`	`string`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Dialog

A window overlaid on the primary window that interrupts the user with important content.

Dropdown Menu

A vertically stacked menu that appears when triggered by a button.