Charcoal UI

Hero Diff

Dev tool hero: a pull request diff that a reviewer bot flags, comments on and merges.

  • Type: Hero section
  • Styles: Dark, Enterprise
  • Licence: Charcoal UI Pro

About Hero Diff

Hero Diff tells a developer story in three beats: a pull request diff appears, a reviewer bot highlights the risky line and comments with a fix, then the PR is approved and merged. It is the fastest way to show what a code tool actually does.

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 Diff

  • AI code review and testing tools.
  • Static analysis and security scanners.
  • CI and deploy platforms.
  • Developer agencies.

How it is built

Diff lines are data with +, - or unchanged markers, the comment and merged badge animate in on a timer, and reduced motion shows the final state straight away.

It is composed from Button, 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 Diff

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

  • Lane template: Catch the bug in review, not in prod.
  • 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

Install Hero Diff

npx shadcn@latest add @charcoal/hero-diff

Hero Diff 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 Diff 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.

Hero Diff as Markdown