> ## Documentation Index
> Fetch the complete documentation index at: https://docs.livepeer.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started

> Get started building with Livepeer UI Kit!

<Info>
  These docs are written for a React or React Native developer building on
  `@livepeer/react` or `@livepeer/react-native`.
</Info>

## Installation

Install Livepeer React using your favorite package manager.

<Tabs>
  <Tab title="React">
    ```
    npm i @livepeer/react
    ```
  </Tab>

  <Tab title="React Native">
    React Native also requires some peer dependencies (used in the `Player`
    component). We rely on `expo` for pod installation/linking. You must ensure that
    the
    [correct version of `react-native-svg`](https://github.com/software-mansion/react-native-svg#supported-react-native-versions)
    is installed.

    If you're installing this in a
    [bare React Native app](https://docs.expo.dev/introduction/managed-vs-bare/#bare-workflow),
    you should also follow the
    [extra `expo-av` installation instructions](https://github.com/expo/expo/tree/sdk-47/packages/expo-av).

    ```bash React Native theme={"theme":{"light":"github-light","dark":"dark-plus"}}
    expo install @livepeer/react-native expo-av react-native-svg
    ```
  </Tab>
</Tabs>

## Create a livepeer client

First, create a livepeer `Client` instance using
[`createReactClient`](/sdks/react/migration/3.x/client), and pass a provider to
it.

<Tabs>
  <Tab title="React">
    ```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
    import { createReactClient, studioProvider } from '@livepeer/react';

    const client = createReactClient({
      provider: studioProvider({ apiKey: 'yourStudioApiKey' }),
    });
    ```
  </Tab>

  <Tab title="React Native">
    ```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
    import { createReactClient, studioProvider } from '@livepeer/react-native';

    const client = createReactClient({
      provider: studioProvider({ apiKey: 'yourStudioApiKey' }),
    });
    ```
  </Tab>
</Tabs>

Note: If you choose to use Studio as a provider, you will need to configure an
API key for the `studioProvider` which is
[CORS-protected API key](/sdks/react/migration/3.x/providers/studio#apikey).

[Read more about client configuration](/sdks/react/migration/3.x/client)

## Wrap app with `LivepeerConfig`

Next, wrap the app with the
[`LivepeerConfig`](/sdks/react/migration/3.x/LivepeerConfig) component, passing
the `client` to it.

<Tabs>
  <Tab title="React">
    This is added to `_app.js` for Next.js or `App.js` with Create React App, so that the
    `LivepeerConfig` React Context is available across every component.

    ```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
    import {
      LivepeerConfig,
      createReactClient,
      studioProvider,
    } from '@livepeer/react';

    const client = createReactClient({
      provider: studioProvider({ apiKey: 'yourStudioApiKey' }),
    });

    function App() {
      return (
        <LivepeerConfig client={client}>
          <SomeComponent />
        </LivepeerConfig>
      );
    }
    ```
  </Tab>

  <Tab title="React Native">
    This is added to `App.js`, so that the `LivepeerConfig` React Context is available across every component.

    ```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
    import {
      LivepeerConfig,
      createReactClient,
      studioProvider,
    } from '@livepeer/react-native';

    const client = createReactClient({
      provider: studioProvider({ apiKey: 'yourStudioApiKey' }),
    });

    function App() {
      return (
        <LivepeerConfig client={client}>
          <SomeComponent />
        </LivepeerConfig>
      );
    }
    ```
  </Tab>
</Tabs>

## Enjoy!

Use hooks! Every component inside the `LivepeerConfig` is now set up to use the
livepeer hooks.

<Tabs>
  <Tab title="React">
    ```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
    import { useAsset } from '@livepeer/react';

    function SomeComponent() {
      const asset = useAsset({ assetId: 'd8e8b87d-6774-4083-a2d7-4e85872d18cd' });

      return <div>Asset: {asset.name}</div>;
    }
    ```
  </Tab>

  <Tab title="React Native">
    ```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
    import { useAsset } from '@livepeer/react-native';

    function SomeComponent() {
      const asset = useAsset({ assetId: 'd8e8b87d-6774-4083-a2d7-4e85872d18cd' });

      return <div>Asset: {asset.name}</div>;
    }
    ```
  </Tab>
</Tabs>

Want to learn more? Continue reading the documentation for more details.