Does Hero Waitlist work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Hero Waitlist

Launch waitlist with a countdown, sonar rings and an email form that confirms in place.

Type: Hero section
Styles: Minimal, Dark
Licence: Charcoal UI Pro

About Hero Waitlist

Hero Waitlist is a launch page in one section: a countdown to launch, sonar rings pulsing behind it and an email form that confirms in place.

It is a full-width hero section for React and Tailwind CSS 4, in a minimal and dark style. Preview it at any width above, then install it with one command.

When to use Hero Waitlist

Pre-launch waitlists.
Beta and early-access sign-ups.
Event registrations.
Product teasers.

How it is built

The countdown rolls its digits, the rings are CSS, and the form swaps to a confirmation without a page change.

It is composed from Ripple Rings, Countdown, Button, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with Hero Waitlist

Hero Waitlist is part of 2 full templates, so you can see it in a finished page.

Flint template: Collect your first thousand emails.
Stealth template: Say little. Collect emails.
Hero Ember: A dark React hero section with drifting embers, an announcement pill and two CTAs
Hero Split: A split React hero: copy on the left, a live product window with stats and a chart
Hero Rotating: A React hero with a rotating headline word, email capture and avatar proof
Hero Terminal: A developer React hero with light beams on a grid and a typing terminal
Ripple Rings: React ripple rings: sonar rings pulsing from a centre for live or searching states
Countdown: An animated React countdown timer whose digits roll as they tick
Button: An animated React button with six variants, spring press feedback and a width-stable loading state

Install Hero Waitlist

npx shadcn@latest add @charcoal/hero-waitlist

Hero Waitlist is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does Hero Waitlist work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Built from

Ripple Rings: Sonar-style rings pulsing out from a centre, for searching, live or empty states.
Countdown: Days, hours, minutes and seconds, with each digit rolling down as it ticks.
Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.

Hero Waitlist as Markdown