Badge Components
Status indicators and labels with neon effects. Perfect for tags, notifications, and status displays.
Neon Badges
Electric neon badges with glowing effects in vibrant colors
Cyan Glow
Purple Glow
Chartreuse Glow
Pink Glow
Destructive Glow
Success Glow
Warning Glow
Status Badges:
Online
Away
Offline
New Message
Priority Levels:
High Priority
Medium Priority
Low Priority
Basic Badges
Clean, simple badges for general use
Default
Secondary
Outline
New
Success
Warning
Error
Removable Badges:
React
TypeScript
Tailwind
Framer Motion
Badge Sizes
Badges in different sizes for various use cases
Small Size (sm):
Small
Compact
Tiny
Default Size:
Default
Standard
Regular
Large Size (lg):
Large
Big
Huge
Size Comparison:
Small
Perfect for inline labelsDefault
Standard badge sizeLarge
For prominent displaysRemovable Badges
Interactive badges that can be dismissed
Technology Tags:
React
TypeScript
NeonKit
UI Components
Dark Mode
Active Filters:
New
Featured
Popular
Status Management:
Task Completed
In Progress
Blocked
Priority Levels:
Urgent
High
Normal
Installation
Copy and paste the badge code directly. Install required dependencies:
npm install framer-motion clsx tailwind-mergeMake sure you have the cn utility function. See installation guide.