Components
Loading preview...
Small informational badges for displaying labels, statuses, and categories.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-chipimport { 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 };