Browse components
Quick Actions DrawerFree
Top sheet with a compact grid of common actions.
Add to your project
Checking access...
Works with your AI tools
Claude*
Codex*
Lovable
Base44
Figma Make
Replit*
Cursor*
v0* Compatible with most projects that use the default React/Next.js framework.
Built With
React
Tailwind CSSBase UIProps
| Prop | Type | Description |
|---|---|---|
side | 'top' | 'right' | 'bottom' | 'left' | Drawer placement. Default: bottom. |
modal | boolean | 'trap-focus' | Whether the drawer blocks the page. Default: true. |
open | boolean | Controlled open state. |
defaultOpen | boolean | Initial uncontrolled open state. |
onOpenChange | (open: boolean) => void | Fired when the open state changes. |
showHandle | boolean | Show the pointer-draggable handle. Default: true for top and bottom drawers. |
More Drawer Components
Bottom sheet with filter chips, reset, and apply actions.
Bottom sheet for event details and RSVP actions.
Left-side menu for compact navigation on smaller screens.
Right-side panel for quick settings and saved preferences.