We're building something amazing. Sign up to get early access and exclusive updates.
We respect your privacy. Unsubscribe at any time.
Minimal centered hero with inline email input field and submit button for newsletter or waitlist signups. Perfect for coming-soon pages and early access campaigns.
Minimal centered hero built around a single-row email capture form: an icon-prefixed input and a submit button sit inline on wider screens and stack on mobile, with optional privacy fine print underneath.
Free block
This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.
Radix flavor
npx shadcn add "https://ui.beste.co/r/hero69"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/hero69"This installs the block to components/beste/block/hero69.tsx and the shadcn/ui badge, button, and input components it depends on.
The installed file exports hero69Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.
import { Hero69, hero69Demo } from "@/components/beste/block/hero69";
export default function Page() {
return <Hero69 {...hero69Demo} />;
}Then replace the demo with your own props. Written out, the same setup looks like this:
import { Hero69 } from "@/components/beste/block/hero69";
export default function Page() {
return (
<Hero69
badge={{ label: "Launching Soon", variant: "outline" }}
heading="Join the waitlist"
description="We open access in batches. Sign up now to get invited first."
inputPlaceholder="[email protected]"
buttonLabel="Join Waitlist"
privacyText="No spam. One email when your invite is ready."
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string; variant?: "default" | "secondary" | "outline" } | – | Badge above the heading |
heading | string | – | Main headline |
description | string | – | Supporting paragraph |
inputPlaceholder | string | – | Placeholder text of the email input |
buttonLabel | string | – | Submit button label |
privacyText | string | – | Fine print rendered under the form |
className | string | – | Extra classes for the outer <section> |
onSubmit only calls e.preventDefault(). There is no onSubmit prop or fetch call wired up; consumers must add their own submit handler to actually capture the entered address.Input is uncontrolled (no value/onChange in the component), so wiring it up requires a ref or wrapping the rendered form to read the field's value.flex-col) and switches to a single row at sm and above (sm:flex-row).left-3 top-1/2 -translate-y-1/2, independent of the inputPlaceholder text.Wiring the form up
This block ships the form markup only; state, validation, and submit are yours to add. Our guide wires the shadcn Field primitives to React Hook Form, TanStack Form, and Formisch on one field system.