The call-to-action section is the block a page has been building toward, and it is usually the one written last and least. What sits there on most sites is a heading that repeats the hero, a paragraph nobody reads, and a button labelled "Get started" - three elements that together say less than the hero already did.
50 public components on 21st have "cta" in the name. The layouts are easy. What the block has to earn is a second ask.
The shapes
The band. Full width, contrasting background, heading and one button. CTA 3 by Efferd is the plain version and it is the right default: nothing competes with the action.
The card. Call to Action (CTA) by Kavi Katiyar sits inside the page's rhythm rather than breaking it, which suits a section boundary rather than the end of the page.
The one with something moving. CTA with Text Marquee and CTA with Marquee by lyanchouss, and cta section with gallery by youcefbnm, put a marquee or a gallery behind the ask.
The countdown. The Future Arrives Soon CTA by shadway is the deadline version, and the rule from the waitlist guide applies: only ship a timer if the date is real, because one that resets loses everyone who saw it.
What makes it work
The same action as the hero. The landing page guide makes this the rule for the whole page: one action, repeated. The final CTA is the repetition, not a new offer.
A reason that was not available at the top. The reader has now seen the demo, the price and the objections. The closing ask can reference what they just read - "start with the free tier, no card" - in a way the hero could not, because at the hero they did not know what the free tier was.
One button. Two of equal weight halves the response to both. If a secondary route matters, make it a text link.
Remove the risk in a line. No card, cancel anytime, works with your existing stack. That sentence does more than any layout choice in this section.
Nothing after it except the footer. A CTA followed by three more sections is not a call to action, it is a pause.
What to avoid
A heading that repeats the hero verbatim. Copy that could belong to any product, which is the tell the not-generated guide names. And an animated background that makes the button harder to read - the glass guide has the contrast argument, and it applies most sharply to the one element on the page you want pressed.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| shadcn/ui | The button and the typography underneath | No section |
| Tailwind Plus | Conventional bands with the breakpoints decided | Paid, and shared with everyone using it |
| 21st | Bands, cards, marquee and countdown variants | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.
Frequently asked
- What should the final CTA say?
- The same action as the hero, with a reason that was not available at the top. The reader has now seen the demo, the price and the objections, so the closing ask can reference what they just read in a way the hero could not.
- Should a CTA section have two buttons?
- No. Two actions of equal weight halve the response to both. Pick the primary and make any secondary route a plain text link, which is the same rule that applies to the hero.
- What is the highest-value line in a CTA?
- The one that removes the risk: no card required, cancel anytime, works with your existing stack. That sentence does more than any layout or animation choice in the section.
- Is a countdown timer a good idea in a CTA?
- Only if the deadline is real. A timer that resets when it reaches zero is visible to anyone who returns, and it costs the trust of everyone who already saw it.