nyuchimzizi
Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.
Built by Nyuchi Africav4.0.39
Full dashboard layout with stats, chart section, and activity feed.
No interactive demo is registered for this component yet — the source is shown directly.
"use client"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import {
BarChart3,
Bell,
Home,
LayoutDashboard,
Settings,
TrendingUp,
Users,
Zap,
} from "@/lib/icons"
const stats = [
{
label: "Total Users",
value: "12,483",
change: "+14%",
color: "text-cobalt",
bg: "bg-cobalt/10",
},
{
label: "Revenue",
value: "$48.2K",
change: "+8.2%",
color: "text-tanzanite",
bg: "bg-tanzanite/10",
},
{
label: "Active Now",
value: "1,024",
change: "+22%",
color: "text-malachite",
bg: "bg-malachite/10",
},
{ label: "Conversions", value: "3.6%", change: "+1.2%", color: "text-gold", bg: "bg-gold/10" },
]
const navItems = [
{ icon: Home, label: "Home" },
{ icon: LayoutDashboard, label: "Dashboard", active: true },
{ icon: Users, label: "Users" },
{ icon: BarChart3, label: "Analytics" },
{ icon: Settings, label: "Settings" },
]
const activity = [
{ user: "Tanya M.", action: "completed onboarding", time: "2m ago", initials: "TM" },
{ user: "Kuda R.", action: "upgraded to Pro", time: "15m ago", initials: "KR" },
{ user: "Farai C.", action: "submitted a report", time: "1h ago", initials: "FC" },
{ user: "Noma S.", action: "invited 3 team members", time: "3h ago", initials: "NS" },
]
function Dashboard01() {
return (
<div data-slot="dashboard-01" data-portal="https://design.nyuchi.com/components/dashboard-01" role="main" className="flex min-h-screen bg-background">
{/* Sidebar */}
<aside className="hidden w-60 flex-col border-r border-border bg-card p-4 md:flex">
<div className="mb-6 flex items-center gap-2 px-2">
<Zap className="size-5 text-cobalt" />
<span className="font-serif text-lg font-semibold text-foreground">mukoko</span>
</div>
<nav data-slot="dashboard-01" role="main" className="flex flex-1 flex-col gap-1">
{navItems.map((item) => (
<button
key={item.label}
className={`flex items-center gap-3 rounded-[var(--radius-lg,14px)] px-3 py-2 text-sm transition-colors ${
item.active
? "bg-primary text-primary-foreground"
: "text-muted-foreground hover:bg-muted hover:text-foreground"
}`}
>
<item.icon className="size-4" />
{item.label}
</button>
))}
</nav>
</aside>
{/* Main */}
<div data-slot="dashboard-01" role="main" className="flex flex-1 flex-col">
{/* Header */}
<header data-slot="dashboard-01" role="main" className="flex h-14 items-center justify-between border-b border-border px-6">
<h1 className="font-serif text-lg font-semibold text-foreground">Dashboard</h1>
<div data-slot="dashboard-01" role="main" className="flex items-center gap-3">
<Button variant="ghost" size="icon-sm">
<Bell className="size-4" />
</Button>
<Avatar size="sm">
<AvatarImage src="/avatars/01.png" alt="User" />
<AvatarFallback>TM</AvatarFallback>
</Avatar>
</div>
</header>
{/* Content */}
<main data-slot="dashboard-01" role="main" className="flex-1 space-y-6 p-6">
{/* Stats */}
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
{stats.map((stat) => (
<Card key={stat.label} size="sm">
<CardContent data-slot="dashboard-01" role="main" className="flex items-center gap-4">
<div className={`flex size-10 items-center justify-center rounded-[var(--radius-lg,14px)] ${stat.bg}`}>
<TrendingUp className={`size-5 ${stat.color}`} />
</div>
<div>
<p className="text-xs text-muted-foreground">{stat.label}</p>
<p className="text-xl font-semibold text-foreground">{stat.value}</p>
<p className={`text-xs font-medium ${stat.color}`}>{stat.change}</p>
</div>
</CardContent>
</Card>
))}
</div>
{/* Chart placeholder + Activity */}
<div className="grid gap-6 lg:grid-cols-3">
<Card className="lg:col-span-2">
<CardHeader>
<CardTitle>Revenue Overview</CardTitle>
</CardHeader>
<CardContent>
<div data-slot="dashboard-01" role="main" className="flex h-48 items-end gap-2">
{[40, 65, 45, 80, 55, 90, 70, 85, 60, 95, 75, 88].map((h, i) => (
<div
key={i}
data-slot="dashboard-01" role="main" className="flex-1 rounded-t-[var(--radius-sm,7px)] bg-cobalt/20 transition-all hover:bg-cobalt/40"
style={{ height: `${h}%` }}
/>
))}
</div>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Recent Activity</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{activity.map((item, i) => (
<div key={i}>
<div data-slot="dashboard-01" role="main" className="flex items-center gap-3">
<Avatar size="sm">
<AvatarFallback>{item.initials}</AvatarFallback>
</Avatar>
<div data-slot="dashboard-01" role="main" className="flex-1 text-sm">
<span className="font-medium text-foreground">{item.user}</span>{" "}
<span className="text-muted-foreground">{item.action}</span>
</div>
<Badge variant="secondary">{item.time}</Badge>
</div>
{i < activity.length - 1 && <Separator className="mt-3" />}
</div>
))}
</CardContent>
</Card>
</div>
</main>
</div>
</div>
)
}
export { Dashboard01 }
The variants, sizes, and props surfaced by the registry. Each is sourced from the Supabase component_docs table.
Hit the registry API live and see the JSON the shadcn CLI consumes when it installs this component.
/api/v1/ui/dashboard-01npx shadcn@latest add https://mzizi.dev/api/v1/ui/dashboard-01components/blocks/dashboard-01.tsx