SaaS Hero Section With Dashboard Preview
A SaaS hero whose live product window stands on a bed of sandstone and drifting fog, with Urbanist copy beside it.
Features
- The product window rises onto a line of sandstone rocks, which overlap its lower edge so it stands on the ground
- Two banks of fog drift through the rocks in opposite directions at different speeds
- Live numbers count up, then keep ticking; the journey's steps fill as blocks of dots, step by step
- Users flow along the chart's baseline and the newest step keeps pulsing; a feed slides in new activations
- Drafting guides, corner marks and bracketed mono notes frame the copy on desktop
- Everything holds still for reduced motion, with the final numbers and a full chart
Best for: Onboarding, activation and product-adoption tools that want their dashboard to feel solid and real.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | - | A short mono line above the headline. |
| title | string | - | The headline, in Urbanist. |
| accent | string | - | The headline's ending, in Urbanist italic and terracotta. |
| description | string | - | The line under the headline. |
| primaryCta | { label: string; href: string } | - | The ink pill. |
| secondaryCta | { label: string; href: string } | - | Optional white pill. |
| facts | string[] | - | Short proof points under the buttons. |
| labels | [string, string] | - | Two bracketed notes at the top of the frame (desktop). |
| product | JourneyProduct | - | The window's content: journey name, KPIs, steps and feed events. |
| scenery | { src: string; alt: string } | - | A wide cut-out of ground with a transparent sky, set in front of the window. |
| nav | GroundedNavContent | - | Optional navbar: brand, links, sign-in link and two buttons. |
| className | string | - | Extra classes for the section. |
FAQ
Is the SaaS Hero Section With Dashboard Preview free to use?
Yes. SaaS Hero Section With Dashboard Preview is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does SaaS Hero Section With Dashboard Preview work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use SaaS Hero Section With Dashboard Preview in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does SaaS Hero Section With Dashboard Preview need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is SaaS Hero Section With Dashboard Preview accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.