Drawer

Slide-out panels. Free, MIT · Overlays and notifications › Dialogs and panels

Installation

npx valyro-cli@latest add drawer

npx shadcn@latest add https://valyro.xyz/r/drawer.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Drawer } from 'valyro-ui';

Props

Prop	Type	Default
`open`	`boolean`		Controlled `open`; use with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Initial `open` when uncontrolled.
`onOpenChange`	`(open: boolean) => void`		Called with the new `open` when it changes.
`placement`	`'right' \| 'left' \| 'start' \| 'end' \| 'bottom'`	`'right'`	`bottom` is a sheet with a grab handle that can be dragged down to dismiss. `start` / `end` mirror under dir="rtl" (a navigation drawer), `left` / `right` stay on that edge.
`size`	`'sm' \| 'md' \| 'lg' \| 'full'`	`'md'`	Width for side drawers, maximum height for bottom sheets.
`title`	`ReactNode`		Heading; becomes the drawer's accessible name.
`description`	`ReactNode`		Supporting text under the title; becomes the drawer's accessible description.
`footer`	`ReactNode`		Sticky action bar under the scrollable body.
`showClose`	`boolean`	`true`	Show the × button (default true).
`closeLabel`	`string`	`'Close'`	Accessible name of the × button.
`children`	`ReactNode`		Body content; it scrolls between the header and the footer when it overflows. In the compound form, a `Drawer.Trigger` and a `Drawer.Content` (with `Drawer.Header`, `.Title`, `.Description`, `.Body`, `.Footer`, `.Close`).
`closeOnOverlayClick`	`boolean`
`closeOnEscape`	`boolean`
`initialFocusRef`	`RefObject<HTMLElement \| null>`
`returnFocusRef`	`RefObject<HTMLElement \| null>`		Where focus goes on close when the element that opened the modal is no longer on the page (a deleted row's menu). Without it, focus moves to the first Tab stop near where that element was.
`layerClassName`	`string`		Class for the full-screen layer (positioning wrapper).
`animation`	`'default' \| 'spring'`		`spring`: the panel springs in (centred panels drop in from `from` with a slight tilt, edge panels slide in critically damped). `default`: the theme's own enter and exit.

Compound parts

Drawer.Trigger (DrawerTrigger), Drawer.Content (DrawerContent), Drawer.Header (DrawerHeader), Drawer.Title (DrawerTitle), Drawer.Description (DrawerDescription), Drawer.Body (DrawerBody), Drawer.Footer (DrawerFooter), Drawer.Close (DrawerClose)

Related components

Dialog — Modal dialogs
Confirm Dialog — Action confirmation
Bottom Sheet — iOS-style bottom sheet: snap points, swipe, peek mode
Alert — Inline alerts
Toast — Pop-up notifications
Notification Center — Notification inbox
Loading Overlay — Loading screen
Popover — Floating content
Hover Card — Card on hover
Tour — Onboarding tour: element spotlight, steps, progress and resume

Previous: Confirm Dialog · Next: Bottom Sheet · All Overlays and notifications