Dashboard KitPRO

New

The small pieces every Ballmac Pro dashboard is built from: page header, bordered panel, legend and a deterministic demo wave.

Overview

How things are going this week.

Traffic

Visits by source

Direct4,210
Search2,980
Social1,120

Installation

Once per project: add the Pro registry and your licence key.

components.json

{
  "registries": {
    "@ballmac": "https://ui.ballmac.com/r/{name}.json",
    "@ballmac-pro": {
      "url": "https://ui.ballmac.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${BALLMAC_LICENSE_KEY}" }
    }
  }
}

.env.local

BALLMAC_LICENSE_KEY=your-licence-key

Add it.

$ pnpm dlx shadcn@latest add @ballmac-pro/dashboard-kit

Need a licence or help with setup?
The source is part of Ballmac UI Pro.
Log in with your licence key to read and copy it here, or install it through the shadcn CLI or the MCP server. You own the code once it is in your project.
Get Pro Log in

Usage

import { DashHeader, Panel, Legend, wave } from "@/components/ballmac/dashboard-kit"

The full example is in the Code tab above.

API reference

<DashHeader>

Prop	Type	Default
`title*` Page heading. Rendered as the page's h1.	React.ReactNode	—
`description` One line under the heading.	React.ReactNode	—
`actions` Controls on the right: a range switch, buttons.	React.ReactNode	—
`titleId` Id of the heading, so the section around it can point to it with aria-labelledby.	string	—

<Panel>

Prop	Type	Default
`title*` Heading of the panel. Rendered as an h2.	React.ReactNode	—
`description` One line under the heading.	React.ReactNode	—
`actions` Controls in the panel's header.	React.ReactNode	—
`bodyClassName` Classes for the area under the header.	string	—

Also accepts the standard attributes of its root element.

Use with AI

DashHeader renders the page h1 with description and actions. Panel is a labelled section card with an h2. Legend lists swatches with labels. wave() returns a deterministic series for demos. With the shadcn MCP server set up (guide), ask your agent:

Add the Ballmac UI Dashboard Kit (@ballmac-pro/dashboard-kit) to this project with the shadcn MCP, then use it where it fits.

Use it for

Building your own dashboard pages that match the Ballmac Pro dashboards

Not for

Marketing pages (use the free stats blocks)

Registry JSON (needs your licence key): https://ui.ballmac.com/r/pro/dashboard-kit.json

Credits

Covered by the Ballmac UI Pro license.

npm: None
Registry: shadcn/utils

Stat Card

A metric card with a clear comparison trend, optional visual, and readable value hierarchy.

Chart

Theme-aware chart wrapper for Recharts with token colors, a styled tooltip and legend, a named figure with a screen-reader summary, and keyboard navigation.

Segmented Control

A macOS segmented control: mutually exclusive options with a selected pill that springs between segments and hairline dividers between unselected ones. A Radix radio group underneath.

Activity Feed

A compact actor and action feed with timestamps and an empty state.