Does Hero Event 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 Event

Conference hero with a split-flap board of cities and dates, a live countdown and the speaker line-up.

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

About Hero Event

Hero Event announces a conference like a departures board: cities and dates flip through on split-flap tiles, a live countdown ticks to the first day, and the speaker line-up sits under the ticket button.

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

When to use Hero Event

Conferences and summits with several cities.
Product launch nights.
Meetups and community events.
Limited drops and release days.

How it is built

Split Flap and Countdown handle the motion, the stops cycle every few seconds, and every label, from the tour line to the button, is a prop.

It is composed from Avatar Group, Button, Countdown, Split Flap, 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 Event

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

Dropline template: Built for the hour everything sells out.
Signal template: Sell out a conference.
Launch Night template: One evening, one RSVP.
Gather template: Monthly meetups, sorted.
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
Avatar Group: Overlapping React avatars that fan apart on hover with names that spring up
Button: An animated React button with six variants, spring press feedback and a width-stable loading state
Countdown: An animated React countdown timer whose digits roll as they tick
Split Flap: A React split-flap display: every cell flips through the drum to its letter

Install Hero Event

npx shadcn@latest add @charcoal/hero-event

Hero Event 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 Event 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

Avatar Group: Overlapping avatars that fan apart on hover, with names that spring up above each one.
Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.
Countdown: Days, hours, minutes and seconds, with each digit rolling down as it ticks.
Split Flap: Airport departure board: every cell flips through the drum until it lands on its letter.

Hero Event as Markdown