Admin Dashboard Cards

Cards

About

Production-ready admin dashboard cards suite featuring interactive KPI stat cards, net revenue area comparison chart, sales category donut breakdown, top product rankings, customer growth sparkline, inventory alerts, recent transactions table, and live activity timeline.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Admin Dashboard Cards to your project and fits it to your theme.

Code

How Admin Dashboard Cards is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import * as React from "react"
import {
  AdminDashboardCards,
  type ActivityItem,
  type CategoryShare,
  type InventoryAlertItem,
  type OrderItem,
  type ProductRankingItem,
  type RevenuePoint,
  type StatCardProps,
} from "@/components/ui/admin-dashboard-cards"
import {
  Calendar,
  DollarSign,
  Download,
  Receipt,
  ShoppingBag,
  ShoppingCart,
} from "lucide-react"

/* -------------------------------------------------------------------------- */
/*                                Realistic Data                              */
/* -------------------------------------------------------------------------- */

const stats: StatCardProps[] = [
  {
    label: "Total Revenue",
    value: "$19,330.00",
    delta: 11.8,
    hint: "vs. previous period",
    icon: DollarSign,
    accent: "primary",
  },
  {
    label: "Total Orders",
    value: "12",
    delta: 4.2,
    hint: "this period",
    icon: ShoppingCart,
    accent: "blue",
  },
  {
    label: "Avg. Order Value",
    value: "$1,610.83",
    delta: 2.6,
    hint: "per order",
    icon: Receipt,
    accent: "amber",
  },
  {
    label: "Conversion Rate",
    value: "2.08%",
    delta: 0.4,
    hint: "checkout success",
    icon: ShoppingBag,
    accent: "emerald",
  },
]

const revenueData: RevenuePoint[] = [
  { label: "Nov", value: 43000, previous: 39000 },
  { label: "Dec", value: 51000, previous: 45000 },
  { label: "Jan", value: 48000, previous: 47000 },
  { label: "Feb", value: 58000, previous: 50000 },
  { label: "Mar", value: 63000, previous: 53000 },
  { label: "Apr", value: 69000, previous: 58000 },
  { label: "May", value: 79330, previous: 62500 },
]

const categoryData: CategoryShare[] = [
  { label: "Subscription", value: 28500, color: "var(--color-primary, #3b82f6)" },
  { label: "Add-on", value: 8050, color: "#10b981" },
  { label: "Templates", value: 4320, color: "#f59e0b" },
  { label: "Merch", value: 1370, color: "#06b6d4" },
  { label: "Resources", value: 556, color: "#14b8a6" },
]

const topProducts: ProductRankingItem[] = [
  {
    id: "p1",
    name: "Rivera Team Plan",
    category: "Subscription",
    sku: "RV-PLN-TEAM",
    sales: 980,
    rating: 4.6,
  },
  {
    id: "p2",
    name: "Rivera Pro Plan",
    category: "Subscription",
    sku: "RV-PLN-PRO",
    sales: 412,
    rating: 4.8,
  },
  {
    id: "p3",
    name: "AI Insights Add-on",
    category: "Add-on",
    sku: "RV-ADD-AI",
    sales: 305,
    rating: 4.7,
  },
  {
    id: "p4",
    name: "Rivera Branded Mug",
    category: "Merch",
    sku: "RV-MER-MUG",
    sales: 210,
    rating: 4.5,
  },
  {
    id: "p5",
    name: "Rivera T-shirt",
    category: "Merch",
    sku: "RV-MER-TEE",
    sales: 185,
    rating: 4.4,
  },
  {
    id: "p6",
    name: "CRM Template Pack",
    category: "Templates",
    sku: "RV-TMP-CRM",
    sales: 140,
    rating: 4.9,
  },
]

const customerGrowth = {
  total: 2340,
  monthlyNew: 242,
  points: [
    { label: "Nov", value: 1240 },
    { label: "Dec", value: 1410 },
    { label: "Jan", value: 1538 },
    { label: "Feb", value: 1702 },
    { label: "Mar", value: 1894 },
    { label: "Apr", value: 2098 },
    { label: "May", value: 2340 },
  ],
}

const inventoryAlerts: InventoryAlertItem[] = [
  {
    id: "inv1",
    name: "Rivera Branded Mug",
    sku: "RV-MER-MUG",
    stock: 0,
    status: "out_of_stock",
  },
  {
    id: "inv2",
    name: "Rivera T-shirt",
    sku: "RV-MER-TEE",
    stock: 38,
    status: "low_stock",
  },
  {
    id: "inv3",
    name: "Editorial CMS Kit",
    sku: "RV-TMP-CMS",
    stock: 85,
    status: "low_stock",
  },
]

const orders: OrderItem[] = [
  {
    id: "o1",
    reference: "RV-10241",
    customer: "Atlas Coffee Co.",
    items: 4,
    amount: 1280.0,
    currency: "USD",
    status: "paid",
    when: "6 months ago",
  },
  {
    id: "o2",
    reference: "RV-10242",
    customer: "Harbor Logistics",
    items: 2,
    amount: 5400.0,
    currency: "USD",
    status: "pending",
    when: "6 months ago",
  },
  {
    id: "o3",
    reference: "RV-10243",
    customer: "Coral Boutique",
    items: 1,
    amount: 320.0,
    currency: "EUR",
    status: "paid",
    when: "6 months ago",
  },
  {
    id: "o4",
    reference: "RV-10244",
    customer: "Northwind Supply",
    items: 6,
    amount: 8900.0,
    currency: "USD",
    status: "refunded",
    when: "7 months ago",
  },
  {
    id: "o5",
    reference: "RV-10245",
    customer: "Sage Magazine",
    items: 3,
    amount: 1500.0,
    currency: "GBP",
    status: "paid",
    when: "7 months ago",
  },
]

const activities: ActivityItem[] = [
  {
    id: "a1",
    actor: "A",
    action: "updated",
    summary: "Updated email — Re: Atlas Rebrand — milestone 2",
    when: "51 MINUTES AGO",
  },
  {
    id: "a2",
    actor: "A",
    action: "updated",
    summary: "Updated email — Re: Editorial templates",
    when: "51 MINUTES AGO",
  },
  {
    id: "a3",
    actor: "U",
    action: "logged_in",
    summary: "Signed in as Admin",
    when: "2 HOURS AGO",
  },
  {
    id: "a4",
    actor: "U",
    action: "logged_in",
    summary: "Signed in from Lisbon",
    when: "6 MONTHS AGO",
  },
]

/* -------------------------------------------------------------------------- */
/*                               Demo Component                               */
/* -------------------------------------------------------------------------- */

export default function AdminDashboardCardsDemo() {
  const [loading, setLoading] = React.useState(false)

  return (
    <div className="w-full max-w-7xl mx-auto p-4 sm:p-6 lg:p-8 space-y-6">
      {/* Dashboard Top Header Bar */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pb-2 border-b border-border/60">
        <div>
          <p className="text-xs font-medium text-muted-foreground">Dashboards / eCommerce</p>
          <h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-foreground mt-1">
            Welcome back to your storefront
          </h1>
          <p className="text-sm text-muted-foreground mt-0.5">
            Live revenue, orders, customers, and inventory across Rivera.
          </p>
        </div>

        <div className="flex flex-wrap items-center gap-2">
          <button
            type="button"
            className="inline-flex items-center gap-2 rounded-lg border border-border bg-card px-3.5 py-2 text-xs font-medium text-foreground shadow-sm transition-colors hover:bg-muted"
          >
            <Calendar className="h-3.5 w-3.5 text-muted-foreground" />
            Pick a date range
          </button>
          <button
            type="button"
            onClick={() => {
              setLoading(true)
              setTimeout(() => setLoading(false), 900)
            }}
            className="inline-flex items-center gap-2 rounded-lg bg-primary px-3.5 py-2 text-xs font-semibold text-primary-foreground shadow-sm transition-opacity hover:opacity-90 active:scale-95"
          >
            <Download className="h-3.5 w-3.5" />
            Export report
          </button>
        </div>
      </div>

      {/* Grid of Admin Cards */}
      <AdminDashboardCards
        stats={stats}
        revenueData={revenueData}
        categoryData={categoryData}
        topProducts={topProducts}
        customerGrowth={customerGrowth}
        inventoryAlerts={inventoryAlerts}
        orders={orders}
        activities={activities}
        loading={loading}
      />
    </div>
  )
}