---
title: "React"
description: "Add Playstack session, account, audience, notification, analytics, and error state to React without treating client providers as security boundaries."
tags: ["frameworks","react","providers","hooks"]
---

Playstack domain React packages are headless bindings over portable services. They carry safe state through a component tree and expose application-neutral hooks; they do not configure a router, render branded UI, initialize vendor SDKs, or authorize server operations.

[Start with the React guide](/docs/frameworks/react/getting-started) to add session state and an application error boundary.

## Available React bindings

| Binding                                                                          | Core capability                                                      | Responsibility                                                            |
| -------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------- |
| [`@playstack/auth-react`](/docs/packages/identity/auth-react)                    | [`@playstack/auth`](/docs/packages/identity/auth)                    | Session state, auth actions, revalidation, and cross-tab synchronization. |
| [`@playstack/accounts-react`](/docs/packages/identity/accounts-react)            | [`@playstack/accounts`](/docs/packages/identity/accounts)            | Visible-account loading and active-account selection.                     |
| [`@playstack/errors-react`](/docs/packages/foundation/errors-react)              | [`@playstack/errors`](/docs/packages/foundation/errors)              | Reporter context and resettable render error boundaries.                  |
| [`@playstack/analytics-react`](/docs/packages/events-operations/analytics-react) | [`@playstack/analytics`](/docs/packages/events-operations/analytics) | Analytics context, reactive consent, and explicit route tracking.         |
| [`@playstack/audiences-react`](/docs/packages/communication/audiences-react)    | [`@playstack/audiences`](/docs/packages/communication/audiences)     | Subscribe and preference-center state with safe public responses.         |
| [`@playstack/notifications-react`](/docs/packages/communication/notifications-react) | [`@playstack/notifications`](/docs/packages/communication/notifications) | In-app inbox state, unread counts, pagination, and optimistic mutations. |

The binding accepts an already configured core service or transport. This keeps provider initialization, API origins, consent persistence, and framework routing in the application.

## Provider order

A useful default places operational reporting outside stateful product providers:

```text
ErrorsProvider
└── ErrorsBoundary
    └── PlaystackAnalyticsProvider
        └── PlaystackAuthProvider
            ├── AccountsProvider when account switching is needed
            └── Audience or notification providers where their UI is rendered
```

This is not a mandatory global provider stack. Mount providers only around the subtrees that consume them, and keep server-derived initial state as narrow as possible.

## Security boundary

`RequireSession` and account-aware navigation prevent confusing client transitions; they do not establish authorization. The server must revalidate authentication, membership, roles, entitlements, and API-key scopes for every protected operation.

## Framework composition

Use these same bindings beneath Next.js, another React meta-framework, or a client-rendered application. Router-specific behavior is opt-in: analytics exposes dedicated Pages and App Router helpers, while other routers call `analytics.page()` after their own completed-navigation signal.

## Optional application UI

[Chakra](/docs/packages/ui/chakra), [App UI](/docs/packages/ui/app-ui) and [Admin UI](/docs/packages/ui/admin-ui) add themes, controlled application compositions and the initial scoped members section. These are independent of auth/backend adoption. The host owns routes, data, mutations and authorization; Next Client Components hold callbacks and the Chakra system. See [Application interfaces](/features/application-ui).