An email field that checks, works and confirms, the people already in, and a customer's words.
$ pnpm dlx shadcn@latest add @dashral/hero-signupWhen to use
- A hero that signs people up right there: an email field that checks, works and confirms.
- Waitlists, betas and newsletters, where the email is the whole conversion.
When not to use
- Products people want to see before they sign up: Split hero.
- Sign-ups that need more than an email, like a password or a plan: send them to Sign up, split.
Usage
Sign-up hero with your own data: every prop has the sample as its default, so pass only what you have.
import { HeroSignup } from "@/components/dashral/blocks/hero-signup"
<HeroSignup
title="Join the beta"
onSubmit={async (email) => {
await api.waitlist.join(email)
}}
customers={avatars}
quote={testimonial}
/>API reference
HeroSignup
A sign-up hero: the promise and an email field that answers (it checks the address, shows it's working, then confirms), the people already in, and a customer's words beside it. Every part comes from props; point onSubmit at your own sign-up.
| Prop | Type | Default |
|---|---|---|
title | React.ReactNode | sample |
description | React.ReactNode | sample |
cta | stringThe button's words. | "Get early access" |
onSubmit | (email: string) => Promise<void> | voidYour sign-up, with the address once it looks right. Resolve to say it's done; throw an Error to show its message under the field. Without it, the hero plays a sample. | — |
done | (email: string) => React.ReactNodeWhat it says once you're in, with the address. | sample |
customers | { name: string; src?: string }[]The people already in, their rating and how many; no customers hides the row. | sample |
rating | { score: number; label: string } | sample |
quote | { text: string; name: string; role: string; src?: string; facts?: { label: string; value: React.ReactNode }[] } | nullA customer's words beside it, with up to two figures under them; none hides the card. | sample |