@lightsonfire/chord-diagram-react

Guitar chord diagrams for React on the web, drawn as inline SVG. Pass in a shape, get back a diagram.

npm install @lightsonfire/chord-diagram-react

import { ChordCard, ChordLibrary, type Chord } from "@lightsonfire/chord-diagram-react";

const cadd9: Chord = { name: "Cadd9", frets: [-1, 3, 2, 0, 3, 3], fingers: [0, 2, 1, 0, 3, 4] };

export function Chords() {
  return (
    <div style={{ display: "flex", gap: 12 }}>
      <ChordCard chord={ChordLibrary.C} style={{ width: 148 }} />
      <ChordCard chord={cadd9} style={{ width: 148 }} showDownload format="png" />
    </div>
  );
}

• Components: ChordDiagram (the diagram alone), ChordCard (with name, caption and export link) and ChordSheet (a full demo sheet)
• Data: frets run low E to high e, with -1 muted and 0 open; fingers, barre and caption are optional
• Export: chordSvg, chordPng and downloadChord
• Accessible: each diagram is an image labelled with a spoken description of the shape

The same diagrams are available for React Native (@lightsonfire/chord-diagram-react-native), SwiftUI and Jetpack Compose. See the full README for more examples.

MIT licensed.