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.

Image Metadata Preview

Component that displays the metadata information of an image, uses useMeasure to get the size of the information box and move the image on the Y axis

Fluid Morph

Component that morphs a fluid shape into another fluid shape