Library

Badge Hero

Badge Hero

Clean SaaS-style hero with an animated announcement badge pill at the top, staggered text entrance, and subtle radial gradient. Perfect for product landing pages.

herobadgeannouncementSaaS

Installation

bash
# Copy badge-hero.tsx to your project
cp components/ui/badge-hero.tsx your-project/components/ui/badge-hero.tsx

How to use

tsx
import { BadgeHero } from "@/components/ui/badge-hero";
tsx
<BadgeHero
  badge="New: Version 2.0 just launched"
  badgeHref="/changelog"
  heading={<>Build products<br />users love</>}
  subheading="The modern way to ship beautiful software."
>
  <button className="px-6 py-3 bg-zinc-900 text-white rounded-lg">Get Started</button>
  <button className="px-6 py-3 text-zinc-600">Learn more</button>
</BadgeHero>

Dependencies

framer-motion

Exports

BadgeHero

File

components/ui/badge-hero.tsx
Preview
New: Version 2.0 just launched

Build products that
users actually love

The modern toolkit for shipping beautiful, performant software. Start in minutes, scale to millions.

Made with