Terminal Table Chart

Table-style chart with terminal aesthetic. Displays label + value rows using the chart font; use for data exploration alongside other chart types.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/terminal-table-chart.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

Earnings by Source
SourceEarnings (USD)
Spotify12,450
Apple Music8,920
YouTube6,540
Amazon Music3,210
Tidal1,890

Source	Earnings (USD)
Spotify	12,450
Apple Music	8,920
YouTube	6,540
Amazon Music	3,210
Tidal	1,890

Usage

How to use this component in your code.

<TerminalTableChart
  data={[
    { label: "Spotify", value: 12450 },
    { label: "Apple Music", value: 8920 },
  ]}
  labelColumnLabel="Source"
  valueColumnLabel="Earnings (USD)"
  title="Earnings by Source"
/>