Hero Split
Copy on the left, a live product window on the right with a stat card and a chart that draw themselves in.
- Type: Hero section
- Styles: Dark, Enterprise
- Licence: Charcoal UI Pro
About Hero Split
Hero Split puts your pitch on the left and a live product window on the right, where a stat card counts up and a chart draws itself in. It shows the product working instead of describing it.
It is a full-width hero section for React and Tailwind CSS 4, in a dark and enterprise style. Preview it at any width above, then install it with one command.
When to use Hero Split
- B2B SaaS and analytics products.
- Dashboards and internal tools.
- Fintech and reporting platforms.
- Enterprise landing pages.
How it is built
An aurora in your accent colour glows behind the window, the stat card and bar chart animate as they enter view, and the layout stacks on mobile. Pass an image and a badge instead and the window becomes a photo with a pinned card, for clinics, shops and services without an app to show.
It is composed from Aurora, Button, Stat Card, Bar 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 Split
Hero Split is part of 14 full templates, so you can see it in a finished page.
- Meridian template: The CRM for teams under fifty.
- Cadence template: Book meetings without the back-and-forth.
- Fieldwork template: Senior engineers, on retainer.
- Roastery template: Build a box, save every delivery.
- Fade template: Book a chair, skip the wait.
- Brightside template: A dentist people don't dread.
- Townhall template: Sessions people register for.
- Harbor template: Payroll in ten minutes a month.
- Canopy template: Insurance explained in plain English.
- Rota template: Shift planning, built by nurses.
- Nourish template: A coach in your pocket, a plan on your plate.
- Kindred template: Find a therapist you actually click with.
- Cohort template: Sell a course like a creator.
- Campfire template: Group chat that stays readable.
- Hero Ember: A dark React hero section with drifting embers, an announcement pill and two CTAs
- 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
- Aurora: An animated React aurora background: soft light bands drifting across a section
- Button: An animated React button with six variants, spring press feedback and a width-stable loading state
- Stat Card: A React KPI stat card with a counting number, delta pill and drawn sparkline
- Bar Chart: An animated React bar chart that springs up in sequence with an accessible table
Install Hero Split
npx shadcn@latest add @charcoal/hero-splitHero Split 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 Split 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
- Aurora: Warm aurora bands drifting across the top of a section, fading into the page below.
- Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.
- Stat Card: KPI card whose number counts up as it enters view, with a delta pill and a sparkline that draws itself.
- Bar Chart: Bars spring up in sequence when the chart enters view, show a value on hover, and keep a screen-reader table underneath.