Question 1

What is a hero block?

Accepted Answer

A hero block is a pre-built, production-ready landing page hero section that you can drop into any React or Next.js app. Each block is a single self-contained TSX component that renders a complete above-the-fold experience — headline, subtitle, call-to-action buttons, and supporting visuals like mockups, testimonials, or animated counters — styled with shadcn/ui and Tailwind CSS. Copy the source, swap the copy, and your landing page is live.

Question 2

Are shadcn.io hero blocks free?

Accepted Answer

Browsing the gallery, previewing every layout, and reading the code is completely free. Downloading the full source of the Pro blocks requires a shadcn.io Pro subscription — the same tier that unlocks every block in the registry. Individual, Team, and Organization licenses are available, each with monthly, yearly, and lifetime options.

Question 3

How are these different from a free Tailwind hero template?

Accepted Answer

Three things. First, every block is built on shadcn/ui primitives (Button, Card, Tabs, Input, etc.), so it drops into any existing shadcn project without CSS conflicts or duplicate components. Second, the source code is yours — no runtime dependency on shadcn.io, no vendor lock-in, no attribution requirements. Third, the blocks are TypeScript-first with motion/react entrance animations, realistic sample data, and accessibility baked in, not flat marketing screenshots.

Question 4

Do I need a shadcn.io Pro subscription to use hero blocks?

Accepted Answer

You need Pro to copy or download the full source code. Pro unlocks all 150+ hero blocks plus the rest of the shadcn.io component library — over 6,000 blocks across 56 categories. If you only want to browse, preview, or compare layouts before deciding, no subscription is needed.

Question 5

Which hero layout is best for my SaaS landing page?

Accepted Answer

For a product with a strong visual story (dashboards, editors, creative tools), start with a split layout that puts copy on the left and a product mockup on the right — it sells the UI at a glance. For products where the value is conceptual (API platforms, developer tools, services), a centered hero with a bold headline and dual CTAs converts better because it keeps the focus on the promise. For social-proof-heavy launches, lead with a testimonial or logo wall hero.

Question 6

Should I use a split layout or a centered hero?

Accepted Answer

Split layouts work when you have a specific visual artifact worth showing — a dashboard, a chat interface, a kanban board, a video player. The mockup does the persuasion while the copy stays tight. Centered heroes work when your value proposition is a pure idea that photography or mockups can't improve on. Most high-converting SaaS landing pages use a split layout above the fold and a centered CTA section further down.

Question 7

When should I use an animated hero versus a static one?

Accepted Answer

Use motion when it reinforces meaning — a typewriter headline for an AI writing tool, animated counters for analytics, a progress bar for onboarding, a marquee for social proof. Skip motion on content-heavy pages where visitors need to scan quickly, and on performance-sensitive routes where entrance animations would delay the first meaningful paint. Every animated block in the gallery respects `prefers-reduced-motion`.

Question 8

Which hero block works best for a product with a mockup?

Accepted Answer

Look at the split layouts with dedicated mockups: hero-split-dashboard-preview, hero-split-code-preview, hero-split-phone-mockup, hero-split-chat-skeleton, hero-split-music-player, hero-split-database-schema, hero-split-kanban-board. Each one pairs a bold left-column headline with a faithful right-column mockup of the UI category so visitors instantly understand what they're getting.

Question 9

How do I add a hero block to my Next.js project?

Accepted Answer

Open any block detail page, copy the full TSX source, and paste it into your project as a new file (e.g. `components/hero.tsx`). Each block imports from `~/components/ui/*` — the standard shadcn/ui path alias — so it works immediately inside any shadcn-bootstrapped Next.js app. No CLI install, no registry configuration, no extra dependencies beyond what shadcn/ui already gives you plus motion/react for the animated variants.

Question 10

Can I customize the hero blocks to match my brand?

Accepted Answer

Yes — every block is plain TSX with Tailwind utility classes, so you can change colors, spacing, typography, and copy directly in the source. Theme-level changes (primary color, border radius, dark mode palette) are picked up automatically from your shadcn CSS variables without touching the block file, which means you can rebrand dozens of blocks by updating a single `globals.css`. Swap the headline, subtitle, and CTA labels and you're done.

Question 11

Can I change the mockup data, copy, or feature list?

Accepted Answer

All headlines, subtitles, feature lists, and mockup data are defined as plain TypeScript constants at the top of each block file. Change the data and the layout updates automatically. For dynamic content, wire the arrays to your backend, CMS, or analytics dashboard at runtime and the hero rerenders on the next request.

Question 12

Are the hero blocks responsive on mobile?

Accepted Answer

Yes. Every block is mobile-first and tested at viewport widths from 320px upward. Split layouts collapse to a single stacked column on small screens (copy first, mockup below), headlines scale from text-4xl up to text-5xl or larger on desktop, and CTAs switch from an inline row to a vertical stack so every tap target is at least 44px tall.

Question 13

What tech stack do the shadcn.io hero blocks use?

Accepted Answer

React 19, Next.js 16 App Router, TypeScript, Tailwind CSS 4, and shadcn/ui. Animated blocks use motion/react (the modern successor to framer-motion) for entrance animations, and counter heroes use @number-flow/react for smooth value transitions. Interactive blocks lean on shadcn's Input, Slider, Tabs, and Accordion primitives. There is zero runtime dependency on shadcn.io itself — once you copy a block, it belongs to your codebase.

Question 14

Do the hero blocks support dark mode?

Accepted Answer

Yes. Every block uses shadcn's semantic color tokens (`bg-background`, `text-foreground`, `bg-muted`, `border`) instead of hardcoded hex values, so dark mode works automatically the moment your app's `class` or `data-theme` attribute flips. Dedicated dark-only blocks (hero-dark-*) are designed for always-dark sites and use carefully tuned contrast against zinc-950 or black backgrounds.

Question 15

Are the hero blocks accessible?

Accepted Answer

Every block follows the WAI-ARIA patterns from shadcn/ui: a single h1 per hero, semantic landmark regions, keyboard-navigable CTAs with visible focus rings, proper `aria-label` on icon-only buttons, `aria-hidden` on decorative mockups, and WCAG AA color contrast in both light and dark mode. Animated blocks respect `prefers-reduced-motion` so keyboard and screen reader users get a static render.

Question 16

Can I use the hero blocks with TypeScript?

Accepted Answer

Yes — every block is written in TypeScript with explicit interfaces for feature lists, testimonials, mockup data, and any interactive state. The types are exported alongside the component, so you can reuse them when wiring the data to your CMS or backend API without having to reverse-engineer the shape. NumberFlow counters, Slider handlers, and form state are all fully typed out of the box.

React Hero Blocks for shadcn/ui

Browse every hero block

Frequently Asked Questions