About
A small round counter badge for an icon button, like the unread count on a notification bell, that hides itself at zero and caps at a configurable max such as "99+".
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Count Badge to your project and fits it to your theme.
Code
How Count Badge is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { CountBadge } from "@/components/ui/count-badge";
const samples = [
{ color: "red", count: 3 },
{ color: "brand", count: 12 },
{ color: "gray", count: 7 },
{ color: "amber", count: 45 },
{ color: "green", count: 2 },
{ color: "blue", count: 9 },
{ color: "teal", count: 128 },
{ color: "purple", count: 5 },
{ color: "pink", count: 1 },
] as const;
export default function CountBadgeColors() {
return (
<div className="flex flex-wrap gap-6 p-6">
{samples.map(({ color, count }) => (
<div key={color} className="flex flex-col items-center gap-2">
<div className="relative flex size-9 items-center justify-center rounded-md bg-black/5 dark:bg-white/10">
<span className="size-4 rounded-full bg-label-secondary/40" />
<CountBadge count={count} color={color} />
</div>
<span className="text-xs capitalize text-label-secondary">
{color}
</span>
</div>
))}
</div>
);
}
Dependencies
More by sebafermanelli
View all
File Grid