The dashboard features a fixed sidebar on the left with navigation items highlighted using MD3 secondary container tokens. The main content area shows four stat cards across the top, a revenue chart spanning two-thirds of the width beside an activity feed, and a full-width data table at the bottom.
The dashboard features a fixed sidebar on the left with navigation items highlighted using MD3 secondary container tokens. The main content area shows four stat cards across the top, a revenue chart spanning two-thirds of the width beside an activity feed, and a full-width data table at the bottom.
View Live PreviewPersistent sidebar with active-state navigation
4 stat cards with trend indicators and icons
Revenue area chart with dual data series (Recharts)
Recent orders table with customer avatars and status chips
Activity feed with colour-coded event types
Top bar with search input, notification badge, and user avatar
Light/dark mode toggle with system preference detection
Fully responsive grid layout
app/layout.tsx — Root layout with MD3Provider
app/providers.tsx — Theme configuration
app/page.tsx — Dashboard page composition
app/components/Sidebar.tsx — Navigation drawer
app/components/TopBar.tsx — Header with search
app/components/StatCard.tsx — Metric cards
app/components/RevenueChart.tsx — Recharts area chart
app/components/RecentOrders.tsx — Data table
app/components/ActivityFeed.tsx — Event timeline
npx degit your-org/md3-templates/dashboard my-dashboardcd my-dashboard && npm installnpm run devOne-time purchase. Lifetime access and updates.
Live PreviewIncludes:
Full source code
Next.js App Router ready
TypeScript throughout
Light & dark mode
Customisable seed colour
Free updates