Getting Started
Templates
Components
Blocks
A complete hero section with tabbed feature navigation and a full dashboard sidebar preview. Designed for SaaS platforms, dev tools, and product landing pages that need to showcase multiple feature areas in a single hero block.
Key Features:
import { HeroTabsDashboard } from "@/components/ui/hero-tabs-dashboard"
export default function Example() {
return (
<HeroTabsDashboard
title="Ship Products Faster with Intelligent Workflows"
subtitle="One platform for your entire team to plan, build, and iterate."
primaryCtaText="Get Started Free"
primaryCtaHref="/signup"
secondaryCtaText="Request a Demo"
secondaryCtaHref="/demo"
/>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
badgeText | string | "Now available for Enterprise" | Badge announcement text |
badgeLink | string | "#" | Badge link URL |
badgeLinkText | string | "Learn more" | Badge link display text |
title | string | "Ship Products Faster with Intelligent Workflows" | Hero heading text |
subtitle | string | Default description | Hero subtitle text |
primaryCtaText | string | "Get Started Free" | Primary CTA button text |
primaryCtaHref | string | "#" | Primary CTA button link |
secondaryCtaText | string | "Request a Demo" | Secondary CTA button text |
secondaryCtaHref | string | "#" | Secondary CTA button link |
tabs | HeroTabsDashboardTab[] | 4 default tabs | Tabbed feature navigation items |
brandName | string | "Ruixen Pro" | Brand name in sidebar |
className | string | undefined | Additional CSS classes |