Chord Readout
chord-readoutVisualizersEverything analysis can say about what is sounding.
$ pnpm dlx shadcn@latest add @pluginui/core-chord-readoutInstall
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
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-chord-readout.jsonUsage
Connect the documented props to your application or host.
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
| Prop | Type | Default | Description |
|---|---|---|---|
| notes | number[] | — | The sounding MIDI notes. The lowest is treated as the bass, so inversions name themselves. |
| showFlags | boolean | false | Show set-class property flags, including Mirror, Z-Set and counterpart, Combinatorial, and others. |
| showChart | boolean | true | Show the interval-vector chart inline. |
| showConsonance | boolean | true | Show the self-consonance meter. |
| glyphStyle | "musical" | "emoji" | "musical" | Glyph style for the embedded interval-vector chart. |
| color | string | — | 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
sliderandswitchroles with livearia-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.