CTA with sign-up

Start the sign-up right there: an email field that checks the address and turns into “check your inbox”, beside the product.

$ pnpm dlx shadcn@latest add @dashral/cta-signup

When to use

Starts the sign-up right there: an email field that turns into “check your inbox”, beside what you get.
Free plans and trials that begin with an email.

When not to use

Sales-led products where people talk to you first: CTA banner with Talk to sales.
Sign-ups that need a password or a plan up front: link to Sign up, split.

Usage

CTA with sign-up with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { CtaSignup } from "@/components/dashral/blocks/cta-signup"
2
3<CtaSignup
4  title="Try it free"
5  onSubmit={async (email) => {
6    await api.auth.sendMagicLink(email)
7  }}
8  points={benefits}
9/>

API reference

CtaSignup

A call to action that starts the sign-up right there: the promise and what you get beside the product itself, with an email field. A wrong address says so; a right one turns into "check your inbox". Every part comes from props; point onSubmit at your own sign-up.

Prop	Type	Default
`title`	`React.ReactNode`	`sample`
`description`	`React.ReactNode`	`sample`
`cta`	`string` The button's words.	`"Get started"`
`onSubmit`	`(email: string) => Promise<void> \| void` Your sign-up, with the address once it looks right. Resolve to show "check your inbox"; throw an Error to show its message under the field. Without it, the card plays a sample.	—
`points`	`string[]` What you get, one line each.	`sample`
`preview`	`{ label: string value: string change: string series: number[] figures: { label: string; value: string }[] note?: string }` The product in miniature beside it: a figure with its trend, a sparkline, three small figures and a note.	`sample`