Browse components
Filter Drawer
Bottom sheet with filter chips, reset, and apply actions.
Add to your project
1Connect the Uniquel MCP
Connect Uniquel to your coding agent before using the component ID.
Connect MCP2Copy the component ID
MCP ID
component:drawer/filter-drawerWorks 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 for event details and RSVP actions.
Left-side menu for compact navigation on smaller screens.
Right-side panel for quick settings and saved preferences.
Top sheet with a compact grid of common actions.