Fitness Overview

Dashboard11: Fitness Overview

A fitness and health-tracking dashboard with three activity-ring radial gauges, a steps area chart, a heart-rate line chart, and a recent-workouts list under a top navigation bar. A Today/Week/Month range switch live-swaps the chart data and step totals, giving you a ready-made health tracking UI to drop into any project. Built as a Next.js / React fitness dashboard template on shadcn/ui + Recharts.

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

Base UI flavor

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

This installs the block to components/beste/block/dashboard11.tsx, the Beste chart and menu components it composes (area-chart, line-chart, radial-chart, user-menu, notifications-menu), and the shadcn/ui dependencies they need, including tabs.

Quick start

The installed file exports dashboard11Demo alongside the block: the exact props behind the preview above. Spread it to get the full dashboard in one line. The block fills the viewport height (h-screen), so render it as the whole page.

import { Dashboard11, dashboard11Demo } from "@/components/beste/block/dashboard11";

export default function Page() {
  return <Dashboard11 {...dashboard11Demo} />;
}

Then pass your own props:

import { Dashboard11 } from "@/components/beste/block/dashboard11";

export default function Page() {
  return <Dashboard11 brandName="Vitals" />;
}

Props

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

The block-local data types:

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

type Ring = {
  label: string;
  value: number; // 0–100 percentage the gauge fills to
  detail: string; // caption, e.g. "624 of 800 kcal"
  color: string; // theme token, e.g. "var(--chart-1)"
};

type StepPoint = { t: string; steps: number };
// keyed by the "Today" | "Week" | "Month" range tabs
type StepsData = Record<"Today" | "Week" | "Month", StepPoint[]>;

type HeartPoint = { t: string; resting: number; active: number };

type Workout = {
  name: string;
  meta: string; // e.g. "5.2 km · 26 min"
  kcal: string; // e.g. "412 kcal"
  icon: LucideIcon; // Lucide component, e.g. Footprints
};

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

// 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;
};

Still internal

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

• stepsConfig / heartConfig — series labels and colors for the steps and heart-rate charts (colors reference the --chart-1…--chart-5 theme tokens).
• ranges — the ["Today", "Week", "Month"] tab values that key stepsData.
• The "View all workouts" button under the workouts list is a static inline element.

Components

Installed alongside the block and composed inside it, each browsable on its own:

• radial-chart — the three activity-ring gauges. /components/radial-chart
• area-chart — the steps-over-time area chart. /components/area-chart
• line-chart — the resting/active heart-rate chart, with dots and a legend. /components/line-chart
• user-menu — the account dropdown in the top bar (rendered compact). /components/user-menu
• notifications-menu — the bell dropdown listing recent alerts. /components/notifications-menu

Behavior notes

• The Today/Week/Month switch is a shadcn Tabs control (TabsList + TabsTrigger) in the top bar. Changing it updates local range state, which live-swaps the steps area chart's dataset (from stepsData), recomputes the summed step total, and updates the range word in the "Steps this …" label. It defaults to Week and is hidden below the sm breakpoint.
• The top-nav links (Overview, Activity, Nutrition, Sleep) track an activeLink state to highlight the current section; the whole nav is hidden below md.
• The step total renders with toLocaleString("en-US") and tabular-nums for stable number widths.
• The layout is a fixed-height shell: the header stays pinned while the main region scrolls (overflow-y-auto). Cards reflow from single-column to sm:grid-cols-3 (rings) and lg:grid-cols-3 (steps + workouts).
• Buttons and tab triggers carry cursor-pointer. The "View all workouts" button and the workout list are static demo UI with no wired handlers.

Requirements

• Next.js App Router. The user avatar renders with a plain <img>, so no next.config images.remotePatterns setup is needed for remote hosts.
• Rendered as a client component ("use client"), so it composes into any App Router page.
• Occupies the full viewport height (h-screen); render it as the page root rather than nesting it inside padded containers.