Best hero blocks 2026: 51 verified sections

The hero is the first screen and almost always the element the browser measures as LCP, so treat it as a performance decision. The catalogue holds 51 hero sections from 6 registries, measured on 1 November 2026, and the table sorts them by file count because weight is the first thing you pay for.

The first second is what breaks. A 2400px image served to a 390px phone burns bandwidth and delays paint; white text over a light photo loses contrast the moment the photo changes; an entry animation that starts after hydration moves the largest element and worsens the score instead of improving it. None of these shows in the catalogue preview, which runs on a fast machine with a warm cache.

Why the hero decides the LCP

LCP measures when the largest piece of content above the fold becomes visible: on a landing page that is almost always the hero image or the headline. When the image is discovered late, because it is a CSS background, because it sits in a dynamically loaded component, because nothing preloads it, the browser fetches it after everything else. A hero block built on a div with background-image forces extra work to get back to an image element with declared dimensions.

84 files and 67 dependencies for 51 sections

The category adds up to 84 files, which is 1.6 per block, with 12 multi-file sections; declared npm dependencies reach 67 and registry dependencies 89. Those are high numbers for a single screen: a hero with animated variants brings a motion library and its components, and you pay that cost on every visit, not only on the home page. A single-file block with one image and two lines of text needs none of it.

• File count: animated variants live in separate files and get imported even when unused.
• npm dependencies: 67 in total, so read which packages enter before installing.
• Registry dependencies: 89 shadcn components, often already present but in modified versions.
• Name: two rows are called Hero 03 and come from different publishers, so the name is not an identifier.

The table, sorted by files

The first rows are the ones with more parts to adapt, not the ones that convert better. The Registry column explains why: Shadcn Space publishes three-file heroes with commercial names, akash3444 publishes leaner sections, flx publishes variants of one scheme. Readers in a hurry read the name; people who maintain the code read the publisher.

The budget to fix before choosing

Before opening a preview, write three numbers: maximum hero image weight, maximum entry animation duration, minimum text contrast over the media. If the block misses them without edits, the time you save by copying it goes into removing what you copied. An honest test is loading the page on Slow 3G and watching whether the headline appears before the image.

• Preload the LCP image only, never every image on the page.
• Video with a static poster: if the poster does not work alone, the video is weight without information.
• Text over a gradient or photo with contrast checked in the lightest spot, not on average.
• Animation under 300ms, respecting prefers-reduced-motion.

curl "https://ui.eneawork.it/api/blocks/category/hero?limit=10"

The limit: the category is born from a name

A block joins this list when the manifest declares hero or the title contains the word. A landing called “Agency Page” with a hero inside is never counted, so the catalogue underestimates the category rather than inflating it. The flip side is that many blocks are called hero-01, hero-02, hero-03 without saying what they hold: the number is not information, the preview is.

Decision rule

If the hero is your LCP, take the simplest block that says what you sell and swap the background for an img with declared dimensions and high priority. If the hero must show the product, pick a split and use a real screenshot, not a generic mockup. The alternative is writing it yourself: a headline, a paragraph, a CTA and an image are four elements, and no block beats that weight. A block pays off when it brings responsive variants and states you do not want to rewrite, not when it brings decoration.

The heroes live under /blocks/category/hero, the inventory under /blocks, and the Shadcn Space Hero 01 has its page here. To understand what raises the LCP read what makes LCP worse, for images responsive images with srcset, and for the registry comparison 21st.dev against shadcnblocks.