About the shadcn/ui Badge Component
The Badge component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add badge` and copy it directly into your project.
Badge Component — Frequently Asked Questions
How do I make a clickable shadcn Badge?
Wrap in an anchor or button: `<a href="/"><Badge>Click</Badge></a>`. Or use `asChild` if the Badge component supports it. Add `cursor-pointer` class.
How do I add an icon inside a shadcn Badge?
Add any icon component before or after the text: `<Badge><CircleCheck className="h-3 w-3" />Active</Badge>`. Use `h-3 w-3` for small badges.
How do I create a notification count badge?
Position absolutely over an icon: `<div className="relative"><Bell /><Badge className="absolute -top-2 -right-2 h-5 w-5 p-0 flex items-center justify-center">{count}</Badge></div>`.