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

Sign-up CTA as a three-step mini wizard, so visitors arrive half onboarded.

Type: CTA section
Styles: Light, Enterprise
Licence: Charcoal UI Pro

About CTA Steps

CTA Steps turns sign-up into three quick questions: email, team name and role. A step indicator shows progress, each step validates before moving on, and the last screen confirms the workspace is ready.

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

When to use CTA Steps

SaaS free trials.
Matching services that ask a few questions.
Course and coaching sign-ups.
Beta and waitlist invites.

How it is built

Steps slide in and out, inputs use Input with hints, and the role options are a prop so the last step fits your audience.

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

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

Quill template: Ask your data, get answers.
Tessera template: Every meeting, already written up.
Cadence template: Book meetings without the back-and-forth.
Townhall template: Sessions people register for.
Tally template: Cards, receipts and budgets in one place.
Nourish template: A coach in your pocket, a plan on your plate.
Sprout template: Coding classes kids beg to go to.
Manifest template: Turn launch day into a sales day.
Pilot template: Recruit your first beta testers.
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
Input: An animated React text input with icons, a shake-once error and a success check that draws in
Steps: Animated React steps for multi-step flows: filling connectors and drawn checks

Install CTA Steps

npx shadcn@latest add @charcoal/cta-steps

CTA Steps 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 Steps 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.
Input: Text field with a visible label, optional icons, an error that shakes once, and a success check that draws in.
Steps: Progress through a multi-step flow: connectors fill, finished steps draw a check, and the current one pulses ember.

CTA Steps as Markdown