An animated badge with radial gradient hover effect and an animated arrow path. Perfect for announcements and CTAs.
"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> ); }
Part of Aceternity UI — browse the full library on 21st.dev.