UI: Components

Fret Board

<fret-board> is a web component that displays guitar, ukulele, banjo or mandolin chords. It hosts <string-note> elements that represent individual notes on the fretboard, supporting muted strings, open strings, fret positions, finger numbers, and barre chords. The layout automatically adjusts based on the specified number of frets and strings.

With lang attribute

Complex Chords

Left-Handed Guitarists

For left-handed guitarists, there are two main approaches to stringing a guitar: mirror stringing or standard stringing played upside down. With mirror stringing, the strings are reversed (thickest string at the bottom), which matches how right-handed guitars appear in mirror. This is the most common approach and you just need to add left-handed attribute to the <fret-board>.

Ukulele

Mandolin

Banjo