Chip

Component 14

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 {
  BanIcon,
  CheckIcon,
  Chip,
  CircleFillIcon,
  CircleInfoIcon,
  ClockIcon,
  TriangleExclamationIcon,
} from "@/components/ui/heroui-chip";

export default function ChipStatusesDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
      <div className="flex max-w-xl flex-wrap items-center justify-center gap-3">
        <Chip startContent={<CircleFillIcon />} variant="primary">
          Default
        </Chip>
        <Chip color="success" startContent={<CheckIcon />} variant="primary">
          Active
        </Chip>
        <Chip color="warning" startContent={<ClockIcon />} variant="primary">
          Pending
        </Chip>
        <Chip startContent={<BanIcon />} variant="tertiary">
          Inactive
        </Chip>
        <Chip color="accent" startContent={<CircleInfoIcon />}>
          New Feature
        </Chip>
        <Chip color="success" startContent={<CheckIcon />}>
          Available
        </Chip>
        <Chip color="warning" startContent={<TriangleExclamationIcon />}>
          Beta
        </Chip>
        <Chip color="danger" startContent={<BanIcon />}>
          Deprecated
        </Chip>
      </div>
    </div>
  );
}

export { ChipStatusesDemo };