Animated Tags

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

Open in v0~0.8 kB

Last updated: March 18, 2026

Selected Tags

react
typescript
tailwindcss
nextjs
framer-motion
shadcn

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

Animated OTP Input

Animated React OTP input component with auto-advance, backspace support, focus animations, and validation state transitions.

App Download Stack

Animated React app download component with iOS and Android store badges, entrance animations, and flexible CTA layouts.

On this page

Installation
Features
Accessibility
Reduced Motion
Props

Created by

Edu Calvo's avatar
Edu Calvo

Powered by

motion.dev
lucide.dev