Chip

Component

About

A small rounded label for a status or tag that can optionally be toggled (selected/pressed) or dismissed with a built-in remove button.

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 Chip from "@/components/ui/chip";
import { CircleCheck, Clock, Truck } from "lucide-react";

export default function IconsSizes() {
  return (
    <div className="space-y-3">
      {/* The icon is sized to the chip, whatever size it is given */}
      <div className="flex flex-wrap items-center gap-2">
        <Chip color="warning" icon={<Clock />} variant="outline">
          Waiting
        </Chip>
        <Chip color="info" icon={<Truck />} variant="outline">
          Shipped
        </Chip>
        <Chip color="success" icon={<CircleCheck />} variant="solid">
          Delivered
        </Chip>
        <Chip disabled icon={<Truck />}>
          Cancelled
        </Chip>
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Chip color="primary" icon={<Truck />} onRemove={() => {}} size="sm">
          Small
        </Chip>
        <Chip color="primary" icon={<Truck />} onRemove={() => {}}>
          Medium
        </Chip>
        <Chip color="primary" icon={<Truck />} onRemove={() => {}} size="lg">
          Large
        </Chip>
      </div>
    </div>
  );
}