@youversion/platform-react-ui

Pre-built React components for Bible applications with styling included.

When to use this package

Use @youversion/platform-react-ui when you need:

• ✅ Production-ready Bible components for your React app
• ✅ Pre-styled components with light/dark mode
• ✅ Minimal setup: wrap your app with providers and use the components
• ✅ Consistent, accessible UI out of the box Get your App Key at platform.youversion.com

Use other packages instead if you:

• ❌ Need low-level API access → Use @youversion/platform-core
• ❌ Want custom UI → Use @youversion/platform-react-hooks

Install

pnpm add @youversion/platform-react-ui

Get your App Key at platform.youversion.com

Usage

Wrap your app with the provider and use components:

import { YouVersionProvider, BibleTextView } from '@youversion/platform-react-ui';

function App() {
  return (
    <YouVersionProvider appKey={"YOUR_APP_KEY"}>
      <BibleTextView reference="JHN.1.1-4" versionId={111} />
    </YouVersionProvider>
  );
}

Theming

Toggle theme via the YVPProvider:

import { useState } from 'react';
import { YouVersionProvider, YVPProvider, BibleTextView } from '@youversion/platform-react-ui';

export default function App() {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  return (
    <YouVersionProvider appKey="YOUR_APP_KEY">
      <YVPProvider config={{ appKey: "YOUR_APP_KEY" }} theme={theme}>
        <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
          Toggle theme
        </button>
        <BibleTextView reference="JHN.1.1-4" versionId={111} />
      </YVPProvider>
    </YouVersionProvider>
  );
}

Customize via CSS variables:

[data-yv-sdk] {
  --yv-primary: #your-primary-color;
  --yv-background: #your-background-color;
  --yv-reader-font-size: 18px;
}

Documentation and API Reference

• developers.youversion.com/sdks/react

License

This SDK is licensed under Apache 2.0.

Licensing information for the Bible versions is available at the YouVersion Platform site.