Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ukulele-chord with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var ukuleleChord = require("ukulele-chord")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ukulele-chord v0.3.1


A React component that renders ukulele chord diagrams.

It expects you to have the chord name and its numerical representation. See below.


Run the following command:

npm install -s ukulele-chord


import React from 'react';
import ReactDOM from 'react-dom';

import UkuleleChord from './lib/UkuleleChord';

        <UkuleleChord name="C" frets={[0, 0, 0, 3]}/>
        <UkuleleChord name="Db7+" frets={[6, 5, 4, 3]}/>
        <UkuleleChord name="B7" frets={[8, 6, 7, 0]}/>


There are only two required arguments:

  • name: the name of the chord per ser. C, F major, Emin(maj7) you name it.
  • frets: is the numeric representation of the chord as an array of 4 numbers. Use 0 to represent no pressed string.
<UkuleleChord name="C" frets={[0, 0, 0, 3]}/>

C major

There is no need to calculate the initial chord's fret. Just set the real fret position and let the component do the rest:

<UkuleleChord name="Db7+" frets={[6, 5, 4, 3]}/>

Db augmented seventh

<UkuleleChord name="B7" frets={[8, 6, 7, 0]}/>

B seventh


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free