Traffic Analytics

Dashboard7: Traffic Analytics

A full-height web analytics dashboard: a collapsible sidebar and search topbar over a live realtime strip, an hourly sessions area chart, a daily-goal radial gauge, a channel-audience radar chart, a new-vs-returning line chart, and a sortable top-pages table. It is a drop-in traffic dashboard template for a Next.js / React analytics dashboard, built on shadcn/ui + Recharts and the Beste UI chart components.

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/dashboard7?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/dashboard7.tsx, the Beste chart and layout components it composes (area-chart, line-chart, radar-chart, radial-chart, data-table, sidebar-nav, user-menu, notifications-menu) to components/beste/component/, and the shadcn/ui dependencies they need (button, badge, sheet, command, dialog).

Quick start

The installed file exports dashboard7Demo alongside the block: the exact props behind the preview above. Spread it to get the full dashboard in one line. It fills its container, so give it a full-height wrapper (the component itself is h-screen).

import { Dashboard7, dashboard7Demo } from "@/components/beste/block/dashboard7";

export default function Page() {
  return <Dashboard7 {...dashboard7Demo} />;
}

Props

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

The block-local data types:

type RealtimeStat = {
  label: string;
  value: string; // pre-formatted, e.g. "1,204"
  accent?: boolean; // pulsing dot next to the value
};

type SessionPoint = { hour: string; sessions: number; users: number };
type AudiencePoint = { channel: string; organic: number; social: number };
type VisitorPoint = { day: string; returning: number; new: number };

type Page = {
  id: string;
  path: string;
  views: number;
  avgTime: string;
  bounce: number; // percent; > 40 renders a red badge, else emerald
};

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. "live"
    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:

• sessionsConfig / audienceConfig / visitorConfig — series labels and colors for each chart (colors reference the --chart-1…--chart-5 theme tokens).
• pageColumns — the Top pages DataTable column definitions (headers, sorting, cell renderers).

Components

Every panel is a composed Beste UI component installed alongside the block:

• sidebar-nav — the grouped, collapsible navigation rail with brand, badges, and active state.
• user-menu — the profile dropdown in the topbar (compact on mobile, full on desktop).
• notifications-menu — the topbar bell with unread notification items.
• area-chart — the hourly sessions area chart.
• line-chart — the new-vs-returning line chart with dots.
• radar-chart — the channels-by-audience radar chart.
• radial-chart — the daily-goal radial gauge.
• data-table — the sortable top-pages table.

It also uses the shadcn/ui Button, Badge, Sheet, Command, and Dialog primitives for the topbar, mobile sidebar, and command palette.

Behavior notes

• Pressing ⌘K (or Ctrl+K) opens the command palette; the "Search reports..." topbar button opens the same Dialog-hosted Command menu, and selecting an item closes it.
• On desktop (md and up) the left PanelLeft button toggles the sidebar between full and collapsed widths.
• Below md the sidebar is hidden and opens as a left-side Sheet from the topbar's PanelLeft button; navigating an item closes the sheet.
• The Top pages table sorts on click for the Page, Views, and Bounce columns; bounce rates above 40% render in a red badge, others in an emerald badge.
• The realtime strip and the "Live" pill are static demo values with a pulsing indicator dot; the "Watch realtime" button is a stub with no handler wired up.

Requirements

• Next.js App Router. The block is a client component ("use client") because of the command palette, sidebar, and chart interactions, so it composes into any App Router page.
• Give it a full-height context: the root <section> is h-screen w-full, with its own internal scroll region for the main content.
• The user avatar renders with a plain <img>, so no next.config images.remotePatterns setup is needed for remote hosts.