Finance Overview

Dashboard8: Finance Overview

A full-height finance dashboard for a personal or small-business banking product: a collapsible sidebar and command-palette topbar, a dark total-balance hero with per-account tiles, a monthly-budget radial gauge, income / expense / savings KPIs, an income-vs-spending cashflow bar chart, a spending-mix donut, and a colored recent-transactions table. Built with Next.js and React on shadcn/ui plus Recharts, it works as a drop-in budget / banking dashboard UI or a starting point for a fintech dashboard template.

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

Base UI flavor

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

This installs the block to components/beste/block/dashboard8.tsx, the Beste chart and layout components it composes (bar-chart, pie-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 dashboard8Demo alongside the block: the exact props behind the preview above. Spread it to get the full dashboard in one line.

import { Dashboard8, dashboard8Demo } from "@/components/beste/block/dashboard8";

export default function Page() {
  return <Dashboard8 {...dashboard8Demo} />;
}

The block fills its container with h-screen, so render it as the whole page (or inside a full-height wrapper) rather than nesting it in a constrained section.

Props

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

The block-local data types:

type Account = {
  label: string; // e.g. "Everyday"
  value: string; // pre-formatted, e.g. "$12,940"
};

type Kpi = {
  label: string;
  value: string; // pre-formatted, e.g. "$8,940"
  delta: string; // e.g. "6.2%"
  up: boolean; // flips badge color + trend arrow (emerald up / red down)
  icon: LucideIcon;
};

type CashflowPoint = { month: string; income: number; spending: number };
type SpendingSlice = { segment: string; value: number };

type Txn = {
  id: string;
  merchant: string;
  category: string;
  date: string;
  amount: number; // positive renders green with "+", negative uses "−"
};

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. 8
    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:

• cashflowConfig / spendingConfig — series labels and colors for each chart (colors reference the --chart-1…--chart-4 theme tokens).
• txnColumns — the Recent transactions DataTable column definitions (headers, sorting, cell renderers).

Components

This block composes Beste UI components you can also install and use on their own:

• sidebar-nav — the grouped navigation rail with a brand slot, badges, and a collapsed state.
• user-menu — the avatar dropdown in the topbar (a compact variant on mobile, full on desktop).
• notifications-menu — the bell menu with unread indicators.
• bar-chart — the multi-series cashflow chart (income vs spending).
• pie-chart — the spending-mix donut (donut={0.55}).
• radial-chart — the monthly-budget gauge.
• data-table — the sortable, paginated recent-transactions table.

Chart colors read from the --chart-1…--chart-4 CSS variables in your theme.

Behavior notes

• The command palette opens on ⌘K / Ctrl+K (a global keydown listener toggles it) and also from the "Search money..." button in the topbar; selecting any command closes it.
• On desktop, the header's panel button toggles the sidebar between expanded and collapsed. On mobile (below md), that same button opens the sidebar in a slide-in Sheet, and tapping any nav item closes it.
• The transactions table is sortable on Merchant, Category, and Amount columns and paginates at 6 rows per page.
• KPI and hero badges switch between emerald (up) and red (down) styling based on the up flag, with matching TrendingUp / TrendingDown icons.
• Positive transaction amounts render green with a leading +; negative amounts use a − and the default foreground color.

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") because it holds command-palette, sidebar-collapse, and mobile-sheet state, so it composes into any App Router page.
• Full-height layout: the root uses h-screen with an internally scrolling <main>. Give it the full viewport (or a full-height parent) rather than a short section.