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

Newsletter signup that validates inline and confirms with a drawn check.

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

About CTA Newsletter

CTA Newsletter is a newsletter sign-up that validates inline and confirms with a drawn check.

It is a full-width cta 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 CTA Newsletter

Blog and content sites.
Product update lists.
Creator newsletters.
Waitlists.

How it is built

The form shows errors in place and Success Check confirms; connect onSubmit to your list.

It is composed from Button, Success Check, 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 Newsletter

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

Kiln template: Ship-ready docs-first dev tool page.
Vellum template: Find anything your team ever wrote.
Patchnote template: Release notes people actually read.
Atelier template: A gallery that happens to have a checkout.
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 Download: A React app download CTA with store buttons and a QR code for desktop
CTA Terminal: A developer React CTA with a copyable install command and a typing terminal
Button: An animated React button with six variants, spring press feedback and a width-stable loading state
Success Check: A React spinner that resolves into a drawn check or a shaking cross

Install CTA Newsletter

npx shadcn@latest add @charcoal/cta-newsletter

CTA Newsletter 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 Newsletter 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.
Success Check: A spinner that resolves into a drawn check, or into a cross that shakes once.

CTA Newsletter as Markdown