A polished React badge component with a continuously rotating gradient border and changing inner colors. Use it for CTAs, announcements, status labels, featured tags, or anywhere you want a small UI element to grab attention.
npm i framer-motionThis component supports Tailwind CSS dark: variants. To render this component in dark mode, add the dark className to your application's root element (for example, in app/layout.tsx).
Using <html>
<html className="dark"> ... </html>
Using <body>
<body className="dark"> ... </body>
Use Orbit Border
See how Animated Gradient Badge is used across React Vibe blocks, templates, and components. Explore real examples to get ideas for your own projects.