Hero Section With App Window Preview
A hairline headline over a real CRM in a desktop window, with pixel skylines rising from both edges.
Features
- Hairline headline with one phrase in regular weight
- A dense, realistic CRM in a desktop window, rows arriving one by one
- Pixel skylines of blue dashes rising from both edges, swaying gently
- Uppercase mono navbar split by thin rules, square-cut buttons
- Optional customer logos under a mono uppercase label, above the window
Best for: Open-source and developer-first SaaS that wants the product itself to be the hero.
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 |
|---|---|---|---|
| title | string | - | The headline, in hairline weight. |
| accent | string | - | The phrase in regular weight on the second line. |
| description | string | - | The line under the headline. |
| primaryCta | { label: string; href: string } | - | The black button. |
| secondaryCta | { label: string; href: string } | - | Optional outlined button. |
| appName | string | - | The window title. |
| sidebar | { workspace; favorites; sections } | - | The app's sidebar. |
| records | CrmRecord[] | - | Table rows: company, url, createdBy, address, owner, isIdeal. |
| clients | { name: string; icon }[] | - | Customer logos in one centred row between the buttons and the window. |
| clientsLabel | string | - | The mono uppercase line above the logos. |
| nav | { brand: { name; icon }; links: Cta[]; cta: Cta } | - | Optional built-in navbar in this hero's style. |
| stars | string | - | Optional star count in the navbar. |
| className | string | - | Extra classes for the section. |
FAQ
Is the Hero Section With App Window Preview free to use?
Yes. Hero Section With App Window Preview is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Hero Section With App Window 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 Hero Section With App Window Preview in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Hero Section With App Window 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 Hero Section With App Window 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.