How to Build an Animated Badge Component with shadcn/ui

<p>Badges are everywhere in modern web apps. You see them on notification counters, status labels, and feature tags.</p> <p>Most of them are static, though. They sit there doing nothing, blending into the page. But a well-animated badge can tell the user something happened without them having to read a single word.</p> <p>In this tutorial, you'll build an animated “success” badge using shadcn/ui, Tailwind CSS, and Framer Motion. The badge will have a glowing top light, an animated check icon that bounces into view, and letters that drop in one at a time with a stagger effect.</p> <p>The component comes from the <a href="https://shadcnspace.com/components/badge"><strong>Shadcn Space badge collection</strong></a> and uses the Base UI primitive version of Badge. You'll install it with a single CLI command, then walk through every piece of code.</p> <p>By the end, you'll build an animated "Success" badge by:</p> <ol> <li><p>Installing the <code>badge-07</code> component from Shadcn Space using the Shadcn CLI</p> </li> <li><p>Using <code>motion.create()</code> to wrap the shadcn/ui <code>Badge</code> into an animatable component</p> </li> <li><p>Adding layered radial-gradient glow effects as absolutely positioned spans</p> </li> <li><p>Animating the check icon with a scale and rotate entrance</p> </li> <li><p>Animating each letter of the label individually using staggered <code>variants</code></p> </li> </ol> <h2 id="heading-table-of-contents"><strong>Table of Contents</strong></h2> <ul> <li><p><a href="#heading-prerequisites">Prerequisites</a></p> </li> <li><p><a href="#heading-what-youll-build">What You'll Build</a></p> </li> <li><p><a href="#heading-how-to-install-the-component">How to Install the Component</a></p> </li> <li><p><a href="#heading-component-structure">Component Structure</a></p> </li> <li><p><a href="#heading-step-1-set-up-the-imports">Step 1: Set Up the Imports</a></p> </li> <li><p><a href="#heading-step-2-define-letter-animation-variants">Step 2: Define Letter Animation Variants</a></p> </li> <li><p><a href="#heading-step-3-wrap-the-badge-with-motion">Step 3: Wrap the Badge with Motion</a></p> </li> <li><p><a href="#heading-step-4-build-the-glow-layers">Step 4: Build the Glow Layers</a></p> </li> <li><p><a href="#heading-step-5-animate-the-icon">Step 5: Animate the Icon</a></p> </li> <li><p><a href="#heading-step-6-animate-each-letter">Step 6: Animate Each Letter</a></p> </li> <li><p><a href="#heading-how-to-use-it-in-your-app">How to Use It in Your App</a></p> </li> <li><p><a href="#heading-how-to-customize-the-component">How to Customize the Component</a></p> </li> <li><p><a href="#heading-live-preview">Live Preview</a></p> </li> <li><p><a href="#heading-key-concepts-recap">Key Concepts Recap</a></p> </li> <li><p><a href="#heading-conclusion">Conclusion</a></p> </li> <li><p><a href="#heading-resources">Resources</a></p> </li> </ul> <h2 id="heading-prerequisites"><strong>Prerequisites</strong></h2> <p>You'll need:</p> <ul> <li><p>A Next.js project with shadcn/ui initialized</p> </li> <li><p>Tailwind CSS set up</p> </li> <li><p><code>motion</code> installed: <code>npm install motion</code></p> </li> <li><p><code>lucide-react</code> installed: <code>npm install lucide-react</code></p> </li> <li><p>Basic TypeScript and React knowledge</p> </li> </ul> <h2 id="heading-what-youll-build"><strong>What You'll Build</strong></h2> <p>In this tutorial, we'll build a self-contained animated badge with three moving parts:</p> <pre><code class="language-plaintext">├── MotionBadge (outline, rounded-full, teal border) │ ├── Glow layers → 3 radial gradient spans above the top border │ ├── CheckCircle → scale + rotate entrance, easeOutBack │ └── Letter spans → staggered drop-in, easeOutCubic </code></pre> <p>After installation, the component file lands here:</p> <pre><code class="language-plaintext">components/ └── shadcn-space/ └── badge/ └── badge-07.tsx </code></pre> <h2 id="heading-how-to-install-the-component"><strong>How to Install the Component</strong></h2> <p><a href="https://shadcnspace.com/"><strong>Shadcn UI</strong></a> provides a registry of production-ready components. You pull them into your project with the Shadcn CLI, just like you'd add any standard shadcn/ui component.</p> <p>Before running any command, check the <a href="https://shadcnspace.com/docs/getting-started/how-to-use-shadcn-cli"><strong>Getting Started guide</strong></a> or the <a href="https://shadcnspace.com/cli"><strong>CLI page</strong></a> for setup details.</p> <p>You can also follow along with this video walkthrough:</p> <div class="embed-wrapper"><iframe width="560" height="315" src="https://www.youtube.com/embed/n6dvjVxy02U" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div> <p>Run the command for your package manager:</p> <p><strong>pnpm</strong></p> <pre><code class="language-javascript">pnpm dlx shadcn@latest add @shadcn-space/badge-07 </code></pre> <p><strong>npm</strong></p> <pre><code class="language-javascript">npx shadcn@latest add @shadcn-space/badge-07 </code></pre> <p><strong>Yarn</strong></p> <pre><code class="language-javascript">yarn dlx shadcn@latest add @shadcn-space/badge-07 </code></pre> <p><strong>Bun</strong></p> <pre><code class="language-javascript">bunx --bun shadcn@latest add @shadcn-space/badge-07 </code></pre> <p><strong>Note:</strong> <code>badge-07</code> uses the <strong>Base UI</strong> primitive version of Badge. Both Radix and Base UI versions are available in the registry. This tutorial covers the Base UI version.</p> <h2 id="heading-component-structure"><strong>Component Structure</strong></h2> <p>Here's the complete component. Read through it once, then each step below breaks down a specific part.</p> <pre><code class="language-javascript">'use client' import { motion, type Variants } from "motion/react"; import { CheckCircle } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { cn } from "@/lib/utils"; const LETTER_VARIANTS: Variants = { hidden: { y: -14, opacity: 0 }, visible: (i: number) =&gt; ({ y: 0, opacity: 1, transition: { delay: i * 0.038, duration: 0.35, ease: [0.215, 0.61, 0.355, 1], }, }), }; const MotionBadge = motion.create(Badge); const SuccessBadgeDemo = () =&gt; { const label = "Success"; return ( &lt;MotionBadge variant="outline" className={cn( "relative h-auto cursor-default overflow-visible rounded-full", "gap-2 px-3 py-2", "bg-background backdrop-blur-md", "text-foreground text-sm font-medium leading-none", "border-teal-400/25", )} &gt; {/* Top glow */} &lt;motion.span aria-hidden animate={{ opacity: 0.55 }} transition={{ duration: 0.45 }} className="pointer-events-none absolute -top-2 left-[10%] right-[10%] h-4 blur bg-[radial-gradient(ellipse_80%_100%_at_50%_100%,rgba(45,212,191,0.95)_0%,transparent_70%)]" /&gt; &lt;motion.span aria-hidden animate={{ opacity: 0.75 }} transition={{ duration: 0.45 }} className="pointer-events-none absolute -top-1 left-[22%] right-[22%] h-2 blur-sm bg-[radial-gradient(ellipse_70%_100%_at_50%_100%,rgba(45,212,191,0.85)_0%,transparent_70%)]" /&gt; &lt;motion.span aria-hidden animate={{ opacity: 0.9 }} transition={{ duration: 0.45 }} className="pointer-events-none absolute top-0 left-[28%] right-[28%] h-px bg-[radial-gradient(ellipse_40%_50%_at_50%_50%,rgba(45,212,191,0.95)_0%,transparent_100%)]" /&gt; {/* Icon */} &lt;motion.span initial={{ scale: 0.35, opacity: 0, rotate: -25 }} animate={{ scale: 1, opacity: 1, rotate: 0 }} transition={{ duration: 0.32, ease: [0.175, 0.885, 0.32, 1.275] }} className="flex h-4 w-4 shrink-0 items-center justify-center" &gt; &lt;CheckCircle size={16} strokeWidth={2} className="text-teal-400" /&gt; &lt;/motion.span&gt; {/* Animated label */} &lt;span className="inline-flex overflow-hidden leading-none"&gt; {label.split("").map((char, i) =&gt; ( &lt;motion.span key={i} custom={i} variants={LETTER_VARIANTS} initial="hidden" animate="visible" className="inline-block whitespace-pre" &gt; {char} &lt;/motion.span&gt; ))} &lt;/span&gt; &lt;/MotionBadge&gt; ); }; export default SuccessBadgeDemo; </code></pre> <p>Now let's break it down piece by piece.</p> <h2 id="heading-step-1-set-up-the-imports"><strong>Step 1: Set Up the Imports</strong></h2> <pre><code class="language-javascript">'use client' import { motion, type Variants } from "motion/react"; import { CheckCircle } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { cn } from "@/lib/utils"; </code></pre> <p><code>'use client'</code> marks this as a Client Component in Next.js App Router. Motion animations run in the browser, not on the server, so this directive is required.</p> <p><code>motion/react</code> is the import path for Motion v11 and above. If your project uses an older version, the import is <code>framer-motion</code>. The <code>Variants</code> type is a TypeScript helper for typing named animation state objects.</p> <p><code>cn()</code> is the class name utility that ships with every shadcn/ui project. It merges Tailwind classes and handles conditional logic cleanly.</p> <h2 id="heading-step-2-define-letter-animation-variants"><strong>Step 2: Define Letter Animation Variants</strong></h2> <pre><code class="language-javascript">const LETTER_VARIANTS: Variants = { hidden: { y: -14, opacity: 0 }, visible: (i: number) =&gt; ({ y: 0, opacity: 1, transition: { delay: i * 0.038, duration: 0.35, ease: [0.215, 0.61, 0.355, 1], }, }), }; </code></pre> <p>Each letter starts 14px above its final position and is fully transparent. When the component mounts, it moves to <code>y: 0</code> at full opacity.</p> <p>The <code>delay: i * 0.038</code> formula is the stagger. Letter 0 has no delay, letter 1 waits 38ms, letter 2 waits 76ms, and so on. This makes the letters appear to cascade in from left to right.</p> <p>The <code>ease</code> value <code>[0.215, 0.61, 0.355, 1]</code> is <code>easeOutCubic</code>. It starts fast and decelerates at the end, giving each letter a natural landing rather than a hard stop.</p> <p>The <code>visible</code> function accepts a <code>custom</code> value. When you pass <code>custom={i}</code> on the <code>motion.span</code>, Motion calls this function with that index. Each letter calculates its own delay independently.</p> <p><strong>Accessibility tip:</strong> To respect users with reduced motion preferences, import <code>useReducedMotion</code> from <code>motion/react</code> and skip the stagger when it returns <code>true</code>.</p> <h2 id="heading-step-3-wrap-the-badge-with-motion"><strong>Step 3: Wrap the Badge with Motion</strong></h2> <pre><code class="language-javascript">const MotionBadge = motion.create(Badge); </code></pre> <p>The <code>Badge</code> Component from shadcn/ui is a standard React component. You can't apply Motion props like <code>animate</code> or <code>initial</code> to it directly.</p> <p><code>motion.create()</code> wraps any React component and returns a new version that accepts all Motion animation props. The result, <code>MotionBadge</code>, behaves exactly like <code>Badge</code> But it's now fully animatable.</p> <p>Use this pattern any time you want to animate a custom or third-party library component with Motion.</p> <h2 id="heading-step-4-build-the-glow-layers"><strong>Step 4: Build the Glow Layers</strong></h2> <pre><code class="language-javascript">&lt;motion.span aria-hidden animate={{ opacity: 0.55 }} transition={{ duration: 0.45 }} className="pointer-events-none absolute -top-2 left-[10%] right-[10%] h-4 blur bg-[radial-gradient(ellipse_80%_100%_at_50%_100%,rgba(45,212,191,0.95)_0%,transparent_70%)]" /&gt; &lt;motion.span aria-hidden animate={{ opacity: 0.75 }} transition={{ duration: 0.45 }} className="pointer-events-none absolute -top-1 left-[22%] right-[22%] h-2 blur-sm bg-[radial-gradient(ellipse_70%_100%_at_50%_100%,rgba(45,212,191,0.85)_0%,transparent_70%)]" /&gt; &lt;motion.span aria-hidden animate={{ opacity: 0.9 }} transition={{ duration: 0.45 }} className="pointer-events-none absolute top-0 left-[28%] right-[28%] h-px bg-[radial-gradient(ellipse_40%_50%_at_50%_50%,rgba(45,212,191,0.95)_0%,transparent_100%)]" /&gt; </code></pre> <p>Three spans stack on top of each other above the badge border. Each is narrower and more opaque than the one behind it:</p> <table> <thead> <tr> <th>Layer</th> <th>Position</th> <th>Width</th> <th>Blur</th> <th>Final Opacity</th> </tr> </thead> <tbody><tr> <td>Outer</td> <td><code>-top-2</code></td> <td>80%</td> <td><code>blur</code></td> <td>0.55</td> </tr> <tr> <td>Middle</td> <td><code>-top-1</code></td> <td>56%</td> <td><code>blur-sm</code></td> <td>0.75</td> </tr> <tr> <td>Inner line</td> <td><code>top-0</code></td> <td>44%</td> <td>none</td> <td>0.90</td> </tr> </tbody></table> <p>The innermost layer is only 1px tall (<code>h-px</code>) with no blur. This gives the glow a crisp, bright edge right at the badge border. The two outer layers create the soft falloff around it.</p> <p>All three carry <code>aria-hidden</code> because they're purely decorative. Screen readers skip them. The <code>overflow-visible</code> class on <code>MotionBadge</code> is what allows these spans to render outside the component's boundary without clipping.</p> <h2 id="heading-step-5-animate-the-icon"><strong>Step 5: Animate the Icon</strong></h2> <pre><code class="language-javascript">&lt;motion.span initial={{ scale: 0.35, opacity: 0, rotate: -25 }} animate={{ scale: 1, opacity: 1, rotate: 0 }} transition={{ duration: 0.32, ease: [0.175, 0.885, 0.32, 1.275] }} className="flex h-4 w-4 shrink-0 items-center justify-center" &gt; &lt;CheckCircle size={16} strokeWidth={2} className="text-teal-400" /&gt; &lt;/motion.span&gt; </code></pre> <p>The icon starts at 35% scale, invisible, and rotated 25 degrees counter-clockwise. It animates to full size and zero rotation on mount.</p> <p>The <code>ease</code> value <code>[0.175, 0.885, 0.32, 1.275]</code> is <code>easeOutBack</code>. Unlike <code>easeOutCubic</code>, this curve overshoots its target slightly before snapping back. The icon appears to spring into place. It is a subtle effect, but it makes the icon feel physical.</p> <p><code>shrink-0</code> on the wrapper prevents the icon from compressing inside the flex container.</p> <h2 id="heading-step-6-animate-each-letter"><strong>Step 6: Animate Each Letter</strong></h2> <pre><code class="language-javascript">&lt;span className="inline-flex overflow-hidden leading-none"&gt; {label.split("").map((char, i) =&gt; ( &lt;motion.span key={i} custom={i} variants={LETTER_VARIANTS} initial="hidden" animate="visible" className="inline-block whitespace-pre" &gt; {char} &lt;/motion.span&gt; ))} &lt;/span&gt; </code></pre> <p><code>label.split("")</code> turns <code>"Success"</code> into <code>["S", "u", "c", "c", "e", "s", "s"]</code>. Each character gets its own <code>motion.span</code>.</p> <p><code>variants={LETTER_VARIANTS}</code> connects each span to the animation states from Step 2. <code>custom={i}</code> passes the character's index into the <code>visible</code> resolver so each letter knows its own delay.</p> <p>Two Tailwind classes matter here:</p> <ul> <li><p><code>overflow-hidden</code> on the wrapper clips, each letter as it slides in from above. Without it, letters would be visible outside the badge before they land.</p> </li> <li><p><code>inline-block</code> on each <code>motion.span</code> is required for <code>translateY</code> to work. CSS transforms do not apply to inline elements by default.</p> </li> </ul> <h2 id="heading-how-to-use-it-in-your-app"><strong>How to Use It in Your App</strong></h2> <p>Import and render <code>SuccessBadgeDemo</code> anywhere in your project:</p> <pre><code class="language-javascript">// app/page.tsx import SuccessBadgeDemo from "@/components/shadcn-space/badge/badge-07"; export default function Page() { return ( &lt;div className="flex items-center justify-center min-h-screen"&gt; &lt;SuccessBadgeDemo /&gt; &lt;/div&gt; ); } </code></pre> <p>The component is self-contained. It carries its own animation state, theme tokens, and glow layers. No props are required.</p> <h2 id="heading-how-to-customize-the-component"><strong>How to Customize the Component</strong></h2> <p>You can change the label by replacing <code>"Success"</code> it with any string. The letter animation applies automatically since it splits whatever string you pass.</p> <p>To build a complete blue "Verified" variant, you just need to change three things: the border color class, the glow gradient color values, and the icon. Here's the full updated component:</p> <pre><code class="language-javascript">'use client' import { motion, type Variants } from "motion/react"; import { ShieldCheck } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { cn } from "@/lib/utils"; const LETTER_VARIANTS: Variants = { hidden: { y: -14, opacity: 0 }, visible: (i: number) =&gt; ({ y: 0, opacity: 1, transition: { delay: i * 0.038, duration: 0.35, ease: [0.215, 0.61, 0.355, 1], }, }), }; const MotionBadge = motion.create(Badge); const VerifiedBadgeDemo = () =&gt; { const label = "Verified"; return ( &lt;MotionBadge variant="outline" className={cn( "relative h-auto cursor-default overflow-visible rounded-full", "gap-2 px-3 py-2", "bg-background backdrop-blur-md", "text-foreground text-sm font-medium leading-none", "border-blue-400/25", )} &gt; &lt;motion.span aria-hidden animate={{ opacity: 0.55 }} transition={{ duration: 0.45 }} className="pointer-events-none absolute -top-2 left-[10%] right-[10%] h-4 blur bg-[radial-gradient(ellipse_80%_100%_at_50%_100%,rgba(96,165,250,0.95)_0%,transparent_70%)]" /&gt; &lt;motion.span aria-hidden animate={{ opacity: 0.75 }} transition={{ duration: 0.45 }} className="pointer-events-none absolute -top-1 left-[22%] right-[22%] h-2 blur-sm bg-[radial-gradient(ellipse_70%_100%_at_50%_100%,rgba(96,165,250,0.85)_0%,transparent_70%)]" /&gt; &lt;motion.span aria-hidden animate={{ opacity: 0.9 }} transition={{ duration: 0.45 }} className="pointer-events-none absolute top-0 left-[28%] right-[28%] h-px bg-[radial-gradient(ellipse_40%_50%_at_50%_50%,rgba(96,165,250,0.95)_0%,transparent_100%)]" /&gt; &lt;motion.span initial={{ scale: 0.35, opacity: 0, rotate: -25 }} animate={{ scale: 1, opacity: 1, rotate: 0 }} transition={{ duration: 0.32, ease: [0.175, 0.885, 0.32, 1.275] }} className="flex h-4 w-4 shrink-0 items-center justify-center" &gt; &lt;ShieldCheck size={16} strokeWidth={2} className="text-blue-400" /&gt; &lt;/motion.span&gt; &lt;span className="inline-flex overflow-hidden leading-none"&gt; {label.split("").map((char, i) =&gt; ( &lt;motion.span key={i} custom={i} variants={LETTER_VARIANTS} initial="hidden" animate="visible" className="inline-block whitespace-pre" &gt; {char} &lt;/motion.span&gt; ))} &lt;/span&gt; &lt;/MotionBadge&gt; ); }; export default VerifiedBadgeDemo; </code></pre> <p>The only changes from the original: <code>border-blue-400/25</code> on the badge, <code>rgba(96, 165, 250, ...)</code> in the glow gradients (<code>blue-400</code> in Tailwind), <code>ShieldCheck</code> for the icon, and <code>text-blue-400</code> on the icon class.</p> <p>To adjust stagger speed, just change the delay multiplier in <code>LETTER_VARIANTS</code>:</p> <pre><code class="language-javascript">delay: i * 0.06, // slower stagger delay: i * 0.02, // faster stagger </code></pre> <p>You can also explore the <a href="https://shadcnspace.com/blocks"><strong>Shadcn Blocks</strong></a> collection to see how animated badges fit into full dashboard and card layouts.</p> <hr> <h2 id="heading-live-preview"><strong>Live Preview</strong></h2> <img src="https://cdn.hashnode.com/uploads/covers/68b53a3d851476bd2ce87f12/08db3820-9f72-4ddb-a507-e33cdcda5fb8.gif" alt="08db3820-9f72-4ddb-a507-e33cdcda5fb8" style="display:block;margin:0 auto" width="1152" height="648" loading="lazy"> <h2 id="heading-key-concepts-recap"><strong>Key Concepts Recap</strong></h2> <table> <thead> <tr> <th>Concept</th> <th>What It Does</th> </tr> </thead> <tbody><tr> <td><code>motion.create(Component)</code></td> <td>Wraps any React component to accept Motion animation props</td> </tr> <tr> <td><code>Variants</code></td> <td>Named animation states (<code>hidden</code>, <code>visible</code>) defined outside JSX for reuse</td> </tr> <tr> <td><code>custom={i}</code> + variant function</td> <td>Passes a per-element value into the variant resolver for dynamic transitions</td> </tr> <tr> <td><code>delay: i * 0.038</code></td> <td>Stagger formula: each element's delay grows by its index</td> </tr> <tr> <td><code>easeOutCubic</code> <code>[0.215, 0.61, 0.355, 1]</code></td> <td>Fast start, smooth deceleration. Letter drop-in.</td> </tr> <tr> <td><code>easeOutBack</code> <code>[0.175, 0.885, 0.32, 1.275]</code></td> <td>Overshoots slightly, snaps back. Icon pop.</td> </tr> <tr> <td>Three stacked radial gradients</td> <td>Wide + soft outer glow, narrow + sharp inner line</td> </tr> <tr> <td><code>overflow-visible</code> on the badge</td> <td>Allows glow spans to extend outside the component's own bounds</td> </tr> </tbody></table> <h2 id="heading-conclusion"><strong>Conclusion</strong></h2> <p>In this tutorial, you built a complete animated badge from scratch with a layered glow, bouncing icon, and staggered letter animation. Every part of it uses your existing Shadcn theme tokens, so it drops into any project without extra configuration.</p> <p>You can browse more <a href="https://shadcnspace.com/components"><strong>Shadcn Components</strong></a> on Shadcn Space to apply the same animation patterns to other UI elements. If you work with external services and tooling in your stack, the <a href="https://shadcnspace.com/mcp"><strong>Shadcn MCP</strong></a> integration is worth looking at as a next step.</p> <h2 id="heading-resources"><strong>Resources</strong></h2> <ul> <li><p><a href="https://shadcnspace.com/components/badge"><strong>Shadcn Space Badge Components</strong></a>: with all badge variants, including Pending, Failed, and more</p> </li> <li><p><a href="https://shadcnspace.com/docs/getting-started/how-to-use-shadcn-cli"><strong>Shadcn Space Getting Started Guide</strong></a>: how to use the Shadcn CLI with third-party registries</p> </li> <li><p><a href="https://motion.dev/"><strong>Motion Docs</strong></a>: official documentation for <code>motion/react</code></p> </li> <li><p><a href="https://lucide.dev/"><strong>Lucide React</strong></a>: icon library used in this tutorial</p> </li> <li><p><a href="https://ui.shadcn.com/docs"><strong>Shadcn/ui Documentation</strong></a></p> </li> <li><p><a href="https://youtu.be/n6dvjVxy02U?si=EXfClzSyI8D97VaI"><strong>YouTube: Shadcn Space CLI Walkthrough</strong></a></p> </li> </ul>