ComponentsAnimated Tags

Animated Tags

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

Selected Tags

react

tailwindcss

javascript

typescript

nextjs

Code

Install with shadcn Beta

Terminal

npx shadcn@latest add "https://smoothui.dev/r/animated-tags.json"

Or install the demo

Terminal

npx shadcn@latest add "https://smoothui.dev/r/animated-tags-demo.json"

How to use

Demo.tsx

"use client"

import React, { useState } from "react"

import AnimatedTags from "@/components/smoothui/ui/AnimatedTags"

const initialTags = [
  "react",
  "tailwindcss",
  "javascript",
  "typescript",
  "nextjs",
]

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

export default AnimatedTagsDemo

Props

Prop	Type	Description
initialTags?	string[]	Initial list of available tags.
selectedTags?	string[]	Controlled selected tags array.
onChange?	(selected: string[]) => void	Callback fired when the selected tags change.
className?	string	Optional additional class names for the root container.