Drawer

Right-side panel for long forms and configuration screens. Body has no default padding — wrap your content in a div if needed.

Examples

Settings drawer

The body already has built-in padding. Pass children directly — no extra wrapper needed.

const [open, setOpen] = useState(false);

<Drawer isOpen={open} onClose={() => setOpen(false)} title="Settings">
  <div className="space-y-4">
    <div className="space-y-2">
      <FormLabel>Display name</FormLabel>
      <Input defaultValue="Kactos" leftSlot={<User size={16} />} />
    </div>
    {/* ... */}
  </div>
</Drawer>

API Reference

Props of the Drawer component.

Prop	Type	Default	Description
`isOpen*`	`boolean`	—	—
`onClose*`	`() => void`	—	—
`title`	`string`	—	—
`header`	`ReactNode`	—	Custom header (overrides title).
`footer`	`ReactNode`	—	—
`width`	`string`	`'480px'`	—
`maxWidth`	`string`	`'90vw'`	—
`closeOnOverlayClick`	`boolean`	`false`	—