Skip to Content
ReactFretboard DiagramsScale

Scale

The <Scale> React component renders guitar scale diagrams.

Installation

pnpm add @music-ui/react

Usage

The following code renders the C major scale all over the fretboard:

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

Output:

Component props

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

NameTypeDefault ValueDescription
rootstringThe scale root note (e.g. “C”)
typestringThe scale type (e.g. “major”)
showNamebooleanfalseShows the scale name
textProperty"note" | "degree" | "interval"The position property to display
highlightDegreenumberundefinedHighlights the passed degree
classNamestringscaleThe component class name

Props showcase

A showcase of the component props:

import { Scale } from "@music-ui/react";
 
function App() {
  return (
    <>
      <Scale root="G" type="dorian" showName />
      <Scale root="E" type="blues" textProperty="note" highlightDegree={1} />
      <Scale
        root="C"
        type="major"
        box={{ system: "CAGED", box: "G" }}
        displayBoxOnly
        highlightDegree={1}
      />
    </>
  );
}

showName = true

G dorian

textProperty and highlightDegree

box and displayBoxOnly and highlightDegree

Last updated on
FretboardABCScore