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

A browser-framed dashboard that tilts up flat as you scroll, under a centred headline.

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

About Hero Dashboard

Hero Dashboard shows a browser-framed dashboard under a centred headline that tilts up flat as you scroll, the keynote reveal for analytics and SaaS products.

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

When to use Hero Dashboard

Analytics and BI products.
Fintech dashboards.
Admin and ops tools.
Enterprise SaaS homepages.

How it is built

The tilt is mapped to scroll progress, and the dashboard's numbers and donut chart animate as they arrive.

It is composed from Button, Number Ticker, Donut Chart, 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 Dashboard

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

Cinder template: Serious numbers, calmly presented.
Sable template: Enterprise security without the theatre.
Aperture template: Know what users do, and why.
Sentinel template: Know before your users do.
Tally template: Cards, receipts and budgets in one place.
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
Button: An animated React button with six variants, spring press feedback and a width-stable loading state
Number Ticker: An animated React number ticker: each digit rolls on its own wheel
Donut Chart: An animated React donut chart: segments draw in and thicken on hover

Install Hero Dashboard

npx shadcn@latest add @charcoal/hero-dashboard

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

Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.
Number Ticker: Each digit rolls on its own wheel to the new number, so changes read as motion instead of a flicker.
Donut Chart: Segments draw in one after another. Hover one to thicken it and read its value in the centre.

Hero Dashboard as Markdown