Components
An animated badge with radial gradient hover effect and an animated arrow path. Perfect for announcements and CTAs.
npx shadcn@latest add https://21st.dev/r/aceternity/badgeLoading preview...
"use client";
import React from "react";
import { Badge } from "../components/ui/badge";
export default function BadgeDemo() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-black p-8">
<div className="flex flex-col items-center gap-6">
<Badge text="New components every week →" href="#" />
<Badge text="🎉 Join 10k+ developers" href="#" />
<Badge text="Build faster with UI kit" href="#" />
</div>
</div>
);
}