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

# React SDK Quickstart

> How to set up Frigade in your React app

<Steps>
  <Step title="Install the React SDK">
    <CodeGroup>
      ```txt npm theme={"system"}
      npm install @frigade/react
      ```

      ```txt yarn theme={"system"}
      yarn add @frigade/react
      ```

      ```txt pnpm theme={"system"}
      pnpm install @frigade/react
      ```
    </CodeGroup>
  </Step>

  <Step title="Add the Provider">
    Add the Frigade `Provider` component to your app. Make sure to paste in your **public** API key and user ID.
    Optionally, you can pass in user properties like `firstName`, `lastName`, and `email` to decorate the user profile in Frigade.

    ```jsx theme={"system"}
    import * as Frigade from "@frigade/react";

    const FRIGADE_API_KEY = "api_public_abcd1234";

    export const App = () => {
      const userId = "..."; // If no user id is provided, Frigade will generate a guest id

      return (
        <Frigade.Provider
          apiKey={FRIGADE_API_KEY}
          userId={userId}
          userProperties={{
            firstName: "John",
            lastName: "Doe",
            email: "john.doe@acme.com"
          }}
        >
          {/* ... */}
        </Frigade.Provider>
      );
    };
    ```

    For a full list of supported properties, see the [Provider documentation](/sdk/provider).
  </Step>

  <Step title="Use your first component">
    That's pretty much it! You can now use the SDK. Here's an example of how to use the `Announcement` component:

    ```tsx theme={"system"}
    import * as Frigade from "@frigade/react";

    export const DemoComponent = () => {
        return <Frigade.Announcement flowId="flow_abcd1234" />;
    };
    ```

    Be sure to create an `Announcement` in Frigade web dashboard and link the FlowId to the component above. Check out our general [Quickstart](/quickstart) for more information.
  </Step>
</Steps>

## Next steps

Now that you have Frigade running in your application, you will likely want to style them to fit your brand.
See the [styling guide](/sdk/styling/theming) to get started.