Does the QR code show on phones?

No. Phones see the App Store and Google Play buttons, which is what they can use. Wide screens add a QR code that points at your store link, so desktop visitors can scan it with their phone and install in one step.

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

App download card with store buttons and a QR code for desktop visitors.

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

About CTA Download

CTA Download is an app download card with store buttons and a QR code for desktop visitors to scan.

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

When to use CTA Download

Mobile app sites.
Companion app promotions.
Event apps.
Retail apps.

How it is built

Store links and the QR target are props; the QR only shows on wide screens.

It has no component dependencies beyond the shared utilities, so it is one file to read and change.

Goes well with CTA Download

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

Hearth template: A home for your app launch.
Lumi template: Drag the slider, buy the app.
Fixwell template: Book a pro in two minutes.
Vault template: Save without thinking about it.
Breathe template: Ten quiet minutes a day.
Lingo template: Speak a new language in 15 minutes a day.
Pocket template: Launch an app, get the downloads.
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 Terminal: A developer React CTA with a copyable install command and a typing terminal

Install CTA Download

npx shadcn@latest add @charcoal/cta-download

CTA Download 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 the QR code show on phones?: No. Phones see the App Store and Google Play buttons, which is what they can use. Wide screens add a QR code that points at your store link, so desktop visitors can scan it with their phone and install in one step.
Does CTA Download 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 Download as Markdown