Badge

CTAs 78

About

An animated badge with radial gradient hover effect and an animated arrow path. Perfect for announcements and CTAs.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Badge to your project and fits it to your theme.

Code

How Badge is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}