What themes and visual options does React Guitar offer?

Updated

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

Theme What it changes When to pick it
spanish The classic look: brown fretboard with golden details Default choice when you want a warm, acoustic-style instrument
dark A darker visual treatment of the same component Interfaces with dark backgrounds, or when you want the guitar to recede into the UI
coco A distinct wood-toned variant When you want a different wood character from the spanish theme

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.