Dashboard Block

A complete dashboard layout combining the sidebar, stats cards, charts, and data tables. This block is the standard starting point for admin and analytics pages in Mukoko apps.

Required components


npx shadcn@latest add \
  https://registry.mukoko.com/api/v1/ui/card \
  https://registry.mukoko.com/api/v1/ui/chart \
  https://registry.mukoko.com/api/v1/ui/sidebar \
  https://registry.mukoko.com/api/v1/ui/stats-card \
  https://registry.mukoko.com/api/v1/ui/data-table \
  https://registry.mukoko.com/api/v1/ui/date-picker \
  https://registry.mukoko.com/api/v1/ui/tabs

Layout structure


import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarInset } from "@/components/ui/sidebar"
 
<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 with date picker


<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="Revenue" value="$8,901" change="+8.1%" />
  <StatsCard title="Events" value="42" change="+3.4%" />
</div>

Chart section


<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>

Data table section


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

Mobile adaptation

On mobile, the sidebar is hidden behind a toggle button. The stats grid collapses to 2 columns, and the chart grid stacks vertically. The data table uses horizontal scroll.

See the Dashboard pattern for detailed mobile guidelines.