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	Default
initialTags?	string[]	-
selectedTags?	string[]	-
onChange?	(selected: string[]) => void	-
className?	string	-

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

Interactive Image Selector

Select images by clicking on them, delete selected images using the trash icon, and reset the gallery with the refresh button. Inspired by the smooth and intuitive photo gallery experience of iPhones, this interface features seamless animations for an engaging user experience.