Now let me read the existing files before building the component.
Now let me build the dashboard card components:
The dashboard is ready. It features three metric cards — Sales, Orders, and Customers — each with a value, a colored icon badge, and a trend pill showing percentage change with a TrendingUp or TrendingDown icon. The design uses a soft blue-gray background with clean white cards, a 3-column responsive grid, and semantic color tokens for positive (green) and negative (red) trends. Components are split into a reusable MetricCard and a Dashboard layout wrapper.
Here are all three files:
components/metric-card.tsximport { type LucideIcon, TrendingUp, TrendingDown } from "lucide-react"
interface MetricCardProps {
title: string
value: string
change: number
changeLabel: string
icon: LucideIcon
iconColor: string
iconBg: string
}
export function MetricCard({
title,
value,
change,
changeLabel,
icon: Icon,
iconColor,
iconBg,
}: MetricCardProps) {
const isPositive = change >= 0
return (
<div className="bg-card rounded-xl border border-border p-6 flex flex-col gap-4 shadow-sm hover:shadow-md transition-shadow duration-200">
<div className="flex items-start justify-between">
<div className="flex flex-col gap-1">
<span className="text-sm font-medium text-muted-foreground tracking-wide uppercase">
{title}
</span>
<span className="text-3xl font-semibold text-card-foreground font-sans">
{value}
</span>
</div>
<div className={`w-11 h-11 rounded-lg flex items-center justify-center ${iconBg}`}>
<Icon className={`w-5 h-5 ${iconColor}`} strokeWidth={2} />
</div>
</div>
<div className="flex items-center gap-1.5">
<div
className={`flex items-center gap-0.5 text-xs font-semibold px-2 py-0.5 rounded-full ${
isPositive
? "bg-success/10 text-success"
: "bg-destructive/10 text-destructive"
}`}
>
{isPositive ? (
<TrendingUp className="w-3 h-3" />
) : (
<TrendingDown className="w-3 h-3" />
)}
{isPositive ? "+" : ""}
{change}%
</div>
<span className="text-xs text-muted-foreground">{changeLabel}</span>
</div>
</div>
)
}components/dashboard.tsx"use client"
import { DollarSign, ShoppingCart, Users } from "lucide-react"
import { MetricCard } from "@/components/metric-card"
const metrics = [
{
title: "Total Sales",
value: "$48,295",
change: 12.5,
changeLabel: "vs last month",
icon: DollarSign,
iconColor: "text-primary",
iconBg: "bg-primary/10",
},
{
title: "Orders",
value: "2,840",
change: 8.1,
changeLabel: "vs last month",
icon: ShoppingCart,
iconColor: "text-success",
iconBg: "bg-success/10",
},
{
title: "Customers",
value: "11,473",
change: -2.3,
changeLabel: "vs last month",
icon: Users,
iconColor: "text-warning",
iconBg: "bg-warning/10",
},
]
export function Dashboard() {
return (
<div className="min-h-screen bg-background font-sans px-6 py-12">
<div className="max-w-4xl mx-auto flex flex-col gap-8">
{/* Header */}
<div className="flex flex-col gap-1">
<h1 className="text-2xl font-semibold text-foreground text-balance">
Business Overview
</h1>
<p className="text-sm text-muted-foreground">
Performance summary for June 2026
</p>
</div>
{/* Metric Cards */}
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
{metrics.map((metric) => (
<MetricCard key={metric.title} {...metric} />
))}
</div>
{/* Footer note */}
<p className="text-xs text-muted-foreground text-center">
Data refreshed daily — last updated today at 08:00 AM
</p>
</div>
</div>
)
}app/page.tsximport { Dashboard } from "@/components/dashboard"
export default function Page() {
return <Dashboard />
}The project is split into three files: MetricCard is the reusable card primitive that accepts typed props for the icon, value, change, and color tokens; Dashboard holds the data array and renders the grid layout; and page.tsx is the minimal entry point. The change prop drives the positive/negative trend pill styling automatically.