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

Mobile app hero: a phone with live UI, floating notification cards and store buttons.

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

About Hero App

Hero App presents a mobile app: a phone with live UI, floating notification cards and App Store and Google Play buttons, with a rating for trust.

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

When to use Hero App

Mobile app launches.
Consumer and lifestyle apps.
Fitness, finance and social apps.
App download campaigns.

How it is built

The phone screen is real markup driven by a screen prop, so the same hero can show a recipe planner, a savings balance or a language lesson, and the two floating cards take their own text. They float on gentle springs that stop under reduced motion.

It is composed from 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 App

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

Hearth template: A home for your app launch.
Vault template: Save without thinking about it.
Lingo template: Speak a new language in 15 minutes a day.
Pilot template: Recruit your first beta testers.
Pocket template: Launch an app, get the downloads.
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
Rating: An animated React star rating with hover preview and a ripple of popping stars

Install Hero App

npx shadcn@latest add @charcoal/hero-app

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

Rating: Star rating with a hover preview. Picking a score pops the stars in a ripple from the left.

Hero App as Markdown