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

# React

> Install Lucent in a React app built with Vite or Create React App.

<Tip>
  **Fully automated.** Both Vite and CRA are wired up completely by the CLI.
</Tip>

## Install with the CLI

```bash theme={null}
npx @lucenthq/cli init luc_pk_...
```

Pick **React** when prompted, then choose your build tool.

## Vite

<Steps>
  <Step title="Environment variable">
    `.env`:

    ```bash theme={null}
    VITE_LUCENT_PUBLIC_KEY=luc_pk_...
    ```
  </Step>

  <Step title="Provider component">
    `src/providers.tsx`:

    ```tsx theme={null}
    import { LucentProvider } from "@lucenthq/sdk/react";
    import type { ReactNode } from "react";

    export function Providers({ children }: { children: ReactNode }) {
      return (
        <LucentProvider publicKey={import.meta.env.VITE_LUCENT_PUBLIC_KEY}>
          {children}
        </LucentProvider>
      );
    }
    ```
  </Step>

  <Step title="Wrap the render call">
    `src/main.tsx`:

    ```tsx theme={null}
    import React from "react";
    import ReactDOM from "react-dom/client";
    import App from "./App";
    import { Providers } from "./providers";
    import "./index.css";

    ReactDOM.createRoot(document.getElementById("root")!).render(
      <React.StrictMode>
        <Providers><App /></Providers>
      </React.StrictMode>,
    );
    ```
  </Step>
</Steps>

## Create React App

<Steps>
  <Step title="Environment variable">
    `.env`:

    ```bash theme={null}
    REACT_APP_LUCENT_PUBLIC_KEY=luc_pk_...
    ```
  </Step>

  <Step title="Provider component">
    `src/providers.tsx`:

    ```tsx theme={null}
    import { LucentProvider } from "@lucenthq/sdk/react";
    import type { ReactNode } from "react";

    export function Providers({ children }: { children: ReactNode }) {
      return (
        <LucentProvider publicKey={process.env.REACT_APP_LUCENT_PUBLIC_KEY!}>
          {children}
        </LucentProvider>
      );
    }
    ```
  </Step>

  <Step title="Wrap the render call">
    `src/index.tsx`:

    ```tsx theme={null}
    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import './index.css';
    import App from './App';
    import { Providers } from './providers';

    const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
    root.render(
      <React.StrictMode>
        <Providers><App /></Providers>
      </React.StrictMode>
    );
    ```
  </Step>
</Steps>

## Notes

* Env var prefixes differ: Vite uses `VITE_`, CRA uses `REACT_APP_`. The CLI
  picks the right one for you.
* The provider wraps the render call in the entrypoint, not inside `App.tsx`.
  This keeps it outside of `React.StrictMode`'s double‑mount behavior so the
  session isn't reset on the development reload.