Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Circular Badge with Count
A circular badge displaying a number for notification counts, unread items, or quantity indicators
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Round number badges grab attention differently than text badges—3 unread, 5 notifications, 12 pending. This React badge uses rounded-full with size-6 and flex items-center justify-center for perfect circular dimensions displaying counts. Built with shadcn/ui, it's optimized for single-digit to double-digit numbers. Perfect for notification indicators, unread message counts, cart item quantities, or pending task badges where quantifying items motivates user action.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Text Badge
Standard text-based badge
Avatar Count Badge
Notification count on avatars
Secondary Count Badge
Subtle circular count variant
Notification Dot
Simple indicator without counts
Shopping Cart Badge
Cart item count indicators
Tab Count Badge
Unread counts on navigation tabs