Drawer

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

Preview

Open Sandbox

Anatomy


import { Drawer } from '@wire-ui/react'
 
<Drawer.Root open={open} onOpenChange={setOpen}>
  <Drawer.Portal>
    <Drawer.Overlay>
      <Drawer.Content>
        <Drawer.Header>
          <h2>Title</h2>
          <Drawer.Close>✕</Drawer.Close>
        </Drawer.Header>
        <p>Drawer body</p>
      </Drawer.Content>
    </Drawer.Overlay>
  </Drawer.Portal>
</Drawer.Root>

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