<mq-fretboard-chord>

Fretboard with chord diagram. Pass a chord name, get finger positions with open/muted string indicators and barre support. Guitar and ukulele, multiple voicings via position, finger-labels, and left-handed.

← Back to index

Install

npm install @hsablonniere/musiq
import '@hsablonniere/musiq/mq-fretboard-chord';

API

Attributes / Properties

Attribute Property Type Default Description
chord chord string Chord name (e.g. "C", "Am", "Bbmaj7")
instrument instrument 'guitar' | 'ukulele' 'guitar' Target instrument (determines string count and chord voicings)
position position number 0 Voicing index from the chord database (0 = first/most common voicing)
left-handed leftHanded boolean false Mirror the diagram for left-handed players
finger-labels fingerLabels boolean false Show finger numbers (1–4) on dots and barres

CSS Parts

Part Description
title Chord name heading above the diagram
marker Open (○) and muted (✕) string indicators above the nut
dot Fretted note dots on the fretboard
barre Barre chord bars spanning multiple strings
fret-number Fret number label (forwarded from mq-fretboard)

Basic — open chords

Seventh chords

Finger labels

Show finger numbers on dots with the finger-labels attribute.

Voicings — position

A minor — 4 positions

position 0

position 1

position 2

position 3

Left-handed

Mirror the diagram with the left-handed attribute.

Right-handed

Left-handed

Sharps & flats

Barre chords

Ukulele

instrument="ukulele"

Style — CSS parts

Customize via ::part(dot) and ::part(barre).