Components gallery
Use these building blocks to assemble landing pages, product views, and docs.
Reusable sections
Copy any block and drop it into a new page.
Teams building modern SaaS products
Onboard users with fewer steps
Use this highlight block to promote a new feature, launch a module, or explain a differentiator.
Numbers that make planning easier
Use this section to anchor your product story with concrete outcomes.
Launch time
7 days
Setup steps
12
Core modules
20+
Avg. MRR
$3.4k
From idea to launch in three steps
Use this section to break down your onboarding or product setup.
Step 1
Connect auth
Enable Google OAuth and magic links in minutes.
Step 2
Launch billing
Create Stripe prices and ship checkout fast.
Step 3
Ship and scale
Add blog content and grow with SEO in place.
Primitive components
Use these for forms, actions, and structure.
Buttons
Forms
Badges & Ratings
Tabs
Explain the overview here.
Modal
Component usage
Quick reference for the most-used building blocks.
Button
Primary/secondary/ghost buttons for CTAs.
<Button>Primary</Button>
Input
Form inputs for capture flows.
<Input placeholder="Email" />
Textarea
Multi-line text input for feedback forms.
<Textarea placeholder="Message" />
Badge
Small labels for tags and highlights.
<Badge>New</Badge>
Tabs
Tabbed content for product demos.
<Tabs items={[...]} />
Modal
Lightweight modal for confirmations.
<Modal open={open} onClose={...} />
Header variants
Reusable headers for landing pages.
<HeaderVariantOne />
Footer variants
Reusable footers for legal + nav links.
<FooterVariantOne />
LogoCloud
Customer logo strip for trust.
<LogoCloud />
FeatureHighlight
Spotlight block with CTA.
<FeatureHighlight />
StatsGrid
Metrics section for outcomes.
<StatsGrid />
Steps
Step-by-step onboarding section.
<Steps />