Drawer Kit 360

Drawer Kit 360

About Drawer Kit 360

Drawer Kit 360 — A True 4-Direction Drawer System for Framer

Transform your UI with a clean, flexible drawer that slides from Top, Bottom, Left, or Right.Perfect for navigation, settings, filters, menus, carts, and mobile-style bottom sheets — all in one component.

No modal. No popup. No clutter.Just a pure drawer experience, customizable and production-ready.

⭐ Key Features

  • Slide from all four directions

  • Smooth, performance-tuned animations

  • Mobile + Desktop friendly

  • Adjustable overlay opacity + color

  • Optional handle + optional close button

  • Drag to close (like real drawers)

  • Bottom drawer height control (sheet-style)

  • Fully responsive layout

⚡ Use Cases

  • Navigation menus

  • Side panels

  • Settings & preferences

  • Filters & product drawers

  • Bottom sheet UI

  • Off-canvas menus

  • Notification pull-down

  • Full-width mobile drawers

One component. Infinite drawer patterns.

🔧 Customizable Controls

  • Direction: Top / Bottom / Left / Right

  • Overlay color & opacity

  • Drawer handle visibility

  • Close button toggle + styling

  • Drawer width / height

  • Drag gestures + animation damping

🛠 Setup

  1. Drop the drawer component into your canvas

  2. Choose the slide direction (Top / Bottom / Left / Right)

  3. Attach a trigger component to open the drawer

  4. Attach your content component inside the drawer panel

  5. Publish — you're ready to use it

No external code. No setup complexity.Just open → slide → close.