---
title: "Drawer Kit 360 — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Gurmant.dev · Interactive. Drawer Kit 360 — A True 4-Direction Drawer System for Framer Transform your UI with a clean, flexible drawer that slides from Top,…"
canonical: "https://framer.elliotli.dev/component/drawer-kit-360"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Drawer Kit 360

# Drawer Kit 360

[View on Framer](https://framer.com/marketplace/components/drawer-kit-360/?via=elliot-li)

![Drawer Kit 360 preview image 1](https://framer.elliotli.dev/og/component/drawer-kit-360/9d52659b7a3acbfa/1600x1200.jpg)

## Summary

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,…

## Description

## 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #2528

## Details

- **Author**: Gurmant.dev
- **Price**: $6.00
- **Published**: 2025-12-09
- **Updated**: 2026-01-09
- **Added**: 2025-11-27
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step