Animated Tags

Animated React tag components with smooth add, remove, and hover effects powered by Motion for interactive filtering and labeling.

Installation

npx smoothui-cli add animated-tags

Features

• Smooth tag animations
• Interactive hover effects
• Customizable tag styling
• Built with Framer Motion
• Responsive layout
• Add/remove animations

Accessibility

Reduced Motion

This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, tag add/remove slide and blur animations are disabled, and tags appear/disappear instantly.

Props

Created by

Edu Calvo

Powered by

motion.dev

lucide.dev