Animated Tags
Animated React tag components with smooth add, remove, and hover effects powered by Motion for interactive filtering and labeling.
Selected Tags
react
typescript
tailwindcss
nextjs
framer-motion
shadcn
Installation
npx smoothui-cli add animated-tagsFeatures
- 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.