Does CTA 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.

CTA Terminal

Developer CTA with a copyable install command beside a terminal that runs it.

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

About CTA Terminal

CTA Terminal closes a developer page with the one thing developers want: the command. A copyable command bar sits next to a terminal that types it and shows the result, with a primary button and a link to the docs.

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

When to use CTA Terminal

CLIs, SDKs and APIs.
Deploy and database platforms.
Open-source frameworks.
Terminal and desktop dev apps.

How it is built

Uses Terminal and Copy Button. The command, the terminal lines and the docs label are props.

It is composed from Button, Copy Button, Terminal, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with CTA Terminal

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

Lane template: Catch the bug in review, not in prod.
Runway template: Push to deploy, in every region.
Tidepool template: Postgres that scales to zero and back.
Keystone template: Login, done in an afternoon.
Terminus template: A terminal with taste.
Payline template: Accept money anywhere with one API.
CTA Ember: A React closing CTA band with rising embers and a shimmering button
CTA Landscape: A React CTA card with a moonlit photo, metal headline and liquid-metal button
CTA Newsletter: A React newsletter CTA that validates inline and confirms with a drawn check
CTA Download: A React app download CTA with store buttons and a QR code for desktop
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
Terminal: An animated React terminal that types commands and prints output on scroll

Install CTA Terminal

npx shadcn@latest add @charcoal/cta-terminal

CTA 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 CTA 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

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.
Terminal: Types out commands character by character and prints their output, starting when it scrolls into view.

CTA Terminal as Markdown