DraggableTags

Drag, stack & expand customizable tags

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 Hero sections with interactive keyword highlights Services or skills showcase Portfolio topic clouds Feature highlights for SaaS landing pages Onboarding screens Creative agency presentations Default Design Ships with 6 ready-to-use tags using a carefully curated color palette. How to Use Add the component to your Framer project Open the props panel and set your number of tags Customize each tag — content, colors, rotation, shadow Hit preview, drag and click to explore

Drag, stack & expand customizable tags