react dashboard cards

React Dashboard Cards Skill Guide

Objective

Build data-rich admin dashboards with consistent, scannable card layouts. Patterns extracted from two production codebases: a B2B lead-gen engine (Vite + shadcn/ui) and a SEO pipeline dashboard (Next.js App Router + custom CSS variables).

---

1) Design Token Systems

shadcn/ui approach (Tailwind + CSS vars)

:root {
  --primary: 221.2 83.2% 53.3%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --border: 214.3 31.8% 91.4%;
  --radius: 0.5rem;
}

Components reference hsl(var(--primary)) etc.

Custom CSS variable approach (seo-geo-aeo pattern)

:root {
  --fg:           #0f172a;
  --muted:        #64748b;
  --bg:           #ffffff;
  --bg-elevated:  #f8fafc;
  --border:       rgba(0,0,0,0.08);
  --border-strong:rgba(0,0,0,0.14);
  --accent:       #0d6d8a;
  --accent-fg:    #ffffff;
  --green:        #3ecf8e;
  --yellow:       #eaaf2a;
  --red:          #f57265;
  --blue:         #46afc8;
  --radius:       10px;
  --radius-sm:    6px;
  --radius-lg:    16px;
}
.dark { /* override all */ }

Use color-mix(in srgb, var(--accent) 13%, transparent) for tinted backgrounds — no opacity hacks needed.

---

2) Glass Card Component

// SEO dashboard pattern — custom CSS vars, no shadcn
import clsx from 'clsx'

export function Card({ children, className, style }) {
  return (
    <section
      className={clsx('glass-card rounded-[var(--radius-lg)] p-5', className)}
      style={style}
    >
      {children}
    </section>
  )
}

/* globals.css */
.glass-card {
  background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
}

---

3) StatCard — Icon + Label + Value

shadcn/ui version

function StatCard({
  icon: Icon,
  label,
  value,
  variant = 'slate',
}: {
  icon: React.ElementType
  label: string
  value: string | number
  variant?: 'slate' | 'red' | 'green'
}) {
  const colors = { slate: 'text-slate-600', red: 'text-red-500', green: 'text-green-600' }
  return (
    <Card>
      <CardContent className="pt-4">
        <div className="flex items-center gap-3">
          <Icon className={cn('h-5 w-5', colors[variant])} />
          <div>
            <p className="text-xs text-muted-foreground uppercase tracking-wide">{label}</p>
            <p className={cn('text-2xl font-semibold tabular-nums', colors[variant])}>{value}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}