Does Hero Before After 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 Before After

Photo tool hero where visitors drag a divider to compare the raw shot with the enhanced one.

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

About Hero Before After

Hero Before After lets the product prove itself: visitors drag a divider across one photo to compare the raw version with the improved one, under a clear headline, two buttons and three quick stats.

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

When to use Hero Before After

Photo editing and AI enhancement apps.
Retouching and restoration services.
Renovation and interior design.
Any product with a visible result.

How it is built

Image Compare handles pointer and keyboard dragging, the before image is styled with CSS filters so one photo is enough, and labels, stats and buttons are props.

It is composed from Button, Image Compare, 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 Before After

Hero Before After is part of a full template, so you can see it in a finished page.

Lumi template: Drag the slider, buy the app.
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
Image Compare: A React before and after image comparison slider you can drag anywhere

Install Hero Before After

npx shadcn@latest add @charcoal/hero-before-after

Hero Before After 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 Before After 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.
Image Compare: Before/after split you can drag anywhere. The handle also works with the arrow keys.

Hero Before After as Markdown