Quick Start Integration

Quick Start integration of tags input with shadecn and tailwind.

Client component

  1. Create a client component:
"use client";

import { useState } from "react";

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

export default function Example() {
  const [selectedTags, setSelectedTags] = useState<Tag[]>([]);
  const suggestions: Tag[] = [
    { id: "1", name: "JavaScript" },
    { id: "2", name: "TypeScript" },
    { id: "3", name: "React" },
  ];
  return (
    <TagsInput
      value={selectedTags}
      onChange={setSelectedTags}
      suggestions={suggestions}
      onlyFromSuggestions={true}
      placeholder="add"
    />
  );
}