🎸 Chord Components Demo

Display individual chord diagrams for different instruments:

<chord-diagram chord="C" instrument="ukulele"></chord-diagram>

Display multiple chords in a responsive grid layout:

<chord-list instrument="ukulele" chords='["C", "F", "G", "Am"]'></chord-list>

Ukulele Common Chords

Guitar Power Chords

chord-diagram

Displays a single chord diagram.

• chord (string): The chord name (e.g., "C", "Am7", "F#dim")
• instrument (string): Instrument ID (default: "ukulele")

chord-list

Displays multiple chord diagrams in a responsive grid.

• instrument (string): Instrument ID (default: "ukulele")
• chords (string|array): JSON string or array of chord names

Built-in Instrument IDs

• ukulele — Standard Ukulele
• baritone-ukulele — Baritone Ukulele
• ukulele-5ths — 5ths tuned Ukulele
• guitar — Standard Guitar
• guitar-drop-d — Drop-D Guitar
• mandolin — Standard Mandolin