A large rounded card with a flowing gradient border, floating shapes, a gradient headline and an inline email form with a success state.
Joined by 18,000 product teams
Plan sprints, track releases and share progress with stakeholders without another status meeting. Free for teams up to ten.
No credit card required. Unsubscribe in one click.
npx shadcn@latest add https://hyperblur.dev/r/cta-gradient-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cta-gradient-card.tsx.
import { CtaGradientCard } from "@/components/hyperblur/cta-gradient-card"
<CtaGradientCard onSubmit={async (email) => console.log(email)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Joined by 18,000 product teams" | Pill with avatars above the title. Empty hides it. |
| title | string | "Your roadmap, finally in one calm place" | Headline. The last three words get the gradient. |
| subtitle | string | Paragraph under the headline. | |
| placeholder | string | "you@company.com" | Email input placeholder. |
| buttonLabel | string | "Get early access" | Submit button text. |
| successMessage | string | Shown in place of the form after a successful submit. | |
| note | string | "No credit card required. Unsubscribe in one click." | Small line under the form. Empty hides it. |
| onSubmit | (email: string) => void | Promise<void> | Called with the email. A rejected promise keeps the form open. | |
| accent | string | "#a855f7" | First gradient color. |
| accent2 | string | "#f97316" | Second gradient color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |