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