Getting Started
Templates
Components
A full-screen call-to-action section featuring a dramatic meteor animation that falls from above and expands into a glowing gradient backdrop. Includes floating particles, gradient text, and customizable content.
Key Features:
import { CTAMeteor } from "@/components/ui/cta-meteor"
export default function Example() {
return (
<CTAMeteor
badge="Limited Time Offer"
title="Launch your product\nin **minutes** not days"
description="Get started with our all-in-one platform."
primaryButtonText="Start Free Trial"
secondaryButtonText="Book a Demo"
backgroundText="yourcompany"
onPrimaryClick={() => router.push("/signup")}
onSecondaryClick={() => setShowModal(true)}
/>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | string | "Ready to get started?" | Badge text above the title |
badgeIcon | React.ReactNode | <BadgeCheck /> | Icon in the badge |
title | string | "Transform your workflow\nwith **AI-powered** solutions" | Title with optional **underline** |
description | string | (default text) | Description paragraph |
primaryButtonText | string | "Get Started Free" | Primary button label |
secondaryButtonText | string | "Schedule Demo" | Secondary button label |
backgroundText | string | "syntorio" | Large gradient text at bottom |
onPrimaryClick | () => void | undefined | Primary button click handler |
onSecondaryClick | () => void | undefined | Secondary button click handler |
className | string | undefined | Additional CSS classes |
Use double asterisks to create underlined text emphasis in the title:
title="Ship products **faster** than ever"
// "faster" will be underlined with a white barMultiple underlines are supported:
title="Build **better** products **faster**"30 floating particles animate continuously:
min-h-screen)