Commerce Analytics

Dashboard3: Commerce Analytics

An e-commerce analytics dashboard with a collapsible sidebar, a search topbar, a four-up KPI row with period deltas, a net-profit area chart, a repeat-purchase radial gauge, a busiest-weekday bar chart, and a best-selling products table. It is a complete Next.js / React admin dashboard template for store and commerce reporting, assembled from Beste UI's shadcn/ui + Recharts dashboard components. Everything renders from top-level demo constants, so it works as a drop-in e-commerce analytics dashboard you can rewire to your own data.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/dashboard3?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/dashboard3?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/dashboard3.tsx, its Beste components (sidebar-nav, user-menu, notifications-menu, area-chart, bar-chart, radial-chart, data-table) to components/beste/component/, plus the shadcn/ui dependencies they need (button, badge, sheet, command, dialog).

Quick start

The installed file exports dashboard3Demo alongside the block: the exact props behind the preview above. Spread it to get the full dashboard in one line.

import { Dashboard3, dashboard3Demo } from "@/components/beste/block/dashboard3";

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

The layout is full-height (h-screen) and owns its own sidebar, topbar, and scroll region, so give it a dedicated route rather than nesting it inside another padded page shell.

Props

Every prop is optional. Omit any and the block falls back to its built-in demo data, so <Dashboard3 /> renders a complete, populated commerce dashboard out of the box. Pass just the props you want to override.

The block-local data types:

type Metric = {
  label: string;
  value: string; // pre-formatted, e.g. "18,204"
  delta: string; // e.g. "14.2%"
  up: boolean; // true renders an emerald up badge, false a red down badge
  sub: string; // comparison sub-line
  icon: LucideIcon;
};

type ProfitPoint = { week: string; thisPeriod: number; lastPeriod: number };
type DayPoint = { day: string; sessions: number };

type Product = {
  id: string;
  name: string;
  category: string;
  sold: number;
  revenue: number; // rendered as a "$" currency string
  rating: number; // shown in an emerald badge, one decimal
};

type DashboardUser = {
  name: string;
  email: string;
  avatar: string; // image URL, rendered with a plain <img>
};

The remaining props reuse the interfaces exported by the composed Beste components:

// from sidebar-nav
type SidebarNavGroup = {
  label?: string; // muted uppercase group heading (hidden when collapsed)
  items: {
    id: string;
    label: string;
    icon?: LucideIcon;
    badge?: string | number; // small trailing count/tag, e.g. 46
    href?: string;           // renders an <a> instead of a <button>
  }[];
};

// from user-menu
type UserMenuItem = {
  id: string;
  label: string;
  icon?: LucideIcon;
  destructive?: boolean; // red row with a separator above it
};

// from notifications-menu
type NotificationItem = {
  id: string;
  title: string;
  description?: string;
  time: string;
  icon?: LucideIcon;
  unread?: boolean;
};

// block-local
type CommandPaletteGroup = {
  heading: string;
  items: { id: string; label: string; icon?: LucideIcon }[];
};

Still internal

A few cosmetic bits stay as constants in the installed file — edit them in place:

• profitConfig / dayConfig — series labels and colors for the area and bar charts (colors reference the --chart-1…--chart-5 theme tokens).
• productColumns — the Best-selling products DataTable column definitions (headers, sorting, cell renderers).

Components

This block composes these Beste UI components (installed alongside it):

• area-chart — the net-profit trend chart. /components/area-chart
• bar-chart — the busiest-weekday sessions chart. /components/bar-chart
• radial-chart — the repeat-purchase-rate gauge. /components/radial-chart
• data-table — the sortable best-selling products table. /components/data-table
• sidebar-nav — grouped, collapsible navigation. /components/sidebar-nav
• user-menu — the account dropdown in the topbar. /components/user-menu
• notifications-menu — the notifications popover. /components/notifications-menu

Behavior notes

• Command palette: pressing ⌘K (or Ctrl+K) toggles a command menu, and the topbar search button opens it too. It is a shadcn/ui Dialog wrapping an explicit Command, rendering the commandGroups entries; selecting an item closes the dialog.
• Sidebar: on md and up the sidebar is inline and a topbar toggle collapses it (icons only) via collapsed state. Below md it is hidden behind a Sheet that opens from a menu button and closes on navigation.
• Notifications: the bell in the topbar opens the NotificationsMenu popover with the demoNotifications list and its unread indicators.
• User menu: the topbar renders a compact UserMenu below md and the full one from md up, both driven by userItems.
• Data table: the best-sellers columns are marked sortable, so headers sort in place; it paginates at pageSize={5}.

Requirements

• Next.js App Router. The block is a client component ("use client") and composes into any App Router route.
• Full-height layout (h-screen): mount it on its own route, not inside another scrolling container.
• The user avatar renders with a plain <img>, so no next.config images.remotePatterns setup is needed for remote hosts.