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

A headline whose last word rolls through options, an email capture and avatar social proof.

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

About Hero Rotating

Hero Rotating ends its headline with a word that rolls through options, so one line speaks to several audiences, above an email capture and avatar social proof with a rating.

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

When to use Hero Rotating

Products that serve several personas.
Newsletter and waitlist sign-ups.
Consumer apps and tools.
Light, minimal brand sites.

How it is built

The rotating word resizes smoothly so the sentence never jumps, the avatars fan out on hover, and the email field is a real form you connect to your list.

It is composed from Rotating Text, Button, Avatar Group, Rating, 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 Rotating

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

Relay template: Status updates that write themselves.
Tessera template: Every meeting, already written up.
Patchnote template: Release notes people actually read.
Off the Clock template: A home for a show and its listeners.
Paperclip template: Get paid faster, freelancer.
Sprout template: Coding classes kids beg to go to.
Commons template: Bring your members home.
Relaunch template: Announce the big new version.
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 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
Rotating Text: React rotating text that rolls between words letter by letter and resizes smoothly
Button: An animated React button with six variants, spring press feedback and a width-stable loading state
Avatar Group: Overlapping React avatars that fan apart on hover with names that spring up
Rating: An animated React star rating with hover preview and a ripple of popping stars

Install Hero Rotating

npx shadcn@latest add @charcoal/hero-rotating

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

Rotating Text: Cycles through words with a rolling letter-by-letter swap, and the container eases to each width.
Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.
Avatar Group: Overlapping avatars that fan apart on hover, with names that spring up above each one.
Rating: Star rating with a hover preview. Picking a score pops the stars in a ripple from the left.

Hero Rotating as Markdown