Hero Buttons

Primary and secondary CTA buttons with animations, perfect for hero sections.

"use client";

import { HeroButtons } from "@/registry/sase/hero-buttons";

export function HeroButtonsDemo() {
  return (
    <div className="flex justify-center">
      <HeroButtons
        primaryHref="#get-started"
        primaryText="Get Started Free"
        secondaryHref="#demo"
        secondaryText="Watch Demo"
      />
    </div>
  );
}

Installation


pnpm dlx shadcn@latest add https://sase-ui.vercel.app/r/hero-buttons.json

Usage

import { HeroButtons } from "@/components/ui/hero-buttons";

<HeroButtons
  primaryHref="#get-started"
  primaryText="Get Started Free"
  secondaryHref="#demo"
  secondaryText="Watch Demo"
/>

Hero Badge Lens

On This Page

Installation Usage