A full-featured drawer component built on Radix UI's Dialog primitive, providing animated slide-in panels from any viewport edge with support for drag-to-resize, size persistence, flush/floating layout modes, and a unified overlay backdrop.
## Key Components
| Export | Type | Description |
|---|---|---|
| `Drawer` | Component | Root dialog container (re-export of `DialogPrimitive.Root`) |
| `DrawerTrigger` | Component | Button/element that opens the drawer |
| `DrawerClose` | Component | Button/element that closes the drawer |
| `DrawerPortal` | Component | Renders drawer outside the DOM tree |
| `DrawerOverlay` | Component | Dimmed full-screen backdrop (`bg-ods-overlay`) |
| `DrawerContent` | Component | Main panel with side, flush, and resize props |
| `DrawerResizeHandle` | Component (internal) | Drag handle with pointer capture and keyboard support |
| `useResizableSize` | Hook (internal) | Manages clamped size state with `localStorage` persistence |
| `drawerVariants` | CVA variants | Wrapper positioning by `side` and `flush` |
| `drawerPanelVariants` | CVA variants | Panel chrome (rounded, border, padding) by `side` and `flush` |
### `DrawerContent` Props
| Prop | Type | Default | Description |
|---|---|---|---|
| `side` | `"right" \| "left" \| "top" \| "bottom"` | `"right"` | Slide direction |
| `flush` | `boolean` | `false` | Full-bleed on mobile; floating card on desktop |
| `resizable` | `boolean` | `false` | Enables drag-to-resize handle |
| `minSize` | `number` | — | Minimum panel size in px |
| `maxSize` | `number` | — | Maximum panel size in px (clamped to viewport) |
| `defaultSize` | `number` | — | Initial size when no stored value exists |
| `storageKey` | `string` | — | `localStorage` key for size persistence |
## Usage Example
```typescript
import {
Drawer,
DrawerTrigger,
DrawerContent,
DrawerClose,
} from "@openframe/ui/components/drawer"
// Basic drawer from the right
export function SettingsDrawer() {
return (
Settings
Panel content here.
)
}
// Resizable flush drawer with persisted width
export function ChatDrawer() {
return (
{/* Consumer owns full internal layout */}
)
}
```
## Resize Handle Keyboard Shortcuts
| Key | Action |
|---|---|
| `ArrowLeft` / `ArrowRight` | Resize by 16px (horizontal panels) |
| `ArrowUp` / `ArrowDown` | Resize by 16px (vertical panels) |
| `Shift` + Arrow | Resize by 40px |
| `Home` | Snap to `minSize` |
| `End` | Snap to `maxSize` |
## Source
[`drawer.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/drawer.tsx)