Chip

Component 440

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 { Chip, CircleDashedIcon } from "@/components/ui/heroui-chip";

const sizes = ["lg", "md", "sm"] as const;
const colors = ["accent", "default", "success", "warning", "danger"] as const;
const variants = ["primary", "secondary", "tertiary", "soft"] as const;

export default function ChipVariantsDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
      <div className="flex flex-col gap-7">
        {sizes.map((size, index) => (
          <div className="flex items-start gap-5" key={size}>
            <h3 className="w-7 shrink-0 pt-1 text-sm font-medium text-muted-foreground">{size}</h3>
            <div className="flex flex-col gap-3">
              <div className="flex items-center gap-3 pl-24">
                {colors.map((color) => (
                  <span className="flex w-[130px] justify-center text-xs capitalize text-muted-foreground" key={color}>
                    {color}
                  </span>
                ))}
              </div>
              {variants.map((variant) => (
                <div className="flex items-center gap-3" key={variant}>
                  <div className="w-24 shrink-0 text-sm capitalize text-muted-foreground">{variant}</div>
                  {colors.map((color) => (
                    <div className="flex w-[130px] shrink-0 items-center justify-center" key={color}>
                      <Chip
                        color={color}
                        endContent={<CircleDashedIcon />}
                        size={size}
                        startContent={<CircleDashedIcon />}
                        variant={variant}
                      >
                        Label
                      </Chip>
                    </div>
                  ))}
                </div>
              ))}
            </div>
            {index < sizes.length - 1 && <div className="hidden">Label</div>}
          </div>
        ))}
      </div>
    </div>
  );
}

export { ChipVariantsDemo };