# Drawer ## Summary `Drawer` is a [compound component](https://vega-ui.dev/docs/glossary/#compound-component) for edge-mounted overlays that preserve more page context than a centered modal. `DrawerContent` renders a native `` opened with `showModal()`, so the browser puts it in the top layer, makes the rest of the page inert, and draws the backdrop. It is the side-panel member of the overlay family and usually fits secondary editing, filters, and contextual workspace flows. `DrawerClose` turns your own button into a close button; headings and layout are plain markup you compose yourself. ## Imports ```tsx import { Drawer, DrawerTrigger, DrawerContent, DrawerClose, type DrawerProps, } from '@vega-ui/react'; ``` ## Exported Types - `DrawerProps` - `DrawerTriggerProps` - `DrawerContentProps` - `DrawerCloseProps` ## Minimal Composition ```tsx import { useId, type CSSProperties } from 'react'; import { Button, Drawer, DrawerClose, DrawerContent, DrawerTrigger, Heading, Icon, IconButton, Text, } from '@vega-ui/react'; import { XIcon } from '@vega-ui/icons'; export default function MinimalComposition() { const titleId = useId(); return (
Keyboard shortcuts
Press ⌘K to search, C to create a task and ? to open this panel again. ); } ``` ## Required Parts - `Drawer`: root state and context provider - `DrawerTrigger`: open action - `DrawerContent`: edge-mounted modal panel ## Optional Parts - `DrawerClose`: closes the drawer when clicked; wraps your own button with `asChild` ## Your Own Markup - a heading whose `id` is passed to `DrawerContent` as `aria-labelledby` (or `aria-label` on `DrawerContent`); the drawer must have a name - action buttons that answer the drawer (Cancel, Confirm) inside a `
` ## Composition Order Typical composition: 1. `Drawer` 2. `DrawerTrigger` 3. `DrawerContent` with your heading, an optional `DrawerClose`, body, and a `` for action buttons ## Variants - Position is the primary source-level variant for drawers. - Common product variants are navigation drawer, filter drawer, and detail drawer. - Dimmed and transparent backdrops (`overlay` on `DrawerContent`); the drawer stays modal either way. ## Migrating From 2.x `DrawerHeader`, `DrawerTitle`, and `DrawerCloseButton` were removed: the library keeps only parts that carry behavior plain markup cannot express. `DrawerClose` is the behavior-only replacement for the close button. - `DrawerHeader` → your own layout element, for example a flex row - `DrawerTitle` → a `Heading` with an `id`, referenced by `aria-labelledby` on `DrawerContent` - `DrawerCloseButton` → `DrawerClose asChild` around your own button, for example an `IconButton` with an `aria-label` - `useDrawerContext()` no longer returns `contentId` or `titleId`, and `DrawerTrigger` no longer sets `aria-controls` ## Edge Cases - Confirm position-specific layout and animation. - Narrow viewports need extra testing for content overflow. - Use a drawer only when preserving page context matters more than full modal isolation. - If the content becomes a long multi-step flow, a routed page or dedicated screen may be clearer than an ever-growing drawer. ## Common Mistakes - Leaving `DrawerContent` without `aria-labelledby` or `aria-label`. - Using a drawer when a dialog would be simpler and more focused. - Letting drawer content become a full page inside a cramped side panel. - Letting action buttons scroll out of view in long drawer content. ## Examples ### Basic #### Basic: order inspector A drawer that shows details of one record next to the page. The heading names the drawer through `aria-labelledby`, and the round close button sits in the top end corner; a backdrop click, `Escape` or a touch swipe toward the edge also closes it. ```tsx import { useId, type CSSProperties } from 'react'; import { Badge, Button, Drawer, DrawerClose, DrawerContent, DrawerTrigger, Heading, Icon, IconButton, Text, } from '@vega-ui/react'; import { XIcon } from '@vega-ui/icons'; const details = [ { term: 'Customer', value: 'Kestrel Robotics' }, { term: 'Placed', value: 'Nov 2, 2026, 14:08' }, { term: 'Items', value: '3 × Sensor kit, 1 × Charging dock' }, { term: 'Total', value: '$1,284.00' }, { term: 'Ship to', value: '41 Harbour Road, Bristol BS1 5TY' }, ]; export default function SideInspector() { const titleId = useId(); return (
Order #10482
Awaiting payment
{details.map((detail) => (
{detail.term}
{detail.value}
))}
); } ``` ### Controlled/Stateful #### Controlled/Stateful: one drawer for a list with previous and next The parent owns `open` and the selected ticket, so any row opens the same drawer and the arrows inside it move through the list without closing it. `aria-current` marks the row that is shown. ```tsx import { useId, useState, type CSSProperties } from 'react'; import { Button, Drawer, DrawerClose, DrawerContent, Heading, Icon, IconButton, Text, } from '@vega-ui/react'; import { ChevronDownIcon, ChevronUpIcon, XIcon } from '@vega-ui/icons'; const tickets = [ { id: 'SUP-311', title: 'Export to CSV times out', requester: 'Maria Chen', priority: 'High' }, { id: 'SUP-312', title: 'Invoice shows the wrong VAT number', requester: 'Tom Okafor', priority: 'Medium' }, { id: 'SUP-313', title: 'Cannot invite members with a + in the email', requester: 'Lea Novak', priority: 'High' }, { id: 'SUP-314', title: 'Dark mode resets after sign in', requester: 'Sam Rivera', priority: 'Low' }, ]; export default function ControlledOpenState() { const titleId = useId(); const [open, setOpen] = useState(false); const [index, setIndex] = useState(0); const ticket = tickets[index]; const openTicket = (next: number) => { setIndex(next); setOpen(true); }; return (
{tickets.map((item, itemIndex) => ( ))}
{ticket.id} · {index + 1} of {tickets.length} {ticket.title}
Requested by {ticket.requester} · {ticket.priority} priority
setIndex(index - 1)}> setIndex(index + 1)}>
); } ``` ### Form/Integration #### Form/Integration: invite form with native validation A `` with `type="email" multiple required`: the browser validates the addresses, and a valid submit reads them with `FormData` in `onSubmit` and closes the drawer. The page shows the pending invites below the trigger. ```tsx import { useId, useState, type CSSProperties, type FormEvent } from 'react'; import { Button, Drawer, DrawerClose, DrawerContent, DrawerTrigger, Heading, HelperText, Icon, IconButton, Label, Text, TextArea, TextField, TextFieldInput, } from '@vega-ui/react'; import { XIcon } from '@vega-ui/icons'; export default function ShortFormFlow() { const titleId = useId(); const emailsId = useId(); const emailsHintId = useId(); const messageId = useId(); const [invited, setInvited] = useState([]); const onSubmit = (event: FormEvent) => { const data = new FormData(event.currentTarget); const emails = String(data.get('emails')).split(',').map((email) => email.trim()); setInvited([...invited, ...emails]); }; return (
Invite members
Separate several addresses with commas.