Drawer

Displays content in a panel that slides in from the edge of the screen.

Configurations

Supported configurations for this component.

2 examples

Right

Left

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
openreq	`boolean`	-	Whether the drawer is open.
onOpenChange	`(next: boolean) => void`	-	Handler called with the next open state when the drawer requests to close (ESC or backdrop click).
side	`'left'\|'right'`	'right'	Screen edge the panel slides in from.
size	`number\|string`	420	Panel width. Number → px, string passed through.
children	`React.ReactNode`	-	Panel content, typically the Drawer compound parts (Header, Body, Footer).
className	`string`	-	Extra classes merged onto the panel element.
style	`React.CSSProperties`	-	Inline styles merged onto the panel element.

Displays a status message in the flow of the page, at a severity from note to fault.

Represents a person as a square image tile that falls back to their initials.

Displays the state a row or cell reports, such as online, queued, or fault.