Drawer

Drawer is a surface that slides in from the edge of the screen, holding navigation, filters or secondary content.

There are two kinds: overlay drawers (modal, with a backdrop, built on Radix Dialog: Drawer + DrawerSurface, or OverlayDrawer) and InlineDrawer, which sits in the layout and pushes the content next to it. Positions are start / end / bottom; sizes are small 320, medium 592, large 940 or full. Inside, use DrawerHeader, DrawerHeaderTitle, DrawerBody (scrolls) and DrawerFooter.

Navigation

The main content resizes with the drawer; nothing covers it.

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport {  Drawer, DrawerTrigger, DrawerClose, DrawerSurface, OverlayDrawer, InlineDrawer,  DrawerHeader, DrawerHeaderTitle, DrawerBody, DrawerFooter,} from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Overlay drawer

Modal, with a backdrop; the primary button comes before Cancel in the footer.

Position & size

OverlayDrawer combines Drawer + DrawerSurface; position start / end / bottom.

Usage

Use an overlay drawer for temporary tasks (filters, record details) and an inline drawer for navigation or panels that should stay visible.
Always include a title and a clear way to close the drawer (X button, Cancel, Esc).
Pick a size that fits the content; use full only on small screens.

Don't

Don't open a drawer on top of another drawer.
Don't use a drawer for short confirmations. Use Dialog.
Don't put more than 2–3 actions in the footer.

Props

Prop · Type	Default	Description
DrawerSurface / OverlayDrawer.position"start" \| "end" \| "bottom"	Default: "end"	Edge the drawer slides in from.
DrawerSurface / OverlayDrawer.size"small" \| "medium" \| "large" \| "full"	Default: "small"	320 / 592 / 940px / full screen (width, or height when bottom).
DrawerSurface.modalType"modal" \| "alert"	Default: "modal"	alert: doesn't close on a backdrop click or Esc.
DrawerSurface.material"glass" \| "glass-clear"	Default: —	Yugen Labs — a glass surface.
OverlayDrawer.open / onOpenChangeboolean / (open) => void	Default: —	Controls the open state (the Drawer root accepts these props too).
InlineDrawer.open / position / sizeboolean / DrawerPosition / DrawerSize	Default: false / "start" / "small"	Drawer inside the layout; animates its width.
InlineDrawer.separatorboolean	Default: false	stroke-2 divider between the drawer and the content.
DrawerHeaderTitle.actionReactNode	Default: —	Element to the right of the title (usually a close button).