Component specification

Badge

Colorful status badges with hover animations. Great for labels, tags, and status indicators.

ReactCopyable sourceFree

NewProHotBeta

Usage / setup

Install with shadcn

Add this component straight into your codebase with the shadcn CLI. It writes the source file and installs the required dependencies.

shadcn CLI

npx shadcn@latest add https://mudasir.in/r/badge.json

Dependencies

No external packages — only React and Tailwind classes.

Theme colors are controlled by the --theme-color-* custom properties.