> For the complete documentation index, see [llms.txt](https://docs.raydius-research.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.raydius-research.com/core-concepts/raydius-sdk/social-login-sdk/raydius-react-sdk/set-up-your-app-with-raydius-react-sdk.md).

# Set Up Your App with Raydius React SDK

Once you have your app ID, import the RaydiusProvider component into your project, and wrap your app with it. It is generally recommended to render it as close to the root of your application as possible.

Example:

\
Once you have your app ID, import the RaydiusProvider component into your project, and wrap your app with it. It is generally recommended to render it as close to the root of your application as possible.

```typescript
import { RaydiusProvider} from '@raydius/react’'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <RaydiusProvider config={{ appId: 'xxxxxx', theme: 'dark' }}>
      <Component {...pageProps} />
    </RaydiusProvider>
  )
}
```