Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
A "product story" hero. The composition is a two-column split: a tight left column carries the headline, lede paragraph, two CTAs and a 2×2 stats grid; the right column anchors a full multi-section product dashboard preview that intentionally overflows past the right edge of the page so the dashboard reads as continuing into the off-canvas. A faint duplicate sits behind the dashboard for a subtle stacked-card effect. Below the split, a flat brand logo strip closes the hero.
Key Features:
| Element | Purpose |
|---|---|
Heading | Headline, lede paragraph, two CTA buttons and the 2×2 stats grid in the left column |
Stat | One unit cell — large value + unit + bolded label + supporting sentence |
DashboardStage | Right-column wrapper that applies the negative right-margin bleed and renders the offset back-card |
DashboardCard | Outer chrome — bordered card with workspace header, content header, sidebar and the main content area in a 2×2 grid (lg:grid-cols-[240px_1fr]) |
WorkspaceHeader | Top-left cell on lg+ — workspace logo, name, dropdown chevron and a side-panel icon |
ContentHeader | Top cell — current document name with star, plus three quick-action icons |
DashboardSidebar | Left column (lg+) — search bar + three NavSections (main / data sources / saved views) |
DataModelContent | Main content area — toolbar, filter bar and the Top Accounts grid |
AccountRow / HeaderCell / Cell | Table primitives — render the 6-column rows with separators |
StatusPill / DomainPill / SignalIndicator / CompanyLogo | Visual primitives reused inside AccountRow |
LogoStrip | Brand wordmark grid below the split (2 / 4 / 8 columns responsive) |
text-foreground, text-muted-foreground, bg-card, border-foreground) so the surrounding shell adapts to light/dark while the dashboard stays anchored.DashboardCard has min-w-[720px] so the dashboard keeps its native horizontal layout even inside the narrower right column — combined with the negative right-margin, this is what produces the off-canvas bleed."use client" boundary — safe to render directly inside Next.js App Router server pages.