Music UI - React

A collection of React component wrappers and hooks around the Music UI visualization tools.

Music notation

• <ABCSCore> - abc score component;
• <ABCSCoreWithPlayer> - abc score component with playback support.

Fretboard diagrams

• <Fretboard> - fretboard component;
• <Chord> - chord diagram component;
• <Scale> - scale diagram component.

Piano keyboard

• <Piano> - piano keyboard component;
• <PianoWithPlayer> - piano keyboard component with playback support.

Installation

pnpm add @music-ui/react

npm install @music-ui/react

yarn add @music-ui/react

Use with playback features

pnpm add @music-ui/core @music-ui/react

npm install @music-ui/core @music-ui/react

yarn add @music-ui/core @music-ui/react

Wrap your app in a <PlayerProvider> if you want to use playback features.
See the Player page to know about the setup.