@lightsonfire/chord-diagram-react-native

Guitar chord diagrams for React Native, drawn with react-native-svg. Pass in a shape, get back a diagram.

npm install @lightsonfire/chord-diagram-react-native react-native-svg

import { ChordCard, ChordLibrary } from "@lightsonfire/chord-diagram-react-native";

export function Greeting() {
  return <ChordCard chord={ChordLibrary.C} style={{ width: 148 }} />;
}

• Components: ChordDiagram (the diagram alone), ChordCard (with name, caption and export link) and ChordSheet (a full demo sheet)
• Data: frets run low E to high e, with -1 muted and 0 open; fingers, barre and caption are optional
• Export: with showDownload, the card passes an SVG or base64 PNG file to your onExport callback, to save or share with e.g. expo-sharing. Without one, iOS opens the share sheet.
• Fonts: iOS uses Helvetica Neue and Android the system sans-serif; supply your own with ChordFontsProvider
• Accessible: each diagram is labelled with a spoken description for VoiceOver and TalkBack

Requires React 19+, React Native 0.78+ and react-native-svg 15+. The same diagrams are available for React on the web (@lightsonfire/chord-diagram-react), SwiftUI and Jetpack Compose. See the full README for more examples.

MIT licensed.