Can I use a product photo instead?

Yes. Replace the drawn device with an image; the callouts and leader lines are positioned in percentages and keep working.

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

Hardware launch hero: a CSS-drawn product with spec callouts on leader lines and a finish picker.

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

About Hero Spec

Hero Spec presents a physical product the way launch pages do: a CSS-drawn device in the centre, spec callouts on dashed leader lines and a finish picker that recolours the product live, with the pre-order button and price below.

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

When to use Hero Spec

Consumer electronics and smart home devices.
Wearables and health hardware.
Crowdfunding campaigns.
Pre-order pages before product photography exists.

How it is built

The device is drawn in CSS as a tall speaker, a low puck or a camera body, so it scales to any size with no image. Callouts take a label, value and position, and finishes take a name and colour.

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 Spec

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

Halo template: One product, every angle.
Nocturne template: A bedside device that fixes your nights.
Nova template: Take pre-orders before you ship.
Kickstart template: Back the first production run.
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 Spec

npx shadcn@latest add @charcoal/hero-spec

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

Can I use a product photo instead?: Yes. Replace the drawn device with an image; the callouts and leader lines are positioned in percentages and keep working.
Does Hero Spec 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 Spec as Markdown