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

Words rise out of a blur above a tilting product shot, with a logo marquee underneath.

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

About Hero Showcase

Hero Showcase raises its headline word by word out of a blur above a product shot that tilts toward the pointer, with a marquee of customer logos underneath.

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

When to use Hero Showcase

Product launches with strong visuals.
Hardware and app showcases.
SaaS homepages with a hero screenshot.
Design-led brands.

How it is built

Text Reveal, Tilt Card and Marquee do the work; replace the image, headline and logos through props.

It is composed from Text Reveal, Tilt Card, Marquee, 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 Showcase

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

Steep template: Loose-leaf, sold like it matters.
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
Text Reveal: A React text reveal: words rise out of a blur one after another as they scroll in
Tilt Card: A 3D tilt card for React that leans toward the pointer with a moving glare
Marquee: A CSS-only infinite React marquee with faded edges and pause on hover
Button: An animated React button with six variants, spring press feedback and a width-stable loading state

Install Hero Showcase

npx shadcn@latest add @charcoal/hero-showcase

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

Text Reveal: Words rise out of a blur one after another, when the text scrolls into view.
Tilt Card: Card that tilts toward the pointer in 3D with a moving glare. Lies flat for touch and reduced motion.
Marquee: CSS-only infinite marquee with faded edges. It pauses on hover and stops for reduced motion.
Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.

Hero Showcase as Markdown