Dashboard

Complete dashboard template with analytics, metrics, charts, and navigation

Preview

Dashboard

View live template →

Features

Complete dashboard with analytics and metrics
Responsive sidebar navigation
Header with user menu and search
Multiple sub-pages: Analytics, Data Cache, Edge Functions, Functions, Security, Settings, Users
Area charts for data visualization
Activity feed component
Metric cards with trend indicators
Data tables with filtering
Dark mode support

Install Summary

This template kit includes page routes, components, and all required dependencies. Download the bundle and extract it into your project root.

Page Files

File	Path
layout.tsx	app/templates/dashboard/layout.tsx
page.tsx	app/templates/dashboard/page.tsx
page.tsx	app/templates/dashboard/analytics/page.tsx
page.tsx	app/templates/dashboard/data-cache/page.tsx
page.tsx	app/templates/dashboard/edge-functions/page.tsx
page.tsx	app/templates/dashboard/functions/page.tsx
page.tsx	app/templates/dashboard/security/page.tsx
page.tsx	app/templates/dashboard/settings/page.tsx
page.tsx	app/templates/dashboard/users/page.tsx

Component Files

File	Path
dashboard-layout.tsx	components/templates/dashboard/dashboard-layout.tsx
header.tsx	components/templates/dashboard/header.tsx
sidebar.tsx	components/templates/dashboard/sidebar.tsx
metric-card.tsx	components/templates/dashboard/metric-card.tsx
area-chart.tsx	components/templates/dashboard/area-chart.tsx
activity-list.tsx	components/templates/dashboard/activity-list.tsx
types.ts	components/templates/dashboard/types.ts
index.ts	components/templates/dashboard/index.ts

Dependencies

Install these dependencies before using the template:

Terminal

bash

npx shadcn@latest add button card badge avatar dropdown-menu tooltip input label select separator switch textarea progress

Terminal

bash

npm install recharts @phosphor-icons/react

Installation

Download the complete template as a ZIP file, or copy the text bundle to your clipboard:

Page Files

The template includes the following page files:

1. layout.tsx

layout.tsx

tsx

import { DashboardLayout } from "@/components/templates/dashboard";

export default function DashboardTemplateLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <DashboardLayout>{children}</DashboardLayout>;
}

2. page.tsx

page.tsx

tsx

"use client";

import { Globe, Lightning, Database, Clock } from "@phosphor-icons/react";
import {
  AreaChart,

3. page.tsx

page.tsx

tsx

"use client";

import {
  ChartBar,
  Gauge,

4. page.tsx

page.tsx

tsx

"use client";

import {
  ArrowClockwise,
  CloudArrowDown,

5. page.tsx

page.tsx

tsx

"use client";

import {
  GlobeHemisphereEast,
  Lightning,

6. page.tsx

page.tsx

tsx

"use client";

import { BracketsCurly, Cloud, Cube, Lightning } from "@phosphor-icons/react";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";

7. page.tsx

page.tsx

tsx

"use client";

import {
  Fingerprint,
  Key,

8. page.tsx

page.tsx

tsx

"use client";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

9. page.tsx

page.tsx

tsx

"use client";

import {
  Envelope,
  ShieldCheck,

Template Components

The template includes the following component files:

1. dashboard-layout.tsx

dashboard-layout.tsx

tsx

"use client";

import { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";

2. header.tsx

header.tsx

tsx

"use client";

import { useState } from "react";
import Link from "next/link";
import { CaretDown, MagnifyingGlass, List, User, Gear, CreditCard, SignOut, ArrowLeft } from "@phosphor-icons/react";

3. sidebar.tsx

sidebar.tsx

tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";

4. metric-card.tsx

metric-card.tsx

tsx

"use client";

import { cn } from "@/lib/utils";
import { ArrowUp, ArrowDown } from "@phosphor-icons/react";
import type { Metric } from "./types";

5. area-chart.tsx

area-chart.tsx

tsx

"use client";

import {
  Area,
  AreaChart as RechartsAreaChart,

6. activity-list.tsx

activity-list.tsx

tsx

"use client";

import { cn } from "@/lib/utils";
import {
  CheckCircle,

7. types.ts

types.ts

tsx

import type React from "react";
import type { IconProps } from "@phosphor-icons/react";

// Navigation types
export interface NavItem {

8. index.ts

index.ts

tsx

"use client";

export { DashboardLayout } from "./dashboard-layout";
export { Sidebar } from "./sidebar";
export { Header } from "./header";
export { MetricCard } from "./metric-card";
export { AreaChart } from "./area-chart";
export { ActivityList } from "./activity-list";
export * from "./types";

Getting Started

Step 1: Extract Files

After downloading and extracting the template ZIP:

Copy page files to app/templates/dashboard/
Copy component files to components/templates/dashboard/

Step 2: Install Dependencies

Install the required shadcn/ui components:

Terminal

bash

npx shadcn@latest add button card badge avatar dropdown-menu tooltip input label select separator switch textarea progress

Install external packages:

Terminal

bash

npm install recharts @phosphor-icons/react

Step 3: Access Your Template

The template will be available at /templates/dashboard

What's Included

Main dashboard with metrics and charts
Analytics page with data visualization
Data cache management interface
Edge functions overview
Functions/deployments page
Security settings
User management
Settings page
Responsive sidebar navigation
Header with user menu and search