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

# Installation

> Install Daily React and its peer dependencies, and set up the DailyProvider at the root of your app.

## Install the packages

Install Daily React together with its two peer dependencies, `@daily-co/daily-js` and `jotai`:

<CodeGroup>
  ```bash npm theme={null}
  npm install @daily-co/daily-react @daily-co/daily-js jotai
  ```

  ```bash yarn theme={null}
  yarn add @daily-co/daily-react @daily-co/daily-js jotai
  ```

  ```bash pnpm theme={null}
  pnpm add @daily-co/daily-react @daily-co/daily-js jotai
  ```
</CodeGroup>

<Note>
  `@daily-co/daily-js` and `jotai` are **peer dependencies**, not bundled. Installing them explicitly guarantees that your app and Daily React share a single version of each. This matters if you also use `daily-js` directly (for example, to create your own call object) or use `jotai` for your app's own state, because two copies of either would not see each other's state.
</Note>

## Set up the provider

Everything in Daily React reads from a call object held by [`DailyProvider`](/reference/daily-react/daily-provider). Wrap the part of your tree that needs call state in it. The simplest setup, and the one we recommend for most apps, is to let the provider create and manage the call object: pass your room `url` (and any other [factory options](/reference/daily-js/factory-methods/create-call-object) such as `token` or `userName`) straight to `DailyProvider`.

```jsx theme={null}
import { DailyProvider } from '@daily-co/daily-react';

function App() {
  return (
    <DailyProvider url="https://your-domain.daily.co/room-name">
      <Call />
    </DailyProvider>
  );
}
```

The provider owns the call object's lifecycle, so there is no instance for you to create, store, or tear down. This is the hardest setup to get wrong, which is why it is the default recommendation.

<Warning>
  The provider recreates the call object whenever a creation prop's value changes (`url`, `token`, and so on), tearing down the current call and resetting all call and error state. These props are compared by value, so re-passing an equivalent object on each render is safe; only an actual value change triggers a rebuild, and nothing defers it while a call is in progress. Treat creation props as stable configuration for the lifetime of a call.
</Warning>

### Creating the call object yourself

Pass an existing `callObject` instead when you need direct control over the instance, for example to access it before the provider mounts, share it outside the provider tree, or create it conditionally. Create it with [`useCallObject`](/reference/daily-react/use-call-object):

```jsx theme={null}
import { DailyProvider, useCallObject } from '@daily-co/daily-react';

function App() {
  const callObject = useCallObject({
    options: {
      // createCallObject() factory options:
      // subscribeToTracksAutomatically: true,
    },
  });

  return (
    <DailyProvider callObject={callObject}>
      <Call />
    </DailyProvider>
  );
}
```

<Tip>
  If you create the instance yourself, use [`useCallObject`](/reference/daily-react/use-call-object) rather than calling `Daily.createCallObject()` directly. It guards against the `Duplicate DailyIframe instances are not allowed` error that otherwise appears under [React Strict Mode](https://react.dev/reference/react/StrictMode), where effects run twice in development.
</Tip>

## Embedding Daily Prebuilt instead

If you want Daily's ready-made call UI rather than a custom one, create a Prebuilt iframe with [`useCallFrame`](/reference/daily-react/use-call-frame) and hand it to the same provider:

```jsx theme={null}
import { DailyProvider, useCallFrame } from '@daily-co/daily-react';
import { useRef } from 'react';

function PrebuiltApp() {
  const wrapperRef = useRef(null);
  const callFrame = useCallFrame({
    parentElRef: wrapperRef,
    options: {
      iframeStyle: { width: '100%', height: '100%', border: '0' },
    },
  });

  return (
    <DailyProvider callObject={callFrame}>
      <div ref={wrapperRef} style={{ height: '100vh' }} />
    </DailyProvider>
  );
}
```

<Note>
  A Prebuilt iframe runs in a separate, secure browsing context. Some data the hooks expect is not available across that boundary, most notably raw audio and video tracks, so media hooks like [`useMediaTrack`](/reference/daily-react/use-media-track) will not return tracks for an iframe instance.
</Note>

## Next.js and server-side rendering

Daily React's hooks depend on browser APIs and React state, so they must run on the client.

* In the Next.js App Router, mark any component that imports Daily React hooks or components with `'use client'` at the top of the file.
* If a hook touches `window` or media devices during render, gate the component so it only mounts in the browser (for example, render it after the component has mounted, or with a dynamic import using `{ ssr: false }`).

```jsx theme={null}
'use client';

import { DailyProvider } from '@daily-co/daily-react';

export function CallRoot({ url, children }) {
  return <DailyProvider url={url}>{children}</DailyProvider>;
}
```

## Sharing state with your own Jotai store

If your app already uses Jotai, pass your store to both your `<Provider>` and to `DailyProvider` via the `jotaiStore` prop so Daily React's atoms live in the same store:

```jsx theme={null}
import { DailyProvider } from '@daily-co/daily-react';
import { createStore, Provider } from 'jotai';

const store = createStore();

function App() {
  return (
    <Provider store={store}>
      <DailyProvider url="https://your-domain.daily.co/room-name" jotaiStore={store}>
        <Call />
      </DailyProvider>
    </Provider>
  );
}
```

## Next steps

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/docs/daily-react/docs/quickstart">
    Put the provider to work in a full example.
  </Card>

  <Card title="The call object and provider" icon="box" href="/docs/daily-react/docs/call-object-and-provider">
    Lifecycle, joining, and leaving in depth.
  </Card>
</CardGroup>