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 react-guitar-chord with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("prop-types/package.json"); // prop-types is a peer dependency. var reactGuitarChord = require("react-guitar-chord")

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

react-guitar-chord v1.1.0

React component to draw SVG Guitar chords

React Guitar Chord

React component to draw SVG Guitar chords.

Build Status

Coverage Status


npm install react-guitar-chord


yarn add react-guitar-chord



import React from 'react'
import GuitarChord from 'react-guitar-chord'

export default () => (
    <GuitarChord chord={'C'} />
    <GuitarChord chord={'C'} quality={'MIN'} />

C Chords


PropsDescriptionRequiredDefault Value
chordName of the ChordRequired
qualityMAJ or MINOptional'MAJ' (Major)
heightHeight of the SVGOptional15em
backgroundBackground ColorOptional#FFF
strokeStroke ColorOptional#222
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