ComponentsAnimated Tags
Animated Tags
Component that displays tags with an animation when they are added or removed from the list of selected tags
Code
1
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 | Default |
---|---|---|
initialTags? | string[] | - |
selectedTags? | string[] | - |
onChange? | (selected: string[]) => void | - |
className? | string | - |