Tags Selector

Forms 562

About

The Tags Selector component is a reusable UI element for selecting and managing tags from a predefined list.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tags Selector to your project and fits it to your theme.

Code

How Tags Selector is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { TagsSelector } from "@/components/ui/tags-selector";

const TAGS = [
  { id: "docker", label: "Docker" },
  { id: "kubernetes", label: "Kubernetes" },
  { id: "aws", label: "AWS" },
  { id: "graphql", label: "GraphQL" },
  { id: "mongodb", label: "MongoDB" },
  { id: "postgresql", label: "PostgreSQL" },
  { id: "redis", label: "Redis" },
  { id: "git", label: "Git" },
];

const TagsSelectorDemo = () => (
  <div style={{ padding: "20px", maxWidth: "600px", width: "100%" }}>
    <TagsSelector tags={TAGS} />
  </div>
);

export default { TagsSelectorDemo };