Core

Tag

A token for applied filters, selected values or keywords, optionally removable.

reacttailwind v4native dialog

demos/tag.tsx

import { Tag } from "pixelbits/tag";
import { useState } from "react";

export default function Demo() {
  const [tags, setTags] = useState(["react", "tailwind v4", "native dialog"]);
  return (
    <div className="flex flex-wrap gap-2">
      {tags.map((t) => (
        <Tag key={t} onRemove={() => setTags((all) => all.filter((x) => x !== t))}>
          {t}
        </Tag>
      ))}
    </div>
  );
}

Installation

npm: import

import { Tag } from "pixelbits/tag";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/tag.json

API

<Tag>

A token for applied filters, selected values or keywords, optionally removable.

Example

<Tag onRemove={() => remove("react")}>react</Tag>

Prop	Type	Default	Description
children*	ReactNode	—	The tag text (or any inline content).
onRemove	() => void	—	When set, shows a small × button that calls this function. Without it the tag is static.
removeLabel	string	`"Remove " + children` when `children` is a string	Accessible name of the remove button.

Also accepts every prop of Omit<HTMLAttributes<HTMLSpanElement>, "children">.