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

Centred headline over drifting embers, with an announcement pill, two calls to action and a copyable install command.

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

About Hero Ember

Hero Ember centres your headline over drifting embers with an announcement pill above it, two calls to action below and a copyable install command. It is built to make a product launch feel warm and confident in the first second.

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

When to use Hero Ember

Launching a developer tool or SDK.
AI and SaaS product homepages.
Open-source project sites with an install command.
Product announcements that need a bold first screen.

How it is built

The ember field runs on a canvas behind the copy and pauses off screen, the smoke layer is pure CSS, and the install command uses the copy button with its drawn check. Headline, pill and buttons are plain props.

It is composed from Ember Field, Smoke, Button, Copy 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 Ember

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

Ember template: An AI product site that glows.
Tidepool template: Postgres that scales to zero and back.
Hexwork template: The framework, and the people behind it.
Manifest template: Turn launch day into a sales day.
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
Hero Showcase: A React product showcase hero with a revealing headline, tilting shot and logo marquee
Ember Field: An animated React ember background: glowing embers drift up and flicker as they cool
Smoke: A slow React smoke background: blurred plumes drifting over dark sections, CSS only
Button: An animated React button with six variants, spring press feedback and a width-stable loading state
Copy Button: A React copy button whose icon blurs into a drawn check, then swaps back

Install Hero Ember

npx shadcn@latest add @charcoal/hero-ember

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

Ember Field: Canvas embers drifting up from the bottom edge, flickering as they cool. The Charcoal UI signature.
Smoke: Slow, blurred smoke plumes drifting over charcoal. Pure CSS transforms, so it stays cheap.
Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.
Copy Button: The copy icon blurs into a check that draws itself, then swaps back.

Hero Ember as Markdown