react-guitar.com

React Guitar is a guitar component for React that renders a 6-string, 22-fret instrument with built-in keyboard accessibility. You can use it to display a playable guitar, set a tuning, apply a visual theme, and let users interact with strings and frets. The component ships with themes such as spanish, dark, and coco, and it supports left-handed mode, hover playback, and chord display.

What you need before starting

• A React project (any modern React setup works).
• A way to install packages, such as npm or yarn.
• Basic familiarity with JSX and component props.

The source material describes React Guitar as “a beautiful and accessible guitar component for React,” so the main task is installing it, rendering it, and configuring its props.

Install and import

Install the package in your project:

npm install react-guitar

Then import the component into the file where you want to render it:

import { Guitar } from 'react-guitar';

If your project uses a different package manager, use the equivalent install command. The exact package name and export style should match what your installed version provides; the component is referred to as Guitar in the source description.

Render a basic guitar

The simplest usage is to render the component with no props:

function App() {
  return <Guitar />;
}

This produces a guitar with 6 strings and 22 frets, starting from fret 0. The default tuning shown in the source is E A D G B E, and the default fretting is 0, 0, 0, 0, 0, 0 — all open strings.

Configure tuning, theme, and orientation

React Guitar accepts props that control how the instrument looks and behaves. Based on the source material, these include:

A configured example:

<Guitar
  tuning={['E', 'A', 'D', 'G', 'B', 'E']}
  theme="spanish"
  leftHanded={false}
  playOnHover={true}
  frets={22}
  strings={6}
/>

The spanish theme is described as “a typical Spanish guitar with a brown fretboard and golden details.” The dark and coco themes are also available as alternatives.

Handle user interaction

React Guitar is designed to be played. According to the source, the component supports:

• Focusing a string — once a string is focused, you can navigate strings and frets using the arrow keys.
• Playing a string — when a specific string is focused, press p to play it.
• Play on hover — if enabled, hovering over a string plays it.
• Chord display — the component can show a chord name such as Em7add11.
• Strum — a strum action is available in the interface.
• Copy Link — the interface includes a way to copy a link, likely to share the current guitar state.

If you need to react to playback in your own code, attach an event handler prop to the Guitar component. The source does not list the exact prop name for playback events, so check the component’s API or documentation for the handler signature. A typical pattern would be:

<Guitar
  onPlay={(string, fret) => {
    console.log(`Played string ${string} at fret ${fret}`);
  }}
/>

Replace onPlay with the actual event prop your version exposes.

Keyboard accessibility

The component is built with accessibility in mind. The documented keyboard interactions are:

1. Tab or focus into the guitar to focus a string.
2. Arrow keys move between strings and frets.
3. p plays the currently focused string.

This means users who cannot use a mouse can still navigate and play the instrument. If you enable playOnHover, mouse users get immediate audio feedback, while keyboard users retain the arrow-key and p controls.

Common issues to check

• No sound — the source shows a “Sound Loading...” state, so audio assets may need to load before playback works. Wait for loading to finish.
• Wrong notes — verify your tuning array matches the intended string order. The default is E A D G B E from lowest to highest string.
• Left-handed layout looks wrong — set leftHanded to true and confirm the theme still renders correctly.
• Fret numbering confusion — the source lists fret -1 as “Mute” and fret 0 as the open string. Keep this in mind when mapping frets to notes.
• Theme not applying — use one of the supported theme names (spanish, dark, coco) exactly as written.

When to use React Guitar

Use React Guitar when you need an interactive, accessible guitar UI inside a React app — for example, a chord-learning tool, a music education site, or a demo that lets users explore tunings and frets. It is a good fit if you want keyboard navigation and theme options out of the box. If you only need a static image of a guitar, a plain SVG or image may be simpler. If you need advanced audio synthesis or MIDI input, you may need to combine React Guitar with a separate audio library.

React Guitar supports keyboard-only operation: once a string has focus, you move between strings and frets with the arrow keys and play the focused string by pressing p. That means the component can be played without a mouse or touch input, which is the core of its accessibility story. The rest of this page covers exactly what the keyboard controls do, what state the component exposes while you play, and where the limits of that accessibility support are.

The keyboard controls

The interaction model is a two-step focus-then-play pattern:

1. Focus a string. You first need focus on a string element. The component is described as "a beautiful and accessible guitar component," and its documented keyboard behavior begins "once you focus on a string."
2. Navigate with the arrow keys. With a string focused, the arrow keys move you across strings and frets. This lets you reach any of the 6 strings and 22 frets without a pointer.
3. Play with p. When a specific string is focused, pressing p plays it.

So the minimum keyboard loop is: focus a string → arrow to the string and fret you want → press p to sound it.

What the component reports while you play

The component exposes its state as you navigate, which is what makes keyboard use practical rather than blind:

• Current fretting — shown as a six-value list, e.g. 0, 0, 0, 0, 0, 0 for all open strings.
• Focused string — the interface names the string you are on, e.g. "String 1."
• Fret position and note — each fret is labeled with its number and pitch, e.g. String 1 Fret 0 = E4, Fret 1 = F4, Fret 2 = F♯4, and so on up to Fret 22 = D6.
• Mute state — Fret -1 is labeled "(Mute)," so a muted string is a distinct, reportable state rather than an absence of information.

Because the note names are attached to fret positions (String 6 Fret 0 = E2, String 2 Fret 0 = B3, String 3 Fret 0 = G3, String 4 Fret 0 = D3, String 5 Fret 0 = A2), a keyboard user can confirm what they are about to play from the labels rather than from sound alone.

Standard tuning and range

The component's default tuning is E A D G B E, with 6 strings and 22 frets, "starting from 0." Fret -1 is the mute position. This matters for keyboard navigation because the arrow-key path spans 23 positions per string (mute plus frets 0–22), and the labels change per string — for example, String 1 Fret 12 is E5 while String 6 Fret 12 is E3.

Other input and display options

Beyond the keyboard, the component exposes several toggles that affect how it behaves and looks:

• Play on hover — an alternative to pressing p, useful for pointer users but not a keyboard substitute.
• Left handed — flips the layout.
• Themes — spanish, dark, and coco; the spanish theme is described as "a typical Spanish guitar with a brown fretboard and golden details."
• Chord — the interface references a chord such as Em7add11, and a Strum action and Copy Link control are present.

Where the accessibility support stops

The page evidence documents keyboard navigation and playing, focus behavior, and state reporting (current fretting, focused string, fret/note labels, mute). It does not document screen-reader announcements, ARIA roles, focus-trap behavior, or a published accessibility conformance level. So the safe claim is: React Guitar is designed to be operable by keyboard, and it exposes enough state to make that operation meaningful — not that it has been verified against a specific accessibility standard.

If your requirement is "can a user play and navigate the guitar without a mouse," the documented controls answer that. If your requirement is "does this meet WCAG at a specific level," that is not established by the available material and would need to be tested directly.

React Guitar is a React component that renders a six-string, 22-fret guitar with standard E A D G B E tuning, per-string note labels, chord name display, and a set of visual and interaction options including left-handed mode, play-on-hover, strumming, and link copying.

Tuning and fret range

The component's default tuning is E A D G B E, and the fretboard runs from fret 0 through fret 22. Each string also has a mute position, labeled Fret -1 (Mute).

The note data exposed for each string follows standard tuning, with octave numbers included:

Because every fret on every string carries its own note value, the component can report the exact pitch of any fretted position rather than just a fret number. For example, string 1 fret 3 resolves to G4, and string 5 fret 3 resolves to C3.

Chord display

The component shows the current fretting as a set of six values, one per string, and derives a chord name from them. In the default state all six strings are open, shown as 0, 0, 0, 0, 0, 0.

When a fretting pattern matches a known voicing, the chord name is displayed — the page evidence shows Em7add11 as an example chord label. This means the component maps fret positions to chord names rather than requiring you to type a chord symbol.

Visual and interaction options

The available options visible in the component include:

• Theme — a theme selector, with spanish shown as the active theme and dark and coco listed as alternatives. The spanish theme is described as "a typical Spanish guitar with a brown fretboard and golden details."
• Left handed — a toggle for left-handed orientation.
• Play on hover — a toggle that plays a string when the pointer hovers over it.
• Strum — triggers a strummed sound across the strings.
• Copy Link — copies a link representing the current state.
• Sound — audio playback, with loading states shown while samples load.

Keyboard navigation

Keyboard control is built in and tied to string focus:

1. Focus a string.
2. Use the arrow keys to move between strings and frets.
3. Press 'p' to play the currently focused string.

This gives full fretboard navigation without a mouse, which is the basis for the component's accessibility claims.

What this means for use

If you need a guitar component with a fixed standard tuning, a full 22-fret range, per-note pitch data, automatic chord naming, and keyboard access, these features are all present. The trade-off is that the documented tuning is fixed at E A D G B E — the page evidence does not describe alternate tunings, so treating it as a standard-tuning component is the safe assumption unless you verify otherwise in the source.

React Guitar ships with three built-in themes — spanish, dark, and coco — and you switch between them by setting a theme value on the component. The theme controls the visual appearance of the fretboard and hardware, while separate options control tuning, handedness, and interaction behavior. The page itself describes the default look as "a typical Spanish guitar with a brown fretboard and golden details."

The three themes

The theme only affects presentation. It does not change the notes, the fret count, or how the component behaves.

Visual and layout options beyond the theme

Themes are one part of the component's appearance. The same configuration surface also exposes:

• Tuning — the page shows the standard tuning E A D G B E, with each string's fret-by-fret note names listed (for example, String 1 open is E 4, String 6 open is E 2).
• Left handed — flips the instrument for left-handed players.
• Frets — the fretboard spans 6 strings and 22 frets, numbered starting from 0, with fret -1 representing a mute.
• Play on hover — lets a string sound when the pointer moves over it instead of requiring a click or keypress.

These settings combine freely with any theme, so you can run a left-handed, dark-themed guitar with a custom tuning without touching the theme logic.

How the theme relates to the rest of the component

The theme is purely a styling layer over a fixed musical model. The component always exposes the same note map — String 1 runs from E 4 at fret 0 up to D 6 at fret 22, String 6 runs from E 2 at fret 0 upward — and the theme decides how that map is drawn. That separation means:

• Changing the theme never changes which note a given string/fret combination produces.
• Changing tuning or handedness never changes which themes are available.
• You can preview a chord (the page shows Em7add11 as an example) and copy a shareable link without the theme affecting the result.

Choosing a theme

Pick spanish if you want the default, most guitar-like presentation described on the page. Pick dark when the component sits on a dark UI and you want it to blend rather than stand out. Pick coco when you want a visibly different wood tone from the default. If none of the three matches your design, the theme value is the single knob to change — the rest of the configuration (tuning, frets, handedness, hover behavior) stays as-is.

React Guitar is a React component that renders an interactive six-string guitar interface in the browser. It is aimed at developers who want to embed a playable, visually styled guitar into a React app without building the fretboard, tuning, and input handling themselves. The component is described as "beautiful and accessible," and its default configuration is a 6-string, 22-fret guitar in standard tuning (E A D G B E).

What you get out of the box

The component ships with a working guitar model rather than just a static image. Based on the default page, it includes:

• Six strings, 22 frets, with fret 0 as the open string and -1 representing a muted string.
• Standard tuning: string 1 is high E (E4), string 2 is B (B3), string 3 is G (G3), string 4 is D (D3), string 5 is A (A2), and string 6 is low E (E2).
• Per-fret note mapping, so each string/fret position resolves to a named pitch (for example, string 1 fret 3 is G4, string 6 fret 5 is A2).
• Themes, with named options shown as spanish, dark, and coco. The spanish theme is described as "a typical Spanish guitar with a brown fretboard and golden details."
• Display toggles for left-handed mode and "play on hover."
• Chord display, shown with an example of Em7add11.
• A strum control and a copy link action.

How interaction works

The accessibility model is keyboard-driven, which is the part most worth understanding before you adopt it:

1. Focus a string — once a string has focus, you can move across strings and frets with the arrow keys.
2. Play a note — with a specific string focused, pressing p plays it.
3. Read the current state — the component reports the current fretting as a list of fret numbers, one per string (the default is 0, 0, 0, 0, 0, 0, i.e. all open).

So the expected result of focusing and pressing keys is both audible playback and a visible change in the fretting state. If you are integrating this, plan for keyboard focus management in your surrounding UI, since the component relies on focus to know which string is active.

When it fits and when it doesn't

The page evidence does not state pricing, licensing, or installation instructions, so treat those as things to confirm from the project itself rather than assuming the component is free or that a specific install command applies.

Practical starting point

To evaluate it, load the component, then verify three things against your own requirements: that the tuning and fret range match your instrument, that the keyboard flow (focus → arrows → p) works with your app's existing focus handling, and that a theme like spanish, dark, or coco matches your design. The chord readout and strum control are the quickest way to confirm the component is producing the notes you expect.