Badge
Inline label with a looping shimmer wave and spring entrance. Theme-aware by default, fully customisable with color overrides. Built with Framer Motion.
Live preview
Mark the beat — a New tag for launches, Beta when you're still tuning, Live once it's out the door.
Install
v0
Ship the registry bundle to v0 and iterate on motion or color with prompts.
Usage
Default export — see tile 05 for bgColor, waveColor, and packages.
import Badge from "@/components/ui/badge";
export function NewFeatureTag() {
return <Badge>New feature</Badge>;
}
// With custom colors
export function CustomBadge() {
return (
<Badge bgColor="#18181b" textColor="#fafafa" waveColor="rgba(255,255,255,0.12)">
Custom
</Badge>
);
}Dependencies
Registry peers — default export Badge.
children — required
Any React node rendered inside the badge. Wrapped in a relative z-10 span so it always sits above the shimmer layer.
className — optional
Merged onto the root motion.span. Use it to override size, border-radius, or spacing without touching the component source.
bgColor — optional
CSS color string applied as backgroundColor via inline style. When omitted the badge inherits bg-secondary from your theme.
textColor — optional
CSS color string applied as color via inline style. When omitted the badge inherits text-secondary-foreground from your theme.
waveColor — optional
Center stop of the shimmer gradient. Defaults to hsl(var(--foreground) / 0.06). Pass any CSS color — e.g. "rgba(255,255,255,0.15)" for light-on-dark badges.
framer-motion
Drives the spring scale-in on mount and the infinite looping shimmer sweep across the badge surface. Peer dependency — install separately.
shadcn registry
Only peer dependency is framer-motion.