🎸 Chord Components Demo
Individual Chord Diagrams
Display individual chord diagrams for different instruments:
<chord-diagram chord="C" instrument="ukulele"></chord-diagram>
Chord Lists
Display multiple chords in a responsive grid layout:
<chord-list instrument="ukulele" chords='["C", "F", "G", "Am"]'></chord-list>
Quick Examples
Ukulele Common Chords
Guitar Power Chords
API Documentation
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