Drawer

Side-panel overlay. Same structure as Modal. Closes on overlay click or Escape key. Includes an optional Drawer.Header sub-component.

Features

Portal rendering outside the document tree.

Closes on Escape key and overlay click.

Can be controlled or uncontrolled.

Header sub-component with close button.

data-state reflects open/closed state.

Example

Anatomy


import { useState } from 'react'
import { Drawer } from '@wire-ui/react'
 
const [open, setOpen] = useState(false)
 
<button onClick={() => setOpen(true)}>
Open Drawer
</button>
 
<Drawer.Root open={open} onOpenChange={setOpen}>
<Drawer.Portal>
<Drawer.Overlay>
  <Drawer.Content>
    <Drawer.Header>
      <span>Drawer Title</span>
      <Drawer.Close>✕</Drawer.Close>
    </Drawer.Header>
    <div>
      <p>This is a simple drawer with some content.</p>
    </div>
  </Drawer.Content>
</Drawer.Overlay>
</Drawer.Portal>
</Drawer.Root>

Styling

Drawer sets data-state on Overlay and Content. Use it to animate slide-in/out and overlay fade.


<Drawer.Overlay className="
  bg-black/50
  data-[state=closed]:opacity-0
  transition-opacity
" />
 
<Drawer.Content className="
  translate-x-full
  data-[state=open]:translate-x-0
  transition-transform
" />

Using data attributes

Both Overlay and Content receive data-state with values "open" or "closed".


/* Slide in from right */
[data-state="open"]   { transform: translateX(0); }
[data-state="closed"] { transform: translateX(100%); }
 
/* Overlay fade */
[data-state="open"]   { opacity: 1; }
[data-state="closed"] { opacity: 0; }

Root props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state
`defaultOpen`	`boolean`	`false`	Initial state for uncontrolled use
`onOpenChange`	`(open: boolean) => void`	—	Called when open state changes

Data attributes

data-state is set on both Drawer.Overlay and Drawer.Content:

Value	When
`"open"`	Drawer is open
`"closed"`	Drawer is closed

Keyboard Interactions

Key	Description
`Escape`	Closes the drawer.
`Tab`	Moves focus to the next focusable element inside the drawer.
`Shift+Tab`	Moves focus to the previous focusable element inside the drawer.