Drawer
Slide-in panel on any side (left, right, top, or bottom), with focus trap and a size prop. Backdrop, ESC to close, body scroll lock, and the bracket motif. Portaled.
Trigger
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/andromeda-drawerProps
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| openreq | boolean | - | Whether the drawer is open. |
| onOpenChange | (next: boolean) => void | - | Handler called with the next open state when the drawer requests to close (ESC or backdrop click). |
| side | 'left'|'right'|'top'|'bottom' | 'right' | Screen edge the panel slides in from. |
| size | number|string | 420 | Width (left/right) or height (top/bottom). Number → px, string passed through. |
| children | React.ReactNode | - | Panel content, typically the Drawer compound parts (Header, Body, Footer). |
| className | string | - | Extra classes merged onto the panel element. |
| style | React.CSSProperties | - | Inline styles merged onto the panel element. |
AI Canvas