Dashboard block

A complete dashboard composition — sidebar, header, stats, charts and a data table.

A dashboard layout combining sidebar, stats cards, charts and a data table. For the design decisions behind the shape — what to prioritise, how it collapses on a phone — see the dashboard pattern.

Install

npx shadcn@latest add \
  https://mzizi.dev/api/v1/ui/card \
  https://mzizi.dev/api/v1/ui/chart \
  https://mzizi.dev/api/v1/ui/nyuchi-sidebar \
  https://mzizi.dev/api/v1/ui/stats-card \
  https://mzizi.dev/api/v1/ui/data-table \
  https://mzizi.dev/api/v1/ui/date-picker \
  https://mzizi.dev/api/v1/ui/tabs

nyuchi-dashboard-layout is available as an N6 page item if you want the shell composed already.

Structure

<SidebarProvider>
  <Sidebar>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Navigation</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton isActive>Dashboard</SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton>Events</SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton>Analytics</SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>

  <SidebarInset>
    <div className="p-4 sm:p-6">{/* dashboard content */}</div>
  </SidebarInset>
</SidebarProvider>

Header

<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
  <div>
    <h1 className="font-serif text-2xl font-bold">Dashboard</h1>
    <p className="text-sm text-muted-foreground">Overview of your activity</p>
  </div>
  <DateRangePicker />
</div>

Stats row

<div className="mt-6 grid gap-4 grid-cols-2 lg:grid-cols-4">
  <StatsCard title="Total views" value="12,345" change="+12.5%" />
  <StatsCard title="Active users" value="1,234" change="+5.2%" />
  <StatsCard title="Events" value="42" change="+3.4%" />
  <StatsCard title="Growth" value="+8.1%" />
</div>

Charts

<div className="mt-6 grid gap-4 lg:grid-cols-7">
  <Card className="lg:col-span-4">
    <CardHeader><CardTitle>Activity</CardTitle></CardHeader>
    <CardContent>
      <ChartContainer config={chartConfig} className="h-[300px]">
        <AreaChart data={activityData}>
          <Area
            type="monotone"
            dataKey="views"
            fill="var(--chart-1)"
            fillOpacity={0.2}
            stroke="var(--chart-1)"
          />
          <ChartTooltip content={<ChartTooltipContent />} />
        </AreaChart>
      </ChartContainer>
    </CardContent>
  </Card>

  <Card className="lg:col-span-3">
    <CardHeader><CardTitle>Categories</CardTitle></CardHeader>
    <CardContent>
      <ChartContainer config={categoryConfig} className="h-[300px]">
        <PieChart>
          <Pie data={categoryData} dataKey="value" innerRadius={60} outerRadius={100}>
            {categoryData.map((entry) => (
              <Cell key={entry.name} fill={entry.color} />
            ))}
          </Pie>
          <ChartLegend content={<ChartLegendContent />} />
        </PieChart>
      </ChartContainer>
    </CardContent>
  </Card>
</div>

See charts for the token palette these use.

Data table

<Card className="mt-6">
  <CardHeader><CardTitle>Recent activity</CardTitle></CardHeader>
  <CardContent>
    <DataTable columns={columns} data={recentActivity} />
  </CardContent>
</Card>

On mobile

The sidebar goes behind a toggle, the stats grid drops to two columns, the chart grid stacks, and the table scrolls inside its own container. See mobile-first patterns.