Almost every landing page is made of the same nine blocks in roughly the same order, and that is not a failure of imagination. The order matches the sequence of questions a reader asks: what is this, does it work, who else uses it, what does it cost, what do I do next. A page that answers them out of order feels wrong for reasons the reader cannot name.
Here is the sequence, the component for each block, and the two rules about how many of them a page should have.
The nine
1. The hero. What this is and why to keep reading. Shape Landing Hero by kokonutd and Scroll media expansion hero by Arunachalam are two ends of the range, and the hero guide is the long version.
2. The logo wall. Proof by association, in one strip. Logos 3 from Shadcnblocks.com. Only if the logos are real and recognisable; four unknown ones read as a page with nothing to show.
3. The problem. One paragraph naming what is broken. The block most often skipped and the one that makes the rest land.
4. The features. What it does, shown rather than listed. Bento Product Features by Kavi Katiyar and the bento guide cover the layout that carries priority.
5. The demo. The single highest-converting block on most pages, and the one that takes longest to make: the product doing the thing, as a video, a loop or a live embed.
6. Testimonials. Testimonials Columns by Efferd. Named people with specific claims, per the testimonial guide.
7. Pricing. Even when the answer is "free". A page without a price is a page the reader has to email about, and most will not.
8. FAQ. The objections, in the reader's words. It also carries structured data, which the FAQ guide covers.
9. The final call to action. The same action as the hero, repeated after the argument. Motion Footer by Hossain Jahed is where it usually sits.
The two rules about how many
Fewer than nine. The list is a menu, not a checklist. A page with a weak logo wall, three testimonials from unnamed people and a features grid of generic claims is worse than a page with a hero, a demo and a price. Every block you cannot fill honestly is a block that teaches the reader to skim.
One action, repeated. The hero, the middle and the footer should ask for the same thing. Two competing actions on a landing page - "start free" and "book a demo" with equal weight - halve the response to both. Pick the primary, and make the other a text link.
What actually moves the number
Three things, in order of effect, and none of them are a section.
Specificity. "Cut deploy time from 12 minutes to 90 seconds" outperforms "ship faster", because it is checkable. This is the same rule the testimonial guide applies to quotes, and it applies to every headline on the page.
The demo. Showing the product beats describing it by a wide margin, and a 20-second loop beats a two-minute walkthrough.
Load time. A landing page that takes four seconds on a phone has lost readers before any of the nine blocks render. The hero guide covers the three usual causes, and they are almost always a video, a font and an animation library.
The technical part nobody checks
A landing page assembled from a catalogue tends to accumulate three problems. Several sections each pull their own animation runtime, so the page carries two. Every section is a client component, so nothing renders on the server and the HTML arrives nearly empty. And the H1 ends up inside a hero component that ships an H2, or three sections each ship their own H1.
All three are ten-minute checks after assembly: read the bundle, view source, and search the HTML for <h1.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| Templates | The whole page, assembled and coherent | Someone else's structure |
| Tailwind Plus | Conventional marketing sections with breakpoints solved | Paid, and shared with everyone using it |
| The animated registries | One or two sections that need personality | Their runtime comes with them |
| 21st | Individual sections with previews, from every registry | 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. The 21st MCP covers the same ground without leaving the editor: ask Claude, Cursor or Codex for a section, get the previews inline, and let the agent write the file.
Browse landing page components →
Frequently asked
- What sections does a landing page need?
- Nine at most, in the order the reader's questions arrive: hero, logo wall, the problem, features, a demo, testimonials, pricing, FAQ and a final call to action. It is a menu rather than a checklist, and a page with three honest blocks beats one with nine half-filled ones.
- Should a landing page have more than one call to action?
- One action, repeated. Hero, middle and footer should ask for the same thing. Two competing actions with equal weight, like start free next to book a demo, reduce the response to both. Pick the primary and make the other a plain text link.
- What actually improves a landing page's conversion?
- Specificity, a demo, and load time, in that order and none of them a section. A checkable claim outperforms a vague one, a twenty-second product loop outperforms two minutes of description, and a page that takes four seconds on a phone has lost readers before any section renders.
- What goes wrong when a page is assembled from a catalogue?
- Three things, all ten-minute checks. Several sections each pull their own animation runtime, so the page carries two. Every section is a client component, so the HTML arrives nearly empty. And the heading structure breaks, with three sections each shipping an h1 or the real headline demoted to an h2.