Components
Tag Input
A sophisticated tag input component with suggestions, autocomplete, and custom styling. Built with React and Tailwind CSS, supporting both light and dark themes.
Features
-
Tag Management
- Add/remove tags
- Maximum tags limit
- Custom tag colors
- Default tags support
- Tag suggestions
-
Interactive UI
- Autocomplete dropdown
- Keyboard navigation
- Clear button for each tag
- Custom tag styling
- Smooth animations
Loading preview...
"use client";
import { TagInput } from "@/components/ui/tag-input"
const DEMO_TAGS = [
{ id: "kokonut-ui", label: "KokonutUI", color: "bg-indigo-100 text-indigo-700 border border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-700/30" },
];
const DEMO_SUGGESTIONS = [
{ id: "nextjs", label: "Next.js" },
{ id: "react", label: "React" },
{ id: "tailwind", label: "Tailwind" },
{ id: "typescript", label: "TypeScript" },
{ id: "shadcn", label: "shadcn/ui" },
];
export function TagInputDemo() {
return (
<div className="w-full max-w-2xl space-y-8">
{/* Default */}
<div className="space-y-2">
<h3 className="text-sm font-medium">Default Tag Input</h3>
<TagInput
label="Tags"
placeholder="Add tags..."
defaultTags={DEMO_TAGS}
suggestions={DEMO_SUGGESTIONS}
onChange={(tags) => console.log('Tags updated:', tags)}
/>
</div>
{/* With Error */}
<div className="space-y-2">
<h3 className="text-sm font-medium">With Error</h3>
<TagInput
label="Tags"
placeholder="Add tags..."
defaultTags={DEMO_TAGS}
suggestions={DEMO_SUGGESTIONS}
error="Maximum 5 tags allowed"
/>
</div>
{/* With Custom Max Tags */}
<div className="space-y-2">
<h3 className="text-sm font-medium">Max 3 Tags</h3>
<TagInput
label="Tags"
placeholder="Add tags..."
defaultTags={DEMO_TAGS}
suggestions={DEMO_SUGGESTIONS}
maxTags={3}
/>
</div>
{/* Empty State */}
<div className="space-y-2">
<h3 className="text-sm font-medium">Empty State</h3>
<TagInput
label="Tags"
placeholder="Add tags..."
defaultTags={[]}
suggestions={DEMO_SUGGESTIONS}
/>
</div>
{/* Custom Suggestions */}
<div className="space-y-2">
<h3 className="text-sm font-medium">Custom Categories</h3>
<TagInput
label="Categories"
placeholder="Add categories..."
defaultTags={[]}
suggestions={[
{ id: "design", label: "Design", color: "bg-purple-50 text-purple-700 border border-purple-200 hover:border-purple-300 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-700/30" },
{ id: "development", label: "Development", color: "bg-blue-50 text-blue-700 border border-blue-200 hover:border-blue-300 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700/30" },
{ id: "marketing", label: "Marketing", color: "bg-green-50 text-green-700 border border-green-200 hover:border-green-300 dark:bg-green-900/30 dark:text-green-300 dark:border-green-700/30" },
]}
/>
</div>
</div>
);
}