Chord Readout

chord-readoutVisualizers

Everything analysis can say about what is sounding.

$ pnpm dlx shadcn@latest add @pluginui/core-chord-readout
Loading interactive preview…

Install

Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.

Pulls in

control-themeconsonancepc-set-analysisinterval-vector-chart
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-chord-readout.json

Usage

Connect the documented props to your application or host.

example.tsx
import { ChordReadout } from "@/components/ui/chord-readout"

// The lowest note is the bass, so inversions name themselves.
<ChordReadout notes={[60, 64, 67, 71]} showFlags />
About Chord Readout

A composite card puts a readable chord symbol first, followed by supporting detail in order of how often you need it: note names and raw set encoding, Forte set class, interval-vector chart, and self-consonance meter. The order is deliberate. The symbol answers “what am I playing?”, the question asked most often. The details answer “why does it sound like that?”, which comes up less often but deserves a full answer. The two halves draw on different traditions. The chord name uses tonal thinking, with roots, qualities and inversions; the set class uses atonal thinking, with no root and only interval content. A major and minor triad therefore have the same shape reflected. Seeing both at once reveals the structure of a sonority reached by ear. Chord naming has no dependencies: a ranked search over a quality dictionary reads inversions from the bass note and reports runners-up rather than pretending an ambiguous chord has one answer.

Props

PropTypeDefaultDescription
notesnumber[]—The sounding MIDI notes. The lowest is treated as the bass, so inversions name themselves.
showFlagsbooleanfalseShow set-class property flags, including Mirror, Z-Set and counterpart, Combinatorial, and others.
showChartbooleantrueShow the interval-vector chart inline.
showConsonancebooleantrueShow the self-consonance meter.
glyphStyle"musical" | "emoji""musical"Glyph style for the embedded interval-vector chart.
colorstring—Accent colour. Defaults to the --uikit-accent token.

Interaction

  • Drag with pointer capture, so the gesture keeps tracking past the edge of the control.
  • Shift while dragging for a fine pass; release it mid-gesture and coarse tracking resumes.
  • Double-click resets to defaultValue.
  • Arrow keys step normally, Shift+arrow steps finely, PageUp/PageDown jump by ten, Home/End go to the extremes.
  • Proper slider and switch roles with live aria-valuetext, so a screen reader announces the formatted value rather than the raw number.
  • The scroll wheel adjusts the value while the pointer is over the control; stepped ranges move at least one declared step per notch by default.