@vincentcornelius/shadecn-tags-input

A beautiful and customizable tags input component for ShadcnUI and React applications. This component provides a seamless way to handle multiple tags with suggestions, keyboard navigation, and customizable styling.

Features

• 🎯 Fully integrated with ShadcnUI
• ⌨️ Keyboard navigation
• 🔍 Auto-suggestions with filtering
• 🎨 Highly customizable styling
• 🔒 TypeScript
• ⚡ Lightweight
• 📦 Zero-install - copy and paste the code
• 🎮 Easy to use API
• 🎯 Maximum tags limit
• 🔍 Suggestion-only mode

Installation

# Add the component to your project
npx @vincentcornelius/shadecn-tags-input add

Prerequisites

This component is built on top of shadcn/ui. Make sure you have it set up in your project:

npx shadcn-ui@latest init

Usage

After installation, you can import and use the component:

"use client";

import { Tag, TagsInput, TagErrorCode } from "@/components/ui/tags-input";
import { useState } from "react";

export default function CreateLinkTags() {
  const [selectedTags, setSelectedTags] = useState<Tag[]>([]);
  const suggestions: Tag[] = [
    { id: "1", name: "JavaScript" },
    { id: "2", name: "TypeScript" },
    { id: "3", name: "React" },
    { id: "4", name: "Vue" },
    { id: "5", name: "Angular" },
    { id: "6", name: "Svelte" },
    { id: "7", name: "Next.js" },
    { id: "8", name: "Nuxt.js" },
    { id: "9", name: "Tailwind" },
    { id: "10", name: "CSS" },
    { id: "11", name: "HTML" },
    { id: "12", name: "PHP" },
    { id: "13", name: "Python" },
    { id: "14", name: "Java" },
  ];

  const handleError = (code: TagErrorCode) => {
    switch (code) {
      case "E01":
        console.log("E01: Tag already exists");
        break;
      case "E02":
        console.log("E02: Tag not found in suggestions");
        break;
    }
  };

  return (
    <TagsInput
      value={selectedTags}
      onChange={setSelectedTags}
      suggestions={suggestions}
      onlyFromSuggestions={true}
      maxTags={3}
      onError={handleError}
      placeholder="add tag & press enter"
    />
  );
}

Props

Prop	Type	Default	Description
value	Tag[]	Required	Array of current tags
onChange	(tags: Tag[]) => void	Required	Callback when tags change
suggestions	Tag[]	[]	Array of suggestion tags
className	string	undefined	Container class name
inputClassName	string	undefined	Input field class name
badgeClassName	string	undefined	Tag badge class name
badgeCloseClassName	string	undefined	Close button class name
autocompleteClassName	string	undefined	Suggestions dropdown class name
onlyFromSuggestions	boolean	false	Only allow tags from suggestions
maxTags	number	undefined	Maximum number of tags allowed
onError	(code: TagErrorCode) => void	undefined	Error callback
placeholder	string	undefined	Input placeholder text
onInputChange	(value: string) => void	undefined	Input change callback

Features

Keyboard Navigation

• Enter: Add a tag
• Backspace: Remove the last tag (when input is empty)
• Arrow Up/Down: Navigate through suggestions
• Escape: Close suggestions

Error Handling

The component provides two error codes:

• E01: Tag already exists
• E02: Tag not in suggestions (when onlyFromSuggestions is true)

Customization

The component is built with ShadcnUI, making it easy to customize using Tailwind CSS classes:

<TagsInput
  className="w-full max-w-md"
  inputClassName="placeholder:text-gray-400"
  badgeClassName="bg-primary text-primary-foreground"
  badgeCloseClassName="hover:bg-primary/20"
  autocompleteClassName="bg-background"
  // ... other props
/>

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Vincent Cornelius