"use client" import * as React from "react" import { X } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { cn } from "@/lib/utils" type TagInputProps = { title?: string description?: string tags?: string[] placeholder?: string className?: string } const DEFAULT_TAGS = ["brutalist", "neon", "grid", "motion"] export default function TagInput({ title = "Tag / Chip input", description = "Use tags to classify content, filters, or product metadata.", tags = DEFAULT_TAGS, placeholder = "Add a tag", className, }: TagInputProps) { const [items, setItems] = React.useState(tags) const [value, setValue] = React.useState("") const addTag = () => { const next = value.trim() if (!next || items.includes(next)) return setItems((prev) => [...prev, next]) setValue("") } const removeTag = (tag: string) => { setItems((prev) => prev.filter((item) => item !== tag)) } const onKeyDown = (event: React.KeyboardEvent) => { if (event.key === "Enter" || event.key === ",") { event.preventDefault() addTag() } } return (

{title}

{description}

{items.map((tag) => (

{tag}

))} setValue(event.target.value)} onKeyDown={onKeyDown} />

) }

Tag Input

Installation

Usage