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

# Installation

> How to install and set up the Stytch React SDK in your application.

For a full walk-through of how to get up and running with a sign-up and login flow using Stytch, check out our [Quickstart Guide](/docs/get-started/quickstart).

<Steps>
  <Step title="Install Packages">
    Install the React package:

    ```bash theme={null}
    npm install @stytch/react
    ```
  </Step>

  <Step title="Create the Stytch client">
    Initialize the Stytch UI client, passing in your Project's `public_token` from the [Project Overview](https://stytch.com/dashboard) of the Stytch Dashboard.

    ```jsx theme={null}
    import { StytchClient } from '@stytch/react';

    const stytch = new StytchClient(
      import.meta.env.STYTCH_PUBLIC_TOKEN, // or process.env.STYTCH_PUBLIC_TOKEN for non-Vite based projects
    );
    ```
  </Step>

  <Step title="Wrap your application in <StytchProvider>">
    Next, pass the Stytch client to the `<StytchProvider>` component at the root of your application, making it accessible to all child components.

    ```jsx theme={null}
    import { StrictMode } from 'react';
    import { StytchProvider } from '@stytch/react';

    const root = ReactDOM.createRoot(document.getElementById("root")!);

    root.render(
      <StrictMode>
        <StytchProvider stytch={stytch}>
          <Router>
            <App />
          </Router>
        </StytchProvider>
      </StrictMode>
    );
    ```
  </Step>

  <Step title="Add your login flow">
    You have now initialized the Stytch client, and can add the [Stytch Login component](/docs/api-reference/consumer/frontend-sdks/react/prebuilt-ui/login/configuration) to get a robust, end-to-end login flow working with just a simple config.
  </Step>
</Steps>