---
title: "DraggableTags — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Yumenoie Studio · Sections. Drag, stack & expand customizable tags"
canonical: "https://framer.elliotli.dev/component/draggabletags"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/DraggableTags

# DraggableTags

Drag, stack & expand customizable tags

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

![DraggableTags preview image 1](https://framer.elliotli.dev/og/component/draggabletags/0f7748dc97e2c3b3/1600x1200.jpg)

## Summary

Drag, stack & expand customizable tags

## Description

## Draggable Tags

**Draggable Tags** transforms a simple concept into a complete interactive system. Colorful floating tags that users can drag, stack, and explore — each one hiding additional content behind a smooth accordion reveal.

## Features

-   **Entry animation** — tags fly in and stack automatically on load with spring physics and staggered delays
    
-   **Freely draggable** — each tag moves independently with smooth mouse and touch support
    
-   **Smart layering** — dragged tag always comes to the front automatically
    
-   **Click to expand** — tap any tag to reveal a description and link via smooth accordion animation
    
-   **Full per-tag customization** — every tag has its own independent controls
    
-   **Instant prop updates** — all changes reflect live on the Framer canvas
    
-   **Touch support** — works seamlessly on mobile and tablet
    

## Customizable Props

### Component Level

-   Number of tags _(1 to 10)_
    
-   Background color
    
-   Ambient glow + opacity
    
-   Drag scale
    
-   Animate on load + animation style _(Fly In / Fade Up / Instant)_
    

### Per Tag

-   **Content:** title, icon, description, link text, link URL, link toggle
    
-   **Style:** background color, text color, font size, font weight, border radius, rotation, padding X/Y
    
-   **Shadow:** offset X/Y, blur, opacity
    

## Use Cases

1.  Hero sections with interactive keyword highlights
    
2.  Services or skills showcase
    
3.  Portfolio topic clouds
    
4.  Feature highlights for SaaS landing pages
    
5.  Onboarding screens
    
6.  Creative agency presentations
    

## Default Design

Ships with **6 ready-to-use tags** using a carefully curated color palette.

## How to Use

1.  Add the component to your Framer project
    
2.  Open the props panel and set your number of tags
    
3.  Customize each tag — content, colors, rotation, shadow
    
4.  Hit preview, drag and click to explore
    

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

-   All · #519

## Details

- **Author**: Yumenoie Studio
- **Price**: $5.00
- **Published**: 2026-03-30
- **Updated**: 2026-05-12
- **Added**: 2026-03-18
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove