Depth Stack Hero
Heroes
Source and install need .
pnpm dlx shadcn@latest add @assembli/signup-heroSignup Hero
Split SaaS hero with an inline email signup: announcement pill, headline and copy over a form that validates on submit (the field shakes and explains), shows a spinner while your handler runs, then morphs into a check-your-inbox card. Avatars and a rating add proof. Beside it, a product window shows a doc edited live: a teammate's cursor types, a task ticks off, a sync toast slides in.
Props
Other props pass through to the root element.
announcement
{ tag?: string; label: string; href: string }
The pill above the headline, e.g. { tag: "New", label: "Offline sync is here", href: "/blog/sync" }.
title*
React.ReactNode
description
React.ReactNode
onSubmit
(email: string) => void | Promise<void>
Called with a valid address. Throw (or reject) with a message to show it under the field.
cta
string
Default
"Get started"placeholder
string
Default
"you@company.com"finePrint
React.ReactNode
Small print under the form, e.g. "Free for up to 5 people · No card required".
proof
{ people: SignupHeroPerson[]; rating?: number; label: React.ReactNode }
Avatars and a line of social proof under the form.
visual
React.ReactNode
The product picture on the right. Defaults to a live collaborative editor (see EditorPreview).
accent
string
Default
"oklch(0.58 0.2 262)"Accent for the button, focus glow and the preview, as any CSS color.
| Description | |||
|---|---|---|---|
| announcement | { tag?: string; label: string; href: string } | – | The pill above the headline, e.g. { tag: "New", label: "Offline sync is here", href: "/blog/sync" }. |
| title* | React.ReactNode | – | |
| description | React.ReactNode | – | |
| onSubmit | (email: string) => void | Promise<void> | – | Called with a valid address. Throw (or reject) with a message to show it under the field. |
| cta | string | "Get started" | |
| placeholder | string | "you@company.com" | |
| finePrint | React.ReactNode | – | Small print under the form, e.g. "Free for up to 5 people · No card required". |
| proof | { people: SignupHeroPerson[]; rating?: number; label: React.ReactNode } | – | Avatars and a line of social proof under the form. |
| visual | React.ReactNode | – | The product picture on the right. Defaults to a live collaborative editor (see EditorPreview). |
| accent | string | "oklch(0.58 0.2 262)" | Accent for the button, focus glow and the preview, as any CSS color. |
