A hero section has one job: make the next scroll feel worth it. Everything else people argue about, the gradient, the mesh, the word "revolutionise", is downstream of whether the first screen answers what this is and why you would keep reading.
There are 476 public components on 21st with "hero" in the name, which is more a symptom than a boast: it is the one section every project rebuilds and nobody reuses. What follows is the patterns that actually recur across them, with the components the community bookmarked most, so you can take a working one instead of starting from an empty file.
Scroll-driven: the hero that is also the transition
The most-saved hero on 21st is not a static layout at all. Scroll media expansion hero by Arunachalam has 8,688 bookmarks: a media panel that expands as you scroll, so the hero becomes the transition into the page rather than a thing you scroll past.
Scroll Morph Hero by Prashant Som (4,616) does the same trick with shape morphing, and Smooth Scroll Hero by Shamsu Musthafa takes the calmer version, where the parallax does the work and nothing resizes.
The reason this pattern wins bookmarks is that it solves the fold problem: instead of guessing what fits above 800px, you let the first gesture reveal the rest. The reason to be careful with it is that scroll hijacking is the fastest way to make a page feel broken on a trackpad. Test it on a real Mac before shipping.
Shapes and gradients: motion without a video file
If you want the hero to move but do not want to ship a 4MB mp4, this is the family to look at.
- Shape Landing Hero by kokonutd (3,467), floating geometry over a gradient, no assets at all.
- Horizon Hero Section by scott clayton (3,412), a horizon-line composition that reads as depth rather than decoration.
- PrismaHero by Rahil Vahora (2,156), prism refraction as the focal point.
- Futuristic Hero (2,527), the darker, heavier take on the same idea.
All four are CSS and canvas rather than media, which is why they hold up on a slow connection. If you want the background alone rather than a whole hero, that is its own category: 155 public components have "background" in the name, and the most saved of them, Background Paths by kokonutd, has 4,749.
Parallax and depth
Hero Parallax by Manu Arora (1,627) is the reference implementation of the layered-product-shot hero: rows of images drifting at different rates as you scroll. It is the pattern almost every launch page borrowed in 2024, and it still converts because it shows the product instead of describing it.
Worth knowing before you commit: it wants a lot of images, ideally a dozen or more at consistent aspect ratio. With three screenshots it looks thin.
The plain ones, which are usually the right answer
Most products do not need a shader. Hero Section 1 by meschacirung (2,833) and Hero Section 9 (1,540) are conventional headline, subhead, two buttons, and they are near the top of the list precisely because that is what most people ship. Hero 195 from Shadcnblocks.com (1,807) is the same idea with a tighter type scale.
If you are pre-launch, Waitlist Hero by Le Thanh (1,590) is the version with the email capture already wired into the layout, which saves you the awkward retrofit later.
What makes a hero slow
Three things, in the order they usually bite:
- An autoplaying video above the fold. It competes with your own JavaScript for bandwidth during the only second that counts. If the hero must move, prefer a CSS or canvas effect.
- A web font that blocks the headline. The hero is the one place where a font swap is visible, so preload the one face the headline uses and let the rest load normally.
- Animation libraries loaded for one effect. A scroll-linked parallax is a handful of lines with the native scroll timeline. Pulling a whole animation runtime into the initial bundle for it is the most common self-inflicted wound on a landing page.
Where else to look
Being honest about the alternatives, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| shadcn/ui | The primitives underneath any hero you build | No hero blocks; you compose it yourself |
| Tailwind Plus | Polished, conventional marketing sections | Paid, and every page built from it looks related |
| 21st | Community heroes, including the animated ones | Quality varies by author, so preview before you take it |
The practical split: use shadcn for the button, input and typography primitives, and take the composition from wherever it already exists rather than rebuilding the layout for the fourth time.
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
The key comes from your 21st account and installs need a membership, so set API_KEY_21ST once in your shell and the command works for anything in the catalogue. If you would rather not leave your editor, the 21st MCP does the same thing from Claude, Cursor or Codex: ask for a hero, get previews inline, and have the agent write the file.
Frequently asked
- What should a hero section contain?
- A headline that names what the product is, one line of supporting copy, a single primary action, and evidence: a screenshot, a live demo, or the product itself. Anything past that competes with the action. The common failure is a headline that describes a category rather than the product, which leaves the reader knowing the space but not what you made.
- Are animated hero sections bad for performance?
- Not inherently, but the usual implementations are. An autoplaying video above the fold competes with your own JavaScript during the first second, and pulling a full animation runtime into the initial bundle for one scroll effect is the most common self-inflicted wound on a landing page. CSS and canvas effects, like shape or gradient heroes, cost far less because they ship no media at all.
- How many hero components are on 21st?
- 476 public components have hero in the name as of August 2026, spanning scroll-driven, parallax, shape and gradient, waitlist, and conventional headline layouts. They are browsable at 21st.dev/community/components/s/hero with a live preview on every card.
- Should I use shadcn/ui or a component marketplace for a hero?
- Both, for different layers. shadcn/ui gives you the button, input and typography primitives with no hero blocks, so the composition is still yours to build. A catalogue gives you the composition itself. The practical split is to keep shadcn primitives underneath and take the layout from somewhere it already exists rather than rebuilding it a fourth time.