Badge Stack
Stack of premium badges with minimal styling.
Installation
Add this component to your project using the CLI:
terminal
npx vui-registry-cli-v1 add badge-stackSource Code
badge-stack.tsx
'use client'
import React, { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import PillBadge from './pill-badge'
import OutlineBadge from './outline-badge'
import GradientBadge from './gradient-badge'
import SoftBadge from './soft-badge'
import IconBadge from './icon-badge'
import CountBadge from './count-badge'
import StatusBadge from './status-badge'
import SystemStatusBadge from './system-status-badge'
export default function BadgeStack() {
const [copied, setCopied] = useState<string | null>(null)
const copy = (name: string, cmd: string) => {
navigator.clipboard.writeText(cmd)
setCopied(name)
setTimeout(() => setCopied(null), 1200)
}
const variants = [
{ name: 'Pill', Component: PillBadge, cmd: 'npx vui-registry-cli-v1 add badge-pill' },
{ name: 'Outline', Component: OutlineBadge, cmd: 'npx vui-registry-cli-v1 add badge-outline' },
{ name: 'Gradient', Component: GradientBadge, cmd: 'npx vui-registry-cli-v1 add badge-gradient' },
{ name: 'Soft', Component: SoftBadge, cmd: 'npx vui-registry-cli-v1 add badge-soft' },
{ name: 'Icon', Component: IconBadge, cmd: 'npx vui-registry-cli-v1 add badge-icon' },
{ name: 'Count', Component: CountBadge, cmd: 'npx vui-registry-cli-v1 add badge-count' },
{ name: 'Status', Component: StatusBadge, cmd: 'npx vui-registry-cli-v1 add badge-status' },
{ name: 'System', Component: SystemStatusBadge, cmd: 'npx vui-registry-cli-v1 add badge-status' },
]
return (
<div className="w-full grid gap-6 md:grid-cols-2 p-4">
{variants.map((v) => (
<div key={v.name} className="rounded-2xl p-[2px] border border-border bg-card/50 backdrop-blur-sm overflow-hidden">
<div className="rounded-xl border border-border bg-background/60">
<div className="flex items-center justify-between px-4 py-3 border-b border-border/50 bg-muted/10 relative">
<div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">{v.name}</div>
<button
onClick={() => copy(v.name, v.cmd)}
className="text-[10px] font-mono border-b border-border absolute top-2 right-3"
>
<AnimatePresence mode="wait">
{copied === v.name ? (
<motion.span key="copied" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="text-emerald-500">
Copied
</motion.span>
) : (
<motion.span key="copy" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
CLI
</motion.span>
)}
</AnimatePresence>
</button>
</div>
<div className="p-6 min-h-[120px] grid place-items-center">
<v.Component />
</div>
</div>
</div>
))}
</div>
)
}
Source Code
pill-badge.tsx
'use client'
import React from 'react'
import { motion } from 'framer-motion'
export default function VelocityKineticPill({ label = "Velocity UI" }) {
return (
<div className="relative inline-flex items-center group cursor-none">
{/* 1. ANAMORPHIC BACKGROUND GLOW (The "Aura") */}
<div className="absolute -inset-1 rounded-full bg-gradient-to-r from-cyan-500/20 via-violet-500/20 to-fuchsia-500/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-1000" />
{/* 2. THE CHASSIS (Black Hole Matte) */}
<div className="relative px-4 py-2 rounded-full bg-[#030303] border border-white/[0.08] overflow-hidden flex items-center gap-3 shadow-2xl">
{/* 3. THE KINETIC GRADIENT (Liquid Logic) */}
<motion.div
animate={{
x: ['-100%', '100%'],
}}
transition={{
duration: 5,
repeat: Infinity,
ease: "linear",
}}
className="absolute inset-0 w-[200%] h-full opacity-30 pointer-events-none"
style={{
background: 'linear-gradient(90deg, transparent, #22d3ee, #8b5cf6, #ec4899, transparent)',
}}
/>
{/* 4. BRANDING: Velocity UI Signature */}
<div className="flex items-center gap-2.5 relative z-10">
{/* Velocity Core Icon */}
<div className="relative w-3 h-3 flex items-center justify-center">
{/* Outer spinning ring */}
<motion.div
animate={{ rotate: 360 }}
transition={{ duration: 4, repeat: Infinity, ease: "linear" }}
className="absolute inset-0 rounded-full border-[1px] border-white/5 border-t-cyan-400 border-r-violet-500"
/>
{/* Static inner dot */}
<div className="w-[3px] h-[3px] rounded-full bg-white shadow-[0_0_8px_#fff]" />
</div>
{/* Precision Typography */}
<span className="text-[10px] font-black uppercase tracking-[0.35em] leading-none bg-gradient-to-b from-white via-zinc-200 to-zinc-600 bg-clip-text text-transparent">
{label}
</span>
</div>
{/* 5. OPTICAL SHIMMER (The "Blade" Pass) */}
<motion.div
initial={{ x: '-150%' }}
animate={{ x: '150%' }}
transition={{
repeat: Infinity,
duration: 1.5,
ease: [0.65, 0, 0.35, 1],
repeatDelay: 3
}}
className="absolute inset-0 w-full h-full skew-x-[-35deg] pointer-events-none"
style={{
background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent)',
}}
/>
{/* 6. TOP LIGHTING (Refining the 3D Edge) */}
<div className="absolute inset-x-4 top-0 h-[1px] bg-gradient-to-r from-transparent via-white/20 to-transparent" />
</div>
</div>
)
}Source Code
outline-badge.tsx
'use client'
import React from 'react'
import { motion } from 'framer-motion'
export default function VelocityAbsoluteZero({ label = "System Ready" }) {
return (
<div className="relative inline-flex items-center justify-center group select-none cursor-default">
{/* 1. THE HOUSING (Double-Layered Stroke) */}
<div className="absolute inset-0 rounded-[6px] border border-zinc-200/50 dark:border-white/[0.03] bg-zinc-50 dark:bg-[#080808]" />
{/* 2. THE LASER CIRCUIT (Path-Constrained) */}
<div className="absolute inset-0 rounded-[6px] overflow-hidden">
<motion.div
animate={{
top: ["-100%", "200%"],
left: ["-100%", "200%"],
}}
transition={{
duration: 4,
repeat: Infinity,
ease: "linear",
}}
className="absolute w-[80px] h-[80px] bg-cyan-500/40 blur-[15px] opacity-0 group-hover:opacity-100 transition-opacity duration-500"
/>
</div>
{/* 3. THE MASKED BORDER (1px Precision) */}
<div className="absolute inset-0 rounded-[6px] border border-transparent group-hover:border-cyan-500/30 transition-colors duration-500" />
{/* 4. CONTENT ARCHITECTURE */}
<div className="relative px-3 py-1.5 flex items-center gap-4 z-10">
{/* Left Indicator: The "Sensor" */}
<div className="relative flex items-center justify-center">
<div className="w-[1px] h-3 bg-zinc-300 dark:bg-zinc-800 rotate-[20deg]" />
<div className="w-1.5 h-1.5 rounded-full bg-zinc-950 dark:bg-white ml-2 shadow-[0_0_10px_rgba(255,255,255,0.2)]" />
</div>
{/* Typography: Deep-Etched Silver */}
<span className="text-[10px] font-black uppercase tracking-[0.5em]
text-zinc-400 group-hover:text-zinc-900
dark:text-zinc-600 dark:group-hover:text-white
transition-all duration-500 ease-out">
{label}
</span>
{/* Right Indicator: The "Power" */}
<div className="flex gap-[2px]">
{[1, 2, 3].map((i) => (
<motion.div
key={i}
animate={{ opacity: [0.2, 1, 0.2] }}
transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.2 }}
className="w-[2px] h-[2px] rounded-full bg-cyan-500"
/>
))}
</div>
</div>
{/* 5. THE SHIMMER (Anamorphic Streak) */}
<div className="absolute inset-0 overflow-hidden rounded-[6px]">
<motion.div
initial={{ x: '-150%' }}
animate={{ x: '150%' }}
transition={{
repeat: Infinity,
duration: 1.2,
ease: [0.7, 0, 0.3, 1],
repeatDelay: 4
}}
className="absolute inset-0 w-full h-full bg-gradient-to-r from-transparent via-white/20 dark:via-white/5 to-transparent skew-x-[-45deg] pointer-events-none"
/>
</div>
</div>
)
}Source Code
gradient-badge.tsx
'use client'
import React from 'react'
import { motion } from 'framer-motion'
export default function VelocityGradientBadge({ label = "Velocity UI" }) {
return (
<div className="relative inline-flex items-center group">
{/* 1. The "Velocity" Kinetic Glow (The Leak Fixer) */}
<div className="absolute inset-0 rounded-full bg-gradient-to-r from-cyan-500/20 via-fuchsia-500/20 to-blue-500/20 blur-md opacity-0 group-hover:opacity-100 transition-opacity duration-1000" />
{/* 2. Main Badge Body */}
<div className="relative px-4 py-1.5 rounded-full bg-black border border-white/10 overflow-hidden flex items-center gap-2.5">
{/* 3. The Fluid Gradient Logic - Moves across the background */}
<motion.div
animate={{
x: ['-100%', '100%'],
}}
transition={{
duration: 3,
repeat: Infinity,
ease: "linear",
}}
className="absolute inset-0 w-[200%] h-full opacity-20 pointer-events-none"
style={{
background: 'linear-gradient(90deg, transparent, #22d3ee, #8b5cf6, #ec4899, transparent)',
}}
/>
{/* 4. Velocity Branding - "Etched" look */}
<div className="flex items-center gap-1.5">
{/* Logo Mark */}
<div className="relative w-2 h-2">
<motion.div
animate={{ rotate: 360 }}
transition={{ duration: 4, repeat: Infinity, ease: "linear" }}
className="absolute inset-0 rounded-full border-[1.5px] border-t-cyan-400 border-r-fuchsia-400 border-b-pink-400 border-l-transparent"
/>
<div className="absolute inset-[2px] rounded-full bg-white/20" />
</div>
{/* Text Branding */}
<span className="text-[9px] font-black uppercase tracking-[0.25em] bg-gradient-to-b from-white via-white/80 to-zinc-500 bg-clip-text text-transparent">
{label}
</span>
</div>
{/* 5. The "Glass Shimmer" - A sharp, fast light pass */}
<motion.div
initial={{ x: '-150%' }}
animate={{ x: '150%' }}
transition={{
repeat: Infinity,
duration: 1.5,
ease: "easeInOut",
repeatDelay: 4
}}
className="absolute inset-0 w-full h-full skew-x-[-30deg] bg-gradient-to-r from-transparent via-white/20 to-transparent pointer-events-none"
/>
</div>
</div>
)
}Source Code
soft-badge.tsx
'use client'
import React from 'react'
import { motion } from 'framer-motion'
export default function VelocitySoftBadge({ label = "Velocity UI" }) {
return (
<div className="relative inline-flex items-center justify-center group">
{/* 1. THE ATMOSPHERE: A soft, non-linear glow that lives behind the badge */}
<motion.div
animate={{
opacity: [0.4, 0.7, 0.4],
scale: [0.95, 1.05, 0.95]
}}
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
className="absolute inset-0 rounded-full bg-indigo-500/20 blur-xl group-hover:bg-indigo-500/30 transition-colors duration-700"
/>
{/* 2. THE CHASSIS: Frosted Obsidian Glass */}
<div className="relative px-4 py-1.5 rounded-full
bg-white/80 dark:bg-zinc-950/40
backdrop-blur-xl
border border-zinc-200/50 dark:border-white/[0.08]
flex items-center gap-2.5 overflow-hidden
shadow-[0_4px_16px_-4px_rgba(0,0,0,0.05)]">
{/* 3. THE "SOFT" CORE: A slow-moving internal light cloud */}
<motion.div
animate={{
x: ['-20%', '20%'],
y: ['-10%', '10%']
}}
transition={{ duration: 6, repeat: Infinity, ease: "easeInOut", repeatType: "mirror" }}
className="absolute inset-0 opacity-[0.15] dark:opacity-[0.25] pointer-events-none"
style={{
background: 'radial-gradient(circle, #8b5cf6 0%, transparent 70%)',
filter: 'blur(10px)'
}}
/>
{/* 4. BRANDING ARCHITECTURE */}
<div className="flex items-center gap-2 relative z-10">
{/* Soft Pulse Indicator */}
<div className="relative flex h-1.5 w-1.5">
<motion.span
animate={{ scale: [1, 2.5, 1], opacity: [0.5, 0, 0.5] }}
transition={{ duration: 3, repeat: Infinity }}
className="absolute h-full w-full rounded-full bg-indigo-400"
/>
<span className="relative h-1.5 w-1.5 rounded-full bg-indigo-500 shadow-[0_0_8px_rgba(99,102,241,0.6)]" />
</div>
{/* Typography: Soft Metallic Inked */}
<span className="text-[10px] font-black uppercase tracking-[0.25em]
bg-gradient-to-b from-zinc-800 to-zinc-500
dark:from-white dark:to-zinc-500
bg-clip-text text-transparent leading-none">
{label}
</span>
</div>
{/* 5. THE "SILK" SHIMMER: An ultra-faint, slow light pass */}
<motion.div
animate={{ x: ['-200%', '200%'] }}
transition={{
duration: 4,
repeat: Infinity,
ease: "easeInOut",
repeatDelay: 2
}}
className="absolute inset-0 w-full h-full bg-gradient-to-r from-transparent via-indigo-500/[0.05] dark:via-white/[0.03] to-transparent skew-x-[-20deg]"
/>
</div>
</div>
)
}Source Code
icon-badge.tsx
'use client'
import React from 'react'
import { Star } from 'lucide-react'
import { motion } from 'framer-motion'
export default function VelocityIconBadge({ label = "Featured", Icon = Star }) {
return (
<div className="relative inline-flex items-center group cursor-default">
{/* 1. Sub-surface Light Source (Light Mode: Soft Gold / Dark Mode: Deep Amber) */}
<div className="absolute inset-0 rounded-full bg-amber-400/10 blur-md opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
{/* 2. Main Badge Shell */}
<div className="relative px-3 py-1.5 rounded-full
bg-white dark:bg-[#080808]
border border-zinc-200 dark:border-white/10
flex items-center gap-2.5 overflow-hidden
shadow-[0_2px_8px_-2px_rgba(0,0,0,0.05)] dark:shadow-2xl">
{/* 3. The "Lens" - Icon Container */}
<div className="relative flex items-center justify-center w-4 h-4 rounded-full bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/10">
{/* Subtle Icon Glow */}
<motion.div
animate={{ opacity: [0.3, 0.6, 0.3] }}
transition={{ duration: 3, repeat: Infinity }}
className="absolute inset-0 bg-amber-400/20 blur-[2px] rounded-full"
/>
{/* The Icon - Precise & Static */}
<Icon size={10} className="relative z-10 text-amber-500 dark:text-amber-400 stroke-[2.5px]" />
{/* Rotating highlight ring around the icon */}
<motion.div
animate={{ rotate: 360 }}
transition={{ duration: 4, repeat: Infinity, ease: "linear" }}
className="absolute inset-[-1px] rounded-full border border-transparent border-t-amber-400/40"
/>
</div>
{/* 4. Branding Typography */}
<span className="text-[9px] font-black uppercase tracking-[0.25em]
bg-gradient-to-b from-zinc-950 via-zinc-800 to-zinc-600
dark:from-white dark:via-zinc-200 dark:to-zinc-500
bg-clip-text text-transparent leading-none">
{label}
</span>
{/* 5. Edge Trace Shimmer (The Velocity Signature) */}
<motion.div
initial={{ x: '-200%' }}
animate={{ x: '200%' }}
transition={{
repeat: Infinity,
duration: 2.2,
ease: [0.4, 0, 0.2, 1],
repeatDelay: 4
}}
className="absolute inset-0 w-full h-full skew-x-[-30deg] pointer-events-none"
style={{
background: 'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%)',
}}
/>
{/* 6. Precision "Glass" Cap (Top highlight) */}
<div className="absolute inset-x-3 top-0 h-[1px] bg-gradient-to-r from-transparent via-white/50 dark:via-white/20 to-transparent" />
</div>
</div>
)
}Source Code
count-badge.tsx
'use client'
import React from 'react'
import { motion, AnimatePresence } from 'framer-motion'
export default function VelocityMonolith({ count = 12, label = "Signals", color = "#0ea5e9" }) {
return (
<div className="relative inline-flex items-center gap-3 group select-none">
{/* 1. BRANDING LOCKUP */}
<div className="flex flex-col items-end">
<span className="text-[7px] font-black tracking-[0.4em] text-zinc-300 dark:text-zinc-700 uppercase leading-none pb-1">
Velocity UI
</span>
<div className="relative">
<span className="text-[9px] font-bold tracking-[0.1em] text-zinc-500 dark:text-zinc-500 uppercase leading-none">
{label}
</span>
{/* THE BEAM: A static, 0.5px surgical filament */}
<div
className="absolute -bottom-1.5 right-0 h-[1px] w-full"
style={{
background: `linear-gradient(90deg, transparent, ${color})`,
boxShadow: `0 1px 4px ${color}40`
}}
/>
</div>
</div>
{/* 2. THE VERTICAL MONOLITH (The Anchor) */}
<div className="w-[1.5px] h-6 bg-zinc-950 dark:bg-white" />
{/* 3. THE PAYLOAD (Big, Bold, Borderless) */}
<div className="relative flex items-baseline">
<AnimatePresence mode="popLayout" initial={false}>
<motion.span
key={count}
initial={{ opacity: 0, scale: 0.9, x: -5 }}
animate={{ opacity: 1, scale: 1, x: 0 }}
exit={{ opacity: 0, scale: 1.1, x: 5 }}
transition={{ duration: 0.2, ease: "circOut" }}
className="text-[20px] font-black font-mono text-zinc-950 dark:text-white tabular-nums leading-none tracking-tighter"
>
{count.toString().padStart(2, '0')}
</motion.span>
</AnimatePresence>
{/* Unit Indicator */}
<span className="ml-1 text-[8px] font-black text-zinc-400 dark:text-zinc-600 uppercase">
pts
</span>
</div>
{/* 4. TECHNICAL CROP MARK (Final Polish) */}
<div className="ml-2 flex flex-col gap-[3px] opacity-20">
<div className="w-1 h-1 bg-zinc-500 rounded-full" />
<div className="w-[1px] h-3 bg-zinc-500 mx-auto" />
</div>
</div>
)
}Source Code
status-badge.tsx
'use client'
import React from 'react'
import { motion } from 'framer-motion'
export default function VelocityMasterBeam({ status = "System Active", color = "#10b981" }) {
return (
<div className="relative inline-flex flex-col items-center group cursor-default">
{/* THE HOUSING */}
<div className="relative px-5 py-2 rounded-full
bg-white dark:bg-[#050505]
border border-zinc-200 dark:border-white/10
flex items-center gap-3 overflow-hidden">
{/* STATUS SENSOR */}
<div className="relative flex items-center justify-center">
<div className="absolute inset-0 blur-[4px] opacity-40" style={{ backgroundColor: color }} />
<div className="relative w-1.5 h-1.5 rounded-full" style={{ backgroundColor: color }} />
</div>
{/* TITANIUM TYPOGRAPHY */}
<span className="text-[10px] font-black uppercase tracking-[0.35em]
bg-gradient-to-b from-zinc-950 via-zinc-700 to-zinc-500
dark:from-white dark:via-zinc-200 dark:to-zinc-500
bg-clip-text text-transparent leading-none">
{status}
</span>
{/* THE ANAMORPHIC BEAM (The Star of the Show) */}
<div className="absolute bottom-0 left-0 right-0 flex justify-center">
<div
className="h-[1.5px] w-[65%] transition-all duration-700 ease-in-out group-hover:w-[85%]"
style={{
background: `linear-gradient(90deg, transparent, ${color}, transparent)`,
boxShadow: `0 -1px 6px ${color}60`
}}
/>
</div>
{/* SUBTLE INTERNAL LENS FLARE */}
<motion.div
initial={{ x: '-150%' }}
animate={{ x: '150%' }}
transition={{ duration: 4, repeat: Infinity, ease: "linear", repeatDelay: 1 }}
className="absolute inset-0 w-full h-full bg-gradient-to-r from-transparent via-white/[0.04] to-transparent skew-x-[-30deg]"
/>
</div>
{/* VELOCITY UI BRANDING */}
<div className="mt-2.5 flex items-center gap-2 opacity-30 group-hover:opacity-100 transition-all duration-500">
<span className="text-[7px] font-black uppercase tracking-[0.5em] text-zinc-500 dark:text-zinc-400">
Velocity UI
</span>
<div className="w-8 h-[1px] bg-gradient-to-r from-zinc-500/50 to-transparent" />
</div>
</div>
)
}Source Code
system-status-badge.tsx
'use client';
import { motion } from 'framer-motion';
export default function SystemStatusBadge() {
return (
<div className="flex flex-col items-center justify-center gap-6">
{/* Live Status */}
<div className="inline-flex items-center gap-2 px-3 py-1 bg-white dark:bg-black border border-neutral-200 dark:border-neutral-800 rounded-full shadow-sm hover:shadow-md transition-shadow cursor-default">
<span className="relative flex h-2 w-2">
<motion.span
animate={{ scale: [1, 1.5, 1], opacity: [0.5, 0, 0.5] }}
transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
className="absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
/>
<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
</span>
<span className="text-xs font-medium text-neutral-600 dark:text-neutral-300 tracking-wide uppercase">
Operational
</span>
</div>
{/* Beta Status */}
<div className="inline-flex items-center gap-2 px-3 py-1 bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800 rounded-full shadow-sm cursor-default">
<span className="text-xs font-bold text-blue-600 dark:text-blue-400 uppercase tracking-wider">
Beta
</span>
<div className="w-px h-3 bg-blue-200 dark:bg-blue-800" />
<span className="text-xs font-medium text-blue-700 dark:text-blue-300">
v2.0
</span>
</div>
{/* Busy Status */}
<div className="group inline-flex items-center gap-2 px-3 py-1 bg-neutral-900 dark:bg-white border border-transparent rounded-full shadow-lg cursor-pointer hover:scale-105 transition-transform">
<span className="relative flex h-2 w-2">
<span className="relative inline-flex rounded-full h-2 w-2 bg-red-500" />
</span>
<span className="text-xs font-medium text-white dark:text-black">
Busy
</span>
</div>
</div>
);
}
Props
Component property reference.
| Name | Type | Default | Description |
|---|---|---|---|
| label | string | undefined | Badge text label |
| variant | 'pill' | 'outline' | 'gradient' | 'soft' | 'icon' | 'count' | 'status' | 'pill' | Visual style of the badge |
| icon | ReactNode | undefined | Optional leading icon |
| count | number | 0 | Numeric count for count badge |
Context Worth Keeping In Orbit
Most components here are inspired by outstanding libraries and creators in the ecosystem. I don’t claim to be the original author — this is my space for learning, rebuilding, and understanding great work at a deeper level.
I’m still a student of the craft, constantly studying the best and translating what I learn through my own perspective. Every piece reflects curiosity, respect for the community, and small creative touches that feel true to me.
I’ve done my best to credit inspirations properly. If anything is missing or inaccurate, I truly appreciate a message so it can be corrected with care.