Overlay

Drawer

A slide-in panel from the edge of the viewport. Useful for sidebars, filter panels, and detail views.

LlmDrawer

Demo

<LlmButton onClick={() => setOpen(true)}>Open Drawer</LlmButton>
<LlmDrawer open={open} onOpenChange={setOpen} position="right">
  <LlmDrawerHeader>Settings</LlmDrawerHeader>
  <LlmDrawerContent>
    <LlmInput placeholder="Search..." />
  </LlmDrawerContent>
  <LlmDrawerFooter>
    <LlmButton onClick={() => setOpen(false)}>Close</LlmButton>
  </LlmDrawerFooter>
</LlmDrawer>

API

Prop	Type	Default	Description
`open`	`boolean`	`false`	Controls drawer visibility
`onOpenChange`	`(open: boolean) => void`	`—`	Called when open state changes
`position`	`'left' \| 'right' \| 'top' \| 'bottom'`	`'right'`	Which edge the drawer slides from
`size`	`'sm' \| 'md' \| 'lg' \| 'full'`	`'md'`	Width (or height for top/bottom)
`closeOnBackdrop`	`boolean`	`true`	Close when clicking the backdrop

Import

import { LlmDrawer, LlmDrawerHeader, LlmDrawerContent, LlmDrawerFooter } from '@atelier-ui/react';