Skip to content

Page Composition Recipes

Jump to bottom
snoo edited this page Apr 7, 2026 · 1 revision

Page Composition Recipes

Every StyleSeed page follows the same skeleton. What changes is the arrangement of the 4 section types inside it. This page provides ready-to-use recipes for common app domains.

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>

Every recipe below drops sections into <PageContent>.

Recipe 1: SaaS Dashboard

Use case: Admin panel, analytics overview, project management.

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

Use case: Shopify-style seller dashboard, order management.

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

Use case: Google Analytics-style overview, content performance.

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

Key difference from SaaS: heavier on charts, lighter on lists. The area chart is the centerpiece.

{/* 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

Use case: Personal finance, investment portfolio, banking app.

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

  • Negative amounts use text-destructive with - prefix (not parentheses)
  • Down trends use TrendingDown icon + - prefix
  • Amounts always have whitespace-nowrap
  • Use eok (100M) and jo (1T) units for Korean won

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

Data Type Recommended Section Example
1 key metric (biggest number) Type D Hero Card Total revenue, total steps
2-4 key metrics Type B Grid (grid-cols-2) KPIs, vital signs
Time series / trend Type A Full Card + Chart Revenue chart, weight chart
List of items with status Type A Full Card + ListItem Orders, transactions
Part-of-whole breakdown Type A Full Card + Donut Categories, allocation
Ranked comparison Type A Full Card + RankedList Top products, competitors
Multiple alerts/notifications Type C Carousel Briefings, reminders

Common Mistakes

Mistake Fix
Putting a chart and a list in the same card Split into two Type A sections
Using Type D hero for 2+ metrics Hero is for exactly 1 metric; use Type B grid for multiple
Placing content outside of cards Wrap everything in bg-card rounded-2xl shadow-card
Adding dividers between sections Remove them; space-y-6 + card backgrounds handle separation
More than 4 items in a KPI grid Keep to 4; move extras to a separate section

Clone this wiki locally