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

# Swap in your own React Context providers

Custom Providers wrap the [Admin Panel](https://docs.frogbot.ai/admin/admin-navigation.md) with your own React Context. Register them through `admin.components.providers` in your FrogBot config:

```ts theme={"theme":"tokyo-night"}
import { buildConfig } from 'frogbot'

export default buildConfig({
  admin: {
    components: {
      providers: ['/components/ReviewProvider#ReviewProvider'],
    },
  },
})
```

Then create the provider as a Client Component:

```tsx theme={"theme":"tokyo-night"}
'use client'

import { createContext, use } from 'react'
import type { ReactNode } from 'react'

const ReviewContext = createContext({ enabled: true })

export function ReviewProvider({ children }: { children: ReactNode }) {
  return <ReviewContext value={{ enabled: true }}>{children}</ReviewContext>
}

export function useReview() {
  return use(ReviewContext)
}
```

See [Building Custom Components](https://docs.frogbot.ai/custom-components/overview.md#building-custom-components) for component path and client boundary details. Providers nest in array order, with the first entry outermost; `providers` is listed with the other root slots in [Root Components](https://docs.frogbot.ai/custom-components/root-components.md#config-options).

> [!WARNING]
>
> React Context is available to Client Components. Keep server-only work in a
> Server Component and pass serializable values into the provider.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.