Skip to Content
ReactFretboard DiagramsChord

Chord

The <Chord> React component renders guitar chords diagrams.

Installation

pnpm add @music-ui/react

Usage

The following code renders an open C chord:

import { Chord } from "@music-ui/react";
 
function App() {
  return (
    <main>
      <h1>My App</h1>
      {/* rest of your app */}
      <Chord input="x32010" chordName="C major" />
    </main>
  );
}

You can read more about the input shorthand format here.

Output:

Component props

In addition to the Fretboard component props, the component accepts the following props:

NameTypeDefault ValueDescription
inputstringThe chord input (e.g. x32010)
chordNamestringThe chord name (e.g. “C major”)
barresBarre | Barres[]One or more chord barres
includeOpenStringsbooleanfalseShows the open string positions
showNamebooleanfalseShows the chord name

Props showcase

A showcase of the component props:

import { Chord } from "@music-ui/react";
 
function App() {
  return (
    <>
      <Chord input="x32010" chordName="C major" showName />
      <Chord
        input="x32010"
        chordName="C minor"
        textProperty="note"
        includeOpenStrings
      />
      <Chord
        input="x355421"
        barres={{ fret: 3, stringFrom: 5 }}
        chordName="C minor"
        crop
        showName={false}
      />
    </>
  );
}

showName

C major

textProperty and includeOpenStrings

In order to display the right note name (e.g. Eb vs D#), the chordName property must include the chord quality (e.g. major or minor), see:

import { Chord } from "@music-ui/react";
 
function App() {
  return (
    <>
      <Chord input="133111" textProperty="note" includeOpenStrings />
      <Chord
        input="133111"
        chordName="F minor"
        textProperty="note"
        includeOpenStrings
      />
    </>
  );
}

No chordName: displays G# on the third string, first fret:

Right chordName: displays Ab on the third string, first fret:

barres and crop

Last updated on
IndexChordWithPlayer