Hero Section With Highlighted Text
A centered release-control hero on bone paper: a coral marker headline and environment columns of flags with a live rollout.
Features
- Warm bone paper framed by dashed drafting lines with corner crosses
- A bold Inter Tight headline with a tilted coral marker stroke swiped in
- Environment columns of feature flags with switches
- A live rollout bar climbing 5% to 100% in production
Best for: Developer tools and infrastructure products that sell safety and control without looking like a console.
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 | - | Optional line above the headline. |
| lines | string[] | - | The headline, line by line. |
| highlights | string[] | - | Words that get the coral marker. |
| description | string | - | The line under the headline. |
| primaryCta | { label: string; href: string } | - | The ink pill. |
| secondaryCta | { label: string; href: string } | - | Optional underlined link. |
| environments | Environment[] | - | Columns: name and dot tone. |
| flags | Flag[] | - | Flags: key and the environments they're on in. |
| rollout | { flag: string; steps: number[] } | - | The flag ramping up in the last environment. |
| clients | Brand[] | - | Optional client logos (name and icon), in a dashed grid under the product. |
| clientsLabel | string | - | Optional line above the client logos. |
| nav | { brand: { name; icon }; links: Cta[]; cta: Cta } | - | Optional built-in navbar in this hero's style. |
| className | string | - | Extra classes for the section. |
FAQ
Is the Hero Section With Highlighted Text free to use?
Yes. Hero Section With Highlighted Text is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Hero Section With Highlighted Text 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 Highlighted Text 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 Highlighted Text 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 Highlighted Text 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.