shadcn.io is not affiliated with official shadcn/ui
Music Theory Music Block for Svelte
A key explorer: twelve keys on a circle of fifths, a mode group (Major, Minor, Dorian, Mixolydian), the spelled scale with whole and half steps, a one-octave keyboard, the seven chords with numerals and notes, and the neighbouring keys.
Installation
Overview
Let a learner see a key instead of memorising it, with this music theory explorer for Svelte with Ark UI. It shows Keywise, a theory reference, in a hairline frame with a plus mark on each corner. A Segment Group picks a mode (Major, Minor, Dorian or Mixolydian), and twelve keys sit on a circle of fifths: press one, or move round the circle with the arrow keys. The choice is worked out by helpers from the mode's step pattern. The circle rings the keys a fifth above and below and the key that shares the notes, the scale is spelled with one letter per degree and the whole and half steps between the notes, a drawn one-octave keyboard marks the degrees, and the seven chords are named with their numerals and notes. Beside the circle, a short list names the neighbours. Every drawing has its text next to it, and nothing sounds. It's built from Segment Group and Guides, with native radio buttons for the keys, drawn keys and a CSS entrance only. For theory courses, songwriting and instrument-learning apps.
FAQ
How are the scale and chords worked out?
MODES holds each mode's whole and half steps as semitone counts. From the key you press, pcsOf adds them up into pitch classes, spell gives every degree its own letter and the accidental it needs (so F sharp major has E sharp, and never a doubled letter), and chordsOf stacks a third and a fifth on each degree, names the quality from the two distances and writes the numeral in capitals for major and lower case for minor, with a degree sign for diminished. Add a mode by adding its steps and which degree gives the key that shares its notes.
Why does a minor key sometimes show a different name from the button I pressed?
Some keys can be spelled two ways, and one spelling can need doubled flats or a long run of flats. For each choice the block tries both names of the key and keeps the one with the fewest accidentals and none doubled, so the button D flat in minor reads as C sharp minor, with five sharps rather than eight flats. The centre of the circle always shows the name in use.
What do the rings on the circle mean?
A solid ring marks the key a fifth above and the key a fifth below the one chosen; a dashed ring marks the key that shares its notes (A for C major; C for A minor, D Dorian or G Mixolydian). The list beside the circle repeats them in words, and each button's name says what it is to the chosen key, so the circle is not the only way to read them.
Does anything sound, and what stays local?
No, and the block says nothing plays. The keyboard is drawn from divs and the key and mode are held in page state; nothing is saved or sent. To make it real, play the scale and a chord with an audio engine when a key is chosen, using the pitch classes already computed here.
How do I use it from the keyboard?
Tab to the mode group and use the arrow keys to move between modes. Tab again to the circle: its keys are a radio group in circle order, so the arrow keys step round it and a key is chosen as you land on it. The status line reads out the key, its notes and its signature after each choice. The circle and the keyboard stay left to right in a right-to-left page, because the notes run in one direction.