Fluid Tag Input

A dynamic input field for managing tags or chips. It uses framer-motion layout animations to make the addition and removal of tags feel organic and physical.

Neo-SaaS Style

Minimalist, pill-shaped tags. Interactions are subtle but responsive.

DesignDevelopment

Installation

Legacy installation using the full registry URL:

pnpm dlx shadcn@latest add "https://ui.zarasana.com/r/tag-input-neo-saas.json"

Neo-Brutal Style

Bold, rectangular tags with thick borders. Deleting a tag feels impactful.

Installation

Legacy installation using the full registry URL:

pnpm dlx shadcn@latest add "https://ui.zarasana.com/r/tag-input-neo-brutal.json"

Glassomorphic Style

Translucent tags that glow on hover. Perfect for dark, modern interfaces.

Idea

Research

Installation

Legacy installation using the full registry URL:

pnpm dlx shadcn@latest add "https://ui.zarasana.com/r/tag-input-glassomorphic.json"

API Reference

Props

Prop	Type	Default	Description
`initialTags`	`string[]`	`[]`	Initial set of tags.
`placeholder`	`string`	-	Placeholder text for input.
`onTagsChange`	`(tags: string[]) => void`	-	Callback fired when tags are added or removed.
`className`	`string`	-	Additional CSS classes for the container.