Dashboard overview

When to use it

The default landing screen after sign-in.

• User sees status at a glance
• One-tap to most common action
• Recent activity is scannable

Layout regions

• header
• sidebar
• main
• kpis
• activity
• quick-actions

States

• default
• loading
• empty
• error

Example

Next.js — Server Component with parallel data fetch

// app/(app)/dashboard/page.tsx — Server Component
import { Suspense } from 'react'
import { fetchKpis, fetchActivity, fetchPlan } from '@/lib/api.server'

export default async function Dashboard() {
  const [kpis, activity, plan] = await Promise.all([
    fetchKpis(), fetchActivity({ limit: 10 }), fetchPlan(),
  ])
  return (
    <DashboardLayout>
      <Stack size="6">
        <h1 className="text-largeTitle">Dashboard</h1>
        <SubscriptionBanner plan={plan} />
        <Grid cols={4}>
          {kpis.map((k) => <KPI key={k.id} title={k.label} value={k.value} sparkline={k.series} period="7d" />)}
        </Grid>
        <Suspense fallback={<Card><CardContent className="h-64 animate-pulse bg-muted" /></Card>}>
          <Card><CardHeader><CardTitle>Recent activity</CardTitle></CardHeader><CardContent><List>{activity.map((a) => <ListItem key={a.id} title={a.title} subtitle={relative(a.time)} />)}</List></CardContent></Card>
        </Suspense>
      </Stack>
    </DashboardLayout>
  )
}

The full Dashboard overview pattern specifies 2 exact microcopy strings, 1 motion spec, 4 composition rules, 2 more code examples — all gated behind the full recipe. Get the full recipe.

Related