'use client'; import { CircleX, Plus } from 'lucide-react'; import { AnimatePresence, motion, useReducedMotion } from 'motion/react'; import { useState } from 'react'; export interface AnimatedTagsProps { initialTags?: string[]; selectedTags?: string[]; onChange?: (selected: string[]) => void; className?: string; } const spring = { type: 'spring', bounce: 0, duration: 0.25, } as const; export default function AnimatedTags({ initialTags = [ 'react', 'tailwindcss', 'Shadcn', 'javascript', 'typescript', 'nextjs', 'framer-motion', ], selectedTags: controlledSelectedTags, onChange, className = '', }: AnimatedTagsProps) { const reduceMotion = useReducedMotion(); const [internalSelected, setInternalSelected] = useState([]); const selectedTags = controlledSelectedTags ?? internalSelected; const availableTags = initialTags.filter( (tag) => !selectedTags.includes(tag), ); const addTag = (tag: string) => { const next = [...selectedTags, tag]; onChange ? onChange(next) : setInternalSelected(next); }; const removeTag = (tag: string) => { const next = selectedTags.filter((t) => t !== tag); onChange ? onChange(next) : setInternalSelected(next); }; return (

Selected Tags

{selectedTags.map((tag) => ( removeTag(tag)} className="group border-primary/20 bg-primary text-primary-foreground flex cursor-pointer items-center gap-2 rounded-md border px-2 py-1 transition-opacity hover:opacity-90" initial={ reduceMotion ? false : { y: 20, opacity: 0, filter: 'blur(4px)' } } animate={ reduceMotion ? { opacity: 1 } : { y: 0, opacity: 1, filter: 'blur(0px)' } } exit={ reduceMotion ? { opacity: 0 } : { y: 20, opacity: 0, filter: 'blur(4px)' } } transition={reduceMotion ? { duration: 0 } : spring} > {tag} ))}

{availableTags.map((tag) => ( addTag(tag)} className="group border-border bg-muted text-foreground hover:bg-muted/80 flex cursor-pointer items-center gap-2 rounded-md border px-2 py-1 transition-colors" initial={ reduceMotion ? false : { y: -20, opacity: 0, filter: 'blur(4px)' } } animate={ reduceMotion ? { opacity: 1 } : { y: 0, opacity: 1, filter: 'blur(0px)' } } exit={ reduceMotion ? { opacity: 0 } : { y: -20, opacity: 0, filter: 'blur(4px)' } } transition={reduceMotion ? { duration: 0 } : spring} > {tag} ))}

); }

Animated Tags

Installation

Usage