Installation
Usage
import { TabbedHeroSection } from "@/components/ruixen/tabbed-hero-section";
import { Globe, BarChart3, Sparkles, Layers } from "lucide-react";
export default function App() {
return (
<TabbedHeroSection
title="Ship products your customers will love"
description="Everything your team needs to build, measure, and iterate — faster than ever."
primaryAction={{ href: "/get-started", label: "Get Started" }}
secondaryAction={{ href: "/demo", label: "Book a Demo" }}
tabs={[
{ icon: <Globe />, label: "Overview" },
{ icon: <BarChart3 />, label: "Analytics" },
{ icon: <Sparkles />, label: "Workflows" },
{ icon: <Layers />, label: "Integrations" },
]}
activeTab={1}
trustedBy={{
description: (
<p>Trusted by teams at YC startups and Fortune 500 companies</p>
),
logos: [
<span key="vercel">Vercel</span>,
<span key="linear">Linear</span>,
<span key="notion">Notion</span>,
],
}}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | Required | Main headline text (left-aligned) |
description | string | - | Subtitle / description paragraph |
primaryAction | Action | - | Primary CTA button |
secondaryAction | Action | - | Secondary CTA button |
tabs | Tab[] | - | Tab buttons above the showcase |
activeTab | number | 0 | Index of the active tab (0-based) |
backgroundSrcLight | string | - | Background gradient image for light mode |
backgroundSrcDark | string | - | Background gradient image for dark mode |
trustedBy | TrustedBySection | - | Trusted-by / logo strip section |
className | string | - | Additional CSS classes |
Action Type
type Action = {
href: string;
label: string;
};Tab Type
interface Tab {
icon?: React.ReactNode;
label: string;
}TrustedBySection Type
interface TrustedBySection {
description?: React.ReactNode;
logos: React.ReactNode[];
}Features
- Left-Aligned Headline: Bold headline with description and dual CTAs
- Sharp-Edged Tabs: Flat rectangular tabs with border dividers and active state
- Content Card: Clean gray placeholder card connected to tab bar
- Background Gradients: Optional gradient images with CSS mask fade
- Trusted-By Strip: Descriptive text with brand logo grid
- Dual CTAs: Primary (filled) and secondary (outlined) action buttons
- Responsive: Stacks cleanly on mobile, full layout on desktop
- Semantic Tokens: Uses foreground/background/primary tokens for theme compatibility
- Zero Dependencies: No external libraries required