A light split call to action: a short signup form on the left and, on the right, a tilted app window that rebuilds itself as you type, with the workspace URL, initials avatar, seat count, price and owner row updating live.
Takes about 30 seconds
Name it, pick a team size and invite yourself. The preview updates as you type, and everything you see is ready the moment you press create.
Welcome aboard · day 1
npx shadcn@latest add https://hyperblur.dev/r/cta-live-preview-form.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cta-live-preview-form.tsx.
import { CtaLivePreviewForm } from "@/components/hyperblur/cta-live-preview-form"
<CtaLivePreviewForm onSubmit={async (data) => console.log(data)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Takes about 30 seconds" | Line above the headline. |
| title | string | Headline. | |
| subtitle | string | Paragraph under the headline. | |
| domain | string | "hollowpine.app" | Domain appended to the workspace slug. |
| sizes | { label: string; seats: number }[] | 4 sizes | Team size options and the seat count each one previews. |
| pricePerSeat | number | 9 | Monthly price per seat used for the estimate. |
| currency | string | "USD" | ISO currency for the estimate. |
| buttonLabel | string | "Create workspace" | Submit button text. |
| defaultWorkspace | string | "Northwind Labs" | Starting workspace name. |
| defaultEmail | string | "" | Starting email. |
| onSubmit | (data: { workspace: string; size: string; email: string }) => void | Promise<void> | Called with the form values. A rejected promise shows an error. | |
| accent | string | "#4f46e5" | Focus, meter and badge color. |
| className | string | "" | Extra classes for the root element. |
| style | CSSProperties | Inline styles merged after the accent variables. |