Chip

Buttons 6

About

Small informational badges for displaying labels, statuses, and categories.

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

Code

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

Usage.tsx

import * as React from "react";
import { Chip } from "@/components/ui/heroui-chip";

const initialChips = [
  { color: "default", label: "Default" },
  { color: "accent", label: "Accent" },
  { color: "success", label: "Success" },
] as const;

export default function ChipCloseableDemo() {
  const [items, setItems] = React.useState<Array<(typeof initialChips)[number]>>([...initialChips]);

  return (
    <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
      <div className="flex flex-wrap items-center justify-center gap-3">
        {items.map((item) => (
          <Chip
            color={item.color}
            key={item.label}
            onClose={() => setItems((current) => current.filter((chip) => chip.label !== item.label))}
          >
            {item.label}
          </Chip>
        ))}
      </div>
    </div>
  );
}

export { ChipCloseableDemo };