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

Developer-tool hero: beams on a grid, and a terminal that types your install and dev commands.

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

About Hero Terminal

Hero Terminal is built for developer tools: beams of light run along a grid while a terminal types your install and dev commands, so visitors see exactly how to start.

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

When to use Hero Terminal

CLIs, SDKs and APIs.
Open-source projects.
Infrastructure and cloud tools.
Developer documentation homepages.

How it is built

The terminal plays a list of commands and outputs once it scrolls into view, the beams are CSS, and the copy button grabs the install command.

It is composed from Grid Beams, Terminal, Button, Copy 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 Terminal

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

Kiln template: Ship-ready docs-first dev tool page.
Runway template: Push to deploy, in every region.
Keystone template: Login, done in an afternoon.
Terminus template: A terminal with taste.
Payline template: Accept money anywhere with one API.
Forkcamp template: From zero to hired in 16 weeks.
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 Showcase: A React product showcase hero with a revealing headline, tilting shot and logo marquee
Grid Beams: A React grid background with beams of light running along its lines
Terminal: An animated React terminal that types commands and prints output on scroll
Button: An animated React button with six variants, spring press feedback and a width-stable loading state
Copy Button: A React copy button whose icon blurs into a drawn check, then swaps back

Install Hero Terminal

npx shadcn@latest add @charcoal/hero-terminal

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

Grid Beams: A faint grid with ember beams of light running along its lines.
Terminal: Types out commands character by character and prints their output, starting when it scrolls into view.
Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.
Copy Button: The copy icon blurs into a check that draws itself, then swaps back.

Hero Terminal as Markdown