Drawer

A panel that slides in from the edge of the screen. Useful for navigation, forms, or supplementary content without leaving the current page. Closes on Escape or overlay click.

Basic Usage

Click the button to open a drawer from the right.

Sides

The drawer can slide in from the left, right, top, or bottom.

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Whether the drawer is open.
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.
`side`	`"left" \| "right" \| "top" \| "bottom"`	`"right"`	The side of the screen the drawer slides in from.
`children`	`ReactNode`	—	Content rendered inside the drawer panel.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

open

boolean

Whether the drawer is open.

onOpenChange

(open: boolean) => void

Called when the open state changes.

side"right"

"left" | "right" | "top" | "bottom"

The side of the screen the drawer slides in from.

children

ReactNode

Content rendered inside the drawer panel.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}