Animated Tags

Component 8

About

Component that displays tags with an animation when they are added or removed from the list of selected tags

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Tags to your project and fits it to your theme.

Code

How Animated Tags is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { AnimatedTags } from "@/components/ui/animated-tags";
import { useState } from "react"
const initialTags = [
  "react",
  "tailwindcss",
  "javascript",
  "typescript",
  "nextjs",
]

export default function DemoOne() {
  const [selected, setSelected] = useState<string[]>([])
  return (
    <div>
      <AnimatedTags
        initialTags={initialTags}
        selectedTags={selected}
        onChange={setSelected}
      />
    </div>
  )
}