Components
Loading preview...
Small informational badges for displaying labels, statuses, and categories.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-chipimport {
ChevronDownIcon,
Chip,
CircleCheckFillIcon,
CircleFillIcon,
ClockIcon,
XmarkIcon,
} from "@/components/ui/heroui-chip";
export default function ChipWithIconsDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="flex flex-wrap items-center justify-center gap-3">
<Chip startContent={<CircleFillIcon />}>Information</Chip>
<Chip color="success" startContent={<CircleCheckFillIcon />}>
Completed
</Chip>
<Chip color="warning" startContent={<ClockIcon />}>
Pending
</Chip>
<Chip color="danger" startContent={<XmarkIcon />}>
Failed
</Chip>
<Chip endContent={<ChevronDownIcon />}>Label</Chip>
</div>
</div>
);
}
export { ChipWithIconsDemo };