> ## 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.

# Introduction

> What Daily React is, when to reach for it, and how it relates to daily-js.

Daily React is a helper library for building custom Daily calls in React. It does not replace [`daily-js`](/docs/daily-js/introduction): it sits on top of it and exposes the same call object, methods, and events through React hooks and components, so you can work with a call the way you already work with React state.

## Why use it

Building a custom call UI on raw `daily-js` means wiring event listeners by hand, mirroring call state into local component state, attaching media tracks to DOM nodes, and tearing all of that down on unmount. Daily React does that work for you:

* **Reactive state.** Hooks like [`useParticipantIds`](/reference/daily-react/use-participant-ids) and [`useMeetingState`](/reference/daily-react/use-meeting-state) re-render your component when the relevant call state changes. No manual `setState` inside event handlers.
* **Granular re-renders.** Hooks read from an internal store and subscribe only to the slice you ask for, so a participant muting their mic does not re-render every tile in your call.
* **Media components.** [`DailyVideo`](/reference/daily-react/daily-video) and [`DailyAudio`](/reference/daily-react/daily-audio) handle track attachment, autoplay quirks, and speaker management that are tedious to get right by hand.
* **Automatic cleanup.** Event subscriptions registered through hooks are torn down when the component unmounts.

<Tip>
  Daily React powers [Daily Prebuilt](/docs/prebuilt). If you have ever embedded Prebuilt, you have already shipped Daily React in production.
</Tip>

## When to use it (and when not to)

Daily React is for **[call object mode](/docs/daily-js/concepts/call-modes#call-object-mode)**: building your own call interface in React with full control over the UI.

| Your situation                                      | Recommendation                                                                                                                                     |
| --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| Custom call UI in a React app                       | Use Daily React                                                                                                                                    |
| Embedding [Daily Prebuilt](/docs/prebuilt) in React | Optional. You can use [`useCallFrame`](/reference/daily-react/use-call-frame) to manage the iframe, but Prebuilt also works with plain `daily-js`. |
| A non-React app, or a framework without hooks       | Use [`daily-js`](/docs/daily-js/introduction) directly                                                                                             |
| React Native                                        | Use [`@daily-co/react-native-daily-js`](/docs/react-native)                                                                                        |

<Note>
  **Building a voice or multimodal AI agent?** Reach for the [Pipecat React SDK](https://docs.pipecat.ai/client/react/introduction) (`@pipecat-ai/client-react`) instead. It is purpose-built for real-time AI agents and uses Daily as its transport, so you get the agent tooling out of the box rather than building it on Daily React yourself.
</Note>

## How it fits together

```mermaid theme={null}
%%{init: {'theme':'base','themeVariables':{'fontFamily':'ui-sans-serif, system-ui, sans-serif','fontSize':'14px','primaryColor':'#F1F3F5','primaryBorderColor':'#CDD5DC','primaryTextColor':'#1F2933','lineColor':'#0E9F9F','edgeLabelBackground':'#F1F3F5'}}}%%
flowchart TD
    app("<b>Your React app</b><br/>renders UI from hook state")
    react("<b>@daily-co/daily-react</b><br/>hooks and components · state via Jotai")
    js("<b>@daily-co/daily-js</b><br/>call object · methods · events")
    app -->|uses| react
    react -->|wraps| js
    classDef focal fill:#DCF5F3,stroke:#0E9F9F,stroke-width:2.5px;
    class react focal
```

Daily React manages its internal state with [Jotai](https://jotai.org/). Both `@daily-co/daily-js` and `jotai` are **peer dependencies**, so you install all three packages and they share a single version. See [Installation](/docs/daily-react/docs/installation) for the details.

## Prerequisites

* A Daily account and a room URL. Create a free account at [daily.co](https://www.daily.co) and create a room to get a URL like `https://your-domain.daily.co/room-name`.
* A React 18+ app. Daily React's hooks run on the client; for server-rendered frameworks like Next.js, see the [Installation](/docs/daily-react/docs/installation) notes.
* Familiarity with the daily-js [call object](/docs/daily-js/concepts/call-modes#call-object-mode), [participants](/docs/daily-js/concepts/participants), and [tracks](/docs/daily-js/concepts/tracks) concepts. The guides here link back to them rather than repeating them.

## Next steps

<CardGroup cols={2}>
  <Card title="Quickstart" icon="rocket" href="/docs/daily-react/docs/quickstart">
    Build a working call in a few minutes.
  </Card>

  <Card title="Installation" icon="wrench" href="/docs/daily-react/docs/installation">
    Install and set up the provider.
  </Card>

  <Card title="Thinking in Daily React" icon="brain" href="/docs/daily-react/docs/thinking-in-daily-react">
    The mental model behind the hooks.
  </Card>

  <Card title="API reference" icon="code" href="/reference/daily-react/daily-provider">
    The full API for every hook and component.
  </Card>
</CardGroup>