The best hero blocks for shadcn/ui, with live preview

A hero is chosen by pattern, not by screenshot: the pattern decides what the visitor must believe before scrolling. The EneUI catalogue holds 51 heroes from 6 registries, measured on 1 November 2026, and each one carries an idea of what belongs at the centre of the first screen.

Five patterns cover almost every real case. They are not catalogue categories, the catalogue has no pattern field, but a grouping I made by reading the previews: headline plus CTA plus proof, hero with media, hero with gradient, split hero, minimal hero. Choosing the pattern before the block avoids the most expensive loop, the one where you copy a handsome hero and only later discover it cannot carry your message.

The five patterns that work

The table states the risk of each pattern: not what makes it attractive, but what makes it fail. If a risk matches a problem you already had, that is the pattern to avoid or to fix before installing it.

The hero is judged on one screen

At 390px, with the browser bar showing and the keyboard closed, the hero must fit without the visitor guessing what you sell. The headline can wrap twice; the subtitle must stay readable at a true 16px; the primary CTA must sit above the fold or one natural scroll away, not three. If you need an extra paragraph to explain the hero, the headline is not doing its job.

The mobile crop is the second check. A hero image composed in 16:9 becomes a strip on a phone: if the subject sits at the edges, it disappears. Open the preview in the browser mobile view and look at what survives. When the block uses a video, judge the poster on its own: anyone with prefers-reduced-motion or a slow connection sees only that.

Contrast, hierarchy, motion

• Headline contrast of at least 3:1 and subtitle 4.5:1, measured in the lightest part of the background.
• One primary CTA: a secondary one is allowed only when it leads to a different path.
• Entry animation under 300ms, with a fallback for reduced motion.
• The headline stays a single h1: two h1 elements in the hero blur the page structure.
• Keyboard focus must be visible on the CTA, not only on hover.

Choosing between two heroes you like

Write the sentence the hero must make the visitor believe: “this company solves my problem in a day”. Then look at which of the two blocks makes that sentence obvious without reading the rest. If it needs a second paragraph, the pattern is wrong, not the copy. That criterion removes, in one minute, the heroes you like only because the animation works.

One limit of this list

The mapping between blocks and patterns is my reading of the previews, not a catalogue field: a block can belong to two patterns and the table picks one. The five patterns also cover product and service heroes, not editorial heroes with a large headline and no CTA, which exist and work in documentation or portfolio contexts.

Alternative: no block at all

If the hero only has to say what you do and lead to a CTA, writing it costs less than adapting one: an h1 with clamp for size, a paragraph, a link and an image with declared dimensions. A block pays off when it brings the variants you do not want to rewrite, mobile menu, sticky state, a two-column grid that collapses, or when nobody on the team touches CSS. The comparison between copying and composing from primitives is the same one that applies to every other section.

One last test, the cheapest of all: show the hero to someone who does not know the product for five seconds, then ask what it sells and to whom. A wrong answer means the problem is the pattern, not the block: a split hero with two messages always produces hesitant replies, while a minimal hero with one sentence gets repeated almost word for word. That test beats ten preview comparisons, because it measures understanding rather than taste.

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

The heroes live under /blocks/category/hero and the inventory under /blocks; a three-file example is Hero 01 from Shadcn Space. For measured contrast read the contrast tools, for a headline that scales typography with clamp, and for copying a block against composing by hand copy-paste versus headless. The catalogue guide Hero sections with backgrounds covers backgrounds, gradients and video.