> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/XDcobra/react-native-sherpa-onnx/llms.txt
> Use this file to discover all available pages before exploring further.

<div className="relative w-full bg-gradient-to-b from-[#020627] to-[#0f1117] dark:from-[#020627] dark:to-[#0f1117] py-20 overflow-hidden">
  <div className="max-w-7xl mx-auto px-6 lg:px-8">
    <div className="text-center">
      <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white dark:text-white mb-6">
        React Native Sherpa-ONNX
      </h1>

      <p className="text-lg sm:text-xl text-gray-300 dark:text-gray-300 max-w-3xl mx-auto mb-8">
        Offline on-device speech processing for React Native. Add speech-to-text, text-to-speech, speaker diarization, and VAD to your mobile apps — completely offline, with full privacy.
      </p>

      <div className="flex flex-wrap justify-center gap-4">
        <a href="/quickstart" className="inline-flex items-center px-6 py-3 bg-[#238636] hover:bg-[#2ea043] text-white font-semibold rounded-lg transition-colors no-underline">
          Get Started
        </a>

        <a href="/api/core" className="inline-flex items-center px-6 py-3 border border-white/30 bg-white/10 hover:bg-white/20 text-white font-semibold rounded-lg transition-colors no-underline">
          API Reference
        </a>
      </div>
    </div>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Quick Start</h2>
  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">Get up and running with Sherpa-ONNX in your React Native app in minutes.</p>

  <Steps>
    <Step title="Install the package">
      Add react-native-sherpa-onnx to your React Native project using your preferred package manager.

      <CodeGroup>
        ```bash npm theme={null}
        npm install react-native-sherpa-onnx
        ```

        ```bash yarn theme={null}
        yarn add react-native-sherpa-onnx
        ```

        ```bash pnpm theme={null}
        pnpm add react-native-sherpa-onnx
        ```
      </CodeGroup>

      For iOS, run `pod install` to complete the setup. See the [Installation](/installation) guide for platform-specific details.
    </Step>

    <Step title="Download a model">
      Download a pre-trained model for your use case. Models are available for speech-to-text, text-to-speech, and more.

      ```typescript theme={null}
      import { ModelDownloadManager } from 'react-native-sherpa-onnx/download';

      const manager = new ModelDownloadManager();
      await manager.downloadModel({
        url: 'https://github.com/k2-fsa/sherpa-onnx/releases/download/...',
        destinationDir: '/path/to/models'
      });
      ```

      Browse available models in the [Models](/models/stt/overview) section.
    </Step>

    <Step title="Initialize and use">
      Create a speech-to-text or text-to-speech engine and start processing audio.

      ```typescript theme={null}
      import { createSTT } from 'react-native-sherpa-onnx/stt';

      const stt = await createSTT({
        modelPath: { type: 'file', path: '/path/to/model' }
      });

      const result = await stt.transcribeFile('/path/to/audio.wav');
      console.log(result.text);

      await stt.destroy();
      ```

      See the [Quickstart](/quickstart) for a complete example.
    </Step>
  </Steps>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Core Features</h2>
  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">Powerful speech processing capabilities for your React Native apps.</p>

  <CardGroup cols={2}>
    <Card title="Speech-to-Text" icon="microphone" href="/features/speech-to-text">
      Offline transcription with support for Whisper, Paraformer, Zipformer, and more.
    </Card>

    <Card title="Streaming STT" icon="wave-pulse" href="/features/streaming-stt">
      Real-time speech recognition with partial results and endpoint detection.
    </Card>

    <Card title="Text-to-Speech" icon="volume" href="/features/text-to-speech">
      High-quality voice synthesis with VITS, Matcha, Kokoro, and other TTS models.
    </Card>

    <Card title="Streaming TTS" icon="waveform-lines" href="/features/streaming-tts">
      Low-latency incremental speech generation for responsive user experiences.
    </Card>

    <Card title="Hardware Acceleration" icon="microchip" href="/features/execution-providers">
      Leverage NNAPI, XNNPACK, Core ML, and QNN for optimized performance.
    </Card>

    <Card title="Model Management" icon="download" href="/features/model-setup">
      Flexible model loading from assets, file system, or Play Asset Delivery.
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Explore by Topic</h2>
  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">Dive deeper into specific features and integrations.</p>

  <CardGroup cols={3}>
    <Card title="API Reference" icon="code" href="/api/core">
      Complete API documentation with types and examples.
    </Card>

    <Card title="Model Catalog" icon="book" href="/models/stt/overview">
      Browse supported STT and TTS models with download links.
    </Card>

    <Card title="Advanced Usage" icon="gears" href="/advanced/pcm-live-stream">
      PCM streaming, hotwords, and model detection.
    </Card>

    <Card title="Configuration" icon="sliders" href="/configuration/disable-ffmpeg">
      Optimize bundle size and configure platform features.
    </Card>

    <Card title="Migration Guide" icon="arrow-right-arrow-left" href="/resources/migration">
      Upgrade from previous versions with breaking changes.
    </Card>

    <Card title="Examples" icon="flask" href="/resources/examples">
      Sample apps and real-world integration patterns.
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <div className="bg-gray-50 dark:bg-[#1a1d27] border border-gray-200 dark:border-[#27272a] rounded-xl p-8">
    <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Ready to get started?</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 mb-6">
      Follow our quickstart guide to add offline speech processing to your React Native app in minutes.
    </p>

    <a href="/quickstart" className="inline-flex items-center px-6 py-3 bg-[#238636] hover:bg-[#2ea043] text-white font-semibold rounded-lg transition-colors no-underline">
      Start Building
    </a>
  </div>
</div>