Shadcn hero sections for SaaS
SaaS heroes have six seconds to answer one question: what does this product do, and why should I sign up? The structure that consistently converts: an outcome-led headline, an audience-named subheadline, two CTAs (a primary trial button and a secondary demo button), and a real product screenshot above the fold. Heroes that lead with team photos or stock illustration lose to heroes that lead with the product.
npx shadcn@latest add https://ruixen.com/r/structured-hero-section
For Tailwind v3 or Base UI, swap the URL prefix — see /tailwind-v3-shadcn or /base-ui-shadcn.
Why this differs for saas
SaaS landing pages run a self-serve activation funnel. Every hero element either pulls toward the trial CTA or pulls away from it. The 'play product video' link is almost always pulling away — visitors who hit play rarely come back to the trial button. Cut anything that's not earning its placement.
Recommended components
Curated picks from the Ruixen registry that fit this use case. Click through to the canonical component docs for code, previews, and props.
Shadcn hero section — a clean hero section with announcement pill, overlapping showcase cards, trusted-by logo strip, and dual CTAs.
Shadcn hero section — a SaaS hero section with left-aligned headline, sharp-edged tabbed navigation, content showcase card, and trusted-by logo strip.
Shadcn hero section — a service-style landing hero with an animated iPhone mockup, price block with strike-through, scarcity line, dual CTAs, and trusted-by.
Shadcn hero section — an animated hero title with phased brand reveal, staggered word blur-in, and highlight box sweep effect.
Frequently asked questions
What's the right CTA structure for a SaaS hero?
Two CTAs: a primary ('Start free trial') and a secondary ('Book a demo'). The primary is for self-serve buyers ready to try; the secondary catches buyers who need to talk to sales. Don't make visitors choose between three or four equivalent buttons — decision fatigue tanks your click-through rate. If your product has a freemium tier, swap the primary to 'Sign up free' and reserve 'Start free trial' for the paid plans.
Should the SaaS hero show product UI?
Yes — ideally a real screenshot of your dashboard or the main UI. The product surface above the fold telegraphs what the product actually does in a way no headline can. Mockup or illustration heroes underperform real-product heroes by roughly 20-30% on most B2B SaaS funnels. If your UI isn't visually compelling yet, ship a representative screenshot anyway and iterate; an honest product shot beats a polished illustration of a fake dashboard.
What about a 'No credit card required' microcopy?
Use it under the primary CTA if your trial actually doesn't require a card. It removes the single biggest friction point for new users. Don't fake it though — if your trial does require a card, find a different microcopy ('Free for 14 days', 'Cancel anytime'). Mismatched promises kill activation. The microcopy should be small (~12px), grey, directly under the button, and read in under one second.
Browse all hero sections
The Hero Sections category page has every Ruixen hero sections variant — not just the curated picks for saas.
See all hero sections →