# 7 React Badge Components for Tailwind CSS

> Small labels with motion: live status dots, count badges that pop on change, shimmering “new” badges, dismissible tags, gradient outlines, verified seals and trend deltas.

3 of 7 free (the rest with PixelPapa Pro), built with Tailwind CSS and Motion, installable with the shadcn CLI.

- [Badge Count Pop](https://pixelpapa.com/components/badges/badge-count-pop.md) (Pro): A notification count that bumps with a spring whenever it changes, rolls the digits in the direction of the change and pops out at zero.
- [Badge Dismissible Tags](https://pixelpapa.com/components/badges/badge-dismissible-tags.md) (Pro): Removable tags that blur and shrink away while their neighbours glide into the gap with a layout spring.
- [Badge Gradient Outline](https://pixelpapa.com/components/badges/badge-gradient-outline.md): Pill badges with a hairline gradient border and matching gradient text; on hover the colours slide through the outline and a soft tint fills the pill.
- [Badge Shimmer New](https://pixelpapa.com/components/badges/badge-shimmer-new.md): A small "New" label whose text catches a passing highlight on a loop while a tiny spark twinkles beside it.
- [Badge Status Pulse](https://pixelpapa.com/components/badges/badge-status-pulse.md): Status badges with a live dot per state: a calm sonar ring for healthy, a breathing glow for degraded, urgent double rings for down and an orbiting arc for deploying.
- [Badge Trend Delta](https://pixelpapa.com/components/badges/badge-trend-delta.md) (Pro): A delta badge that flips its arrow with a spring, cross-fades between green and red and rolls the figure whenever the value changes sign or size.
- [Badge Verified Seal](https://pixelpapa.com/components/badges/badge-verified-seal.md) (Pro): A scalloped verification seal that spins in on a spring, draws its check stroke, takes a single sheen and then keeps turning slowly. Hover replays it.