shadcn.io is not affiliated with official shadcn/ui
Chord Chart Music Block for Svelte
A guitar chord chart of a verse and a chorus where every chord has a drawn six-string diagram; a key select, a transpose stepper from -6 to +6 and a capo field from 0 to 7 re-spell every chord and redraw its shape, and Copy chart copies the progression as text.
Installation
Overview
Let players move a song to the key they sing in, with this chord chart for Svelte with Ark UI. It holds one song of Fretfold, a chord chart tool, in a hairline frame with a plus mark on each corner: a controls band with a Select for the key, a transpose stepper made of two Buttons and a capo Number Input, then a Verse and a Chorus of four bars each. Every bar shows its chord name and a six-string diagram with muted and open marks, finger dots and, for a barre, the bar and its fret number, and says the frets in text under it. A sentence reads out what the shapes sound like ("Shapes of G with capo 3 sound as Bb"), the chord names are spelled with flats or sharps to suit the key, and a strum band shows the pattern as arrows over the count. Copy Button copies the chart as text. It's built from Select, Number Input, Button, Copy Button and Guides, with a CSS entrance only. For music teaching, songbook and tab apps.
FAQ
How do I load my own song?
Edit SECTIONS: each bar has a step (semitones above the key's tonic, so 7 is the fifth) and a quality (an empty string for major, m, 7 or m7), and SONG.key is the pitch class the chart is written in. Because bars are steps from the key, the same data can be shown in any key. To add a quality such as maj7, add it to OPEN_SHAPES, E_SHAPES and A_SHAPES and to the key list.
Where do the diagrams come from, and does every chord get one?
From a small shape dictionary, not from images. Chords that have an open shape on the guitar use it; every other chord falls to an E-shape or an A-shape barre placed at the root fret, whichever is lower, so a transposed chord always has a diagram. The diagram window starts at fret 1 for open shapes and at the lowest fret held otherwise, with its number beside it.
What does the capo change?
The sound stays where the key puts it, and the shapes move down by the capo's frets. With the key at Bb and the capo at 3, the fingers play G shapes and the sentence says so. The transpose stepper moves the key itself, so every chord name and every shape follows it; the Key select is the same control as the stepper, shown as a name.
How does it work without seeing the diagrams?
Each diagram is decoration with a title, and the bar says the same thing in text: its number, the chord, the shape's name and the frets from the low string up, with x for a muted string. The stepper buttons are named, a polite status line says the key and capo after each change, and the strum pattern is a list that reads each count and its move.
Does anything play, and what stays local?
Nothing plays: there is no audio and no microphone, and the status says so. The key, the transpose and the capo live in the page, and Copy chart really copies the chord rows as text. To play the chart, map each shape's frets to pitches and hand them to your own audio code.