Dashboard components for React and Next.js

Dashboard parts for products where the screen has to be read and acted on. The set covers the top of a screen, the KPI row and the headline figures, the middle where the charts and tables sit, and the navigation that holds it together. They are designed dark first, at the density operator screens actually run at.

11 components, installable with the shadcn CLI.

• KPI Card Row

  A row of KPI cards that count up over a chart you can scrub for any point.

  View component

• Market Heatmap

  The market as one block of ground: tiles sized by cap, tinted by the day's move.

  View component

• Balance Chart

  A wallet-value area chart. Trend picks the colour, scrubbing prints the value.

  View component

• Health Gauge

  A 270° dial with a number that counts up to its value. Click it to cycle metrics.

  View component

• Index Card

  A markets card: one big price over a line you scrub, tabs walking between indices.

  View component

• Holdings Table

  A fund-holdings register with money columns, YTD pills, and weight bars.

  View component

• Donut Chart

  Allocation as a ring around an open centre. The ring and its legend cross-highlight.

  View component

• Sankey Flow

  Income pools in one hub and fans out into uses, ribbon thickness standing for amount.

  View component

• Sidebar

  The collapsible accordion sidebar this whole library runs on.

  View component

• macOS Dock

  A magnifying macOS dock with springy icons and a ⌘K menu.

  View component

• Market Snapshot

  A price card with a scrubable line chart and a period switcher.

  View component