Page Composition Recipes

The Universal Skeleton

<PageShell maxWidth="430px">
 <TopBar logo={<Logo />} subtitle="March 30, 2026" actions={...} />
 <PageContent> {/* pb-24 space-y-6 */}
 {/* Sections go here */}
 </PageContent>
 <BottomNav items={[...]} activeIndex={0} />
</PageShell>

Recipe 1: SaaS Dashboard

Section order:
1. Hero (Type D) -- Total MRR or key metric
2. KPI Grid (Type B) -- Active users, churn rate, ARPU, NPS
3. Area Chart (Type A) -- Revenue trend (7d / 30d / 90d)
4. Ranked List (Type A) -- Top customers or top features
5. Alert Carousel (Type C) -- System alerts, expiring trials

<PageContent>
 {/* 1. Hero: Total MRR */}
 <div className="mx-6 mt-1">
 <HeroCard
 icon={DollarSign}
 label="Monthly Recurring Revenue"
 value="284"
 unit="K"
 trend={{ value: "+14.2%", direction: "up", label: "vs last month" }}
 watermarkIcon={DollarSign}
 />
 </div>
 {/* 2. KPI Grid */}
 <div className="grid grid-cols-2 gap-4 px-6">
 <StatCard icon={Users} label="Active Users" value="12,847" trend={{ value: "+5.1%", direction: "up" }} />
 <StatCard icon={UserMinus} label="Churn Rate" value="2.3" unit="%" trend={{ value: "-0.4%", direction: "down" }} />
 <StatCard icon={Receipt} label="ARPU" value="22ドル" trend={{ value: "+1.8%", direction: "up" }} />
 <StatCard icon={Star} label="NPS Score" value="72" trend={{ value: "+3", direction: "up" }} />
 </div>
 {/* 3. Revenue Chart */}
 <div className="mx-6">
 <ChartCard title="Revenue Trend" periods={["7D", "30D", "90D"]} activePeriod="30D">
 {/* Area chart component */}
 </ChartCard>
 </div>
 {/* 4. Top Customers */}
 <div className="mx-6">
 <RankedList
 title="Top Customers"
 items={[
 { rank: 1, name: "Acme Corp", value: "4,200ドル/mo" },
 { rank: 2, name: "Globex Inc", value: "3,800ドル/mo" },
 { rank: 3, name: "Initech", value: "2,900ドル/mo" },
 ]}
 />
 </div>
 {/* 5. Alerts */}
 <BriefingCarousel title="Alerts" items={alertItems} />
 <div className="h-8" />
</PageContent>

Recipe 2: E-Commerce Store

Section order:
1. Hero (Type D) -- Today's revenue
2. KPI Grid (Type B) -- Orders, returns, visitors, conversion
3. Bar Chart (Type A) -- Daily sales (7 days)
4. Recent Orders (Type A) -- Last 3-4 orders with status
5. Donut Chart (Type A) -- Sales by category

<PageContent>
 {/* 1. Hero: Today's Revenue */}
 <div className="mx-6 mt-1">
 <HeroCard icon={Wallet} label="Today's Revenue" value="8,420" unit="USD"
 trend={{ value: "+22.1%", direction: "up", label: "vs yesterday" }} />
 </div>
 {/* 2. KPI Grid */}
 <div className="grid grid-cols-2 gap-4 px-6">
 <StatCard icon={Package} label="Orders" value="147" trend={{ value: "+12%", direction: "up" }} />
 <StatCard icon={RotateCcw} label="Returns" value="3" trend={{ value: "-2", direction: "down" }} />
 <StatCard icon={Eye} label="Visitors" value="4,280" trend={{ value: "+8.5%", direction: "up" }} />
 <StatCard icon={Target} label="Conversion" value="3.4" unit="%" trend={{ value: "+0.3%", direction: "up" }} />
 </div>
 {/* 3. Daily Sales Chart */}
 <div className="mx-6">
 <ChartCard title="Daily Sales" periods={["7D", "30D"]} activePeriod="7D"
 stats={[
 { label: "Average", value: "7,100", unit: "USD" },
 { label: "Peak", value: "12,300", unit: "USD" },
 ]}>
 {/* Bar chart */}
 </ChartCard>
 </div>
 {/* 4. Recent Orders */}
 <div className="mx-6">
 <SectionCard title="Recent Orders">
 <div className="space-y-3">
 <ListItem title="Order #1847" status={{ label: "Shipped", color: "#22C55E" }}
 trailing={<span className="font-bold">284ドル</span>} />
 <ListItem title="Order #1846" status={{ label: "Processing", color: "#3B82F6" }}
 trailing={<span className="font-bold">52ドル</span>} />
 <ListItem title="Order #1845" status={{ label: "Delivered", color: "#22C55E" }}
 trailing={<span className="font-bold">128ドル</span>} />
 </div>
 </SectionCard>
 </div>
 {/* 5. Sales by Category */}
 <div className="mx-6">
 <DonutChartCard title="Sales by Category" centerValue={100} centerUnit="%"
 items={categories} chartElement={/* PieChart */} />
 </div>
 <div className="h-8" />
</PageContent>

Recipe 3: Analytics Platform

Section order:
1. Hero (Type D) -- Total pageviews or sessions
2. KPI Grid (Type B) -- Sessions, bounce rate, avg duration, pages/session
3. Area Chart (Type A) -- Traffic trend with period toggle
4. Donut Chart (Type A) -- Traffic sources breakdown
5. Ranked List (Type A) -- Top pages by views

{/* The pattern is identical -- only data and icons change */}
<HeroCard icon={BarChart3} label="Total Pageviews" value="1.2" unit="M"
 trend={{ value: "+18.7%", direction: "up", label: "vs last period" }} />

Recipe 4: Fintech / Banking

Section order:
1. Hero (Type D) -- Total assets or balance
2. KPI Grid (Type B) -- Income, expenses, savings, investments
3. Donut Chart (Type A) -- Asset allocation
4. Area Chart (Type A) -- Portfolio performance
5. Recent Transactions (Type A) -- Last 3-4 transactions with +/- amounts

Fintech-Specific Rules

Recipe 5: Healthcare / Fitness

Section order:
1. Hero (Type D) -- Steps today or primary health metric
2. KPI Grid (Type B) -- Heart rate, blood pressure, sleep, calories
3. Area Chart (Type A) -- Weight trend or activity over time
4. Donut Chart (Type A) -- Nutrient breakdown
5. Alert Carousel (Type C) -- Health reminders, medication alerts

Section Selection Cheat Sheet

Common Mistakes