Commerce Analytics

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/dashboard/dashboard3.tsx instead.

Usage

The file also exports dashboard3Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Dashboard3, dashboard3Demo } from "@/components/blocks/dashboard/dashboard3";

export default function Page() {
  return <Dashboard3 {...dashboard3Demo} />;
}

Props

Types

type NavItem = { label: string; href: string; active?: boolean };

type KpiItem = { label: string; value: string; delta: string; trend: "up" | "down" };

type ProductRow = {
  name: string;
  unitsSold: number;
  revenue: string;
  trend: number[]; // rendered as a small inline sparkline
};

Behavior notes

• This is a fully static server component: every chart (area, bar, radial gauge, sparklines) is inline SVG computed from the fixed arrays you pass in, no client JS or chart library involved.
• The topbar search input is decorative: it accepts keystrokes like any input but has no live filtering wired up, matching the brief's optional-period-toggle guidance for this block.
• The sidebar has no collapse control here (unlike the Admin Shell block); it's a static hidden-below-lg rail.
• Sparkline color, area fill, bar chart, and the radial gauge all read their color from `currentColor`/`text-primary`, so they follow the active theme automatically.