PremiumNew

MiniDashboard

Compact dashboard card with 3 KPIs, mini bar chart, and trend summary

Dashboard & Analyticsdashboardcompactkpioverview

Dependencies

shadcn/ui components needed:

npx shadcn@latest add cardnpx shadcn@latest add badgenpx shadcn@latest add separator

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client"
2
3import * as React from "react"
4import { Card, CardContent, CardHeader } from "@/components/ui/card"
5import { Badge } from "@/components/ui/badge"
6import { Separator } from "@/components/ui/separator"
7import { cn } from "@/lib/utils"
8
9interface MiniDashboardProps {
10  className?: string
11}
12
13export function MiniDashboard({ className }: MiniDashboardProps) {
14  const kpis = [
15    { label: "Revenue", value: "$84.5k", color: "bg-emerald-500" },
16    { label: "Users", value: "12.4k", color: "bg-blue-500" },
17    { label: "Growth", value: "+17.3%", color: "bg-violet-500" },
18  ]
19
20  const weeklyData = [65, 85, 45, 90, 70, 95, 80]
21  const days = ["M", "T", "W", "T", "F", "S", "S"]
22  const maxVal = Math.max(...weeklyData)
23
24  return (
25    <Card className={cn("w-full", className)}>
26      <CardHeader className="pb-3">
27        <div className="flex items-center justify-between">
28          <h3 className="font-semibold">Overview</h3>
29          <Badge variant="outline" className="text-xs">Last 7 days</Badge>
30        </div>
31      </CardHeader>
32      <CardContent className="space-y-4">
33        <div className="grid grid-cols-3 gap-3">
34          {kpis.map((kpi, i) => (
35            <div key={i} className="text-center">
36              <div className={cn("w-2 h-2 rounded-full mx-auto mb-1", kpi.color)} />
37              <p className="text-lg font-bold">{kpi.value}</p>
38              <p className="text-xs text-muted-foreground">{kpi.label}</p>
39            </div>
40          ))}
41        </div>
42        <Separator />
43        <div>
44          <p className="text-xs text-muted-foreground mb-2">Weekly Activity</p>
45          <div className="flex items-end justify-between h-16 gap-1">
46            {weeklyData.map((val, i) => (
47              <div key={i} className="flex-1 flex flex-col items-center gap-1">
48                <div
49                  className={cn("w-full rounded-t-sm transition-all hover:opacity-80", "bg-gradient-to-t from-blue-500/60 to-blue-400")}
50                  style={{ height: `${(val / maxVal) * 100}%` }}
51                />
52                <span className="text-xs text-muted-foreground">{days[i]}</span>
53              </div>
54            ))}
55          </div>
56        </div>
57        <Separator />
58        <div className="space-y-2">
59          <p className="text-xs font-medium">Trend Summary</p>
60          <div className="space-y-1.5">
61            <div className="flex items-center gap-2 text-xs">
62              <div className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
63              <span className="text-muted-foreground">Revenue up 17% from last week</span>
64            </div>
65            <div className="flex items-center gap-2 text-xs">
66              <div className="w-1.5 h-1.5 rounded-full bg-blue-500" />
67              <span className="text-muted-foreground">New users peaked on Saturday</span>
68            </div>
69            <div className="flex items-center gap-2 text-xs">
70              <div className="w-1.5 h-1.5 rounded-full bg-violet-500" />
71              <span className="text-muted-foreground">Growth rate above target</span>
72            </div>
73          </div>
74        </div>
75      </CardContent>
76    </Card>
77  )
78}