docs: Generate installation provider setup tabs from ProviderSetupCode

[ntucker]

Requested by Nathaniel · project thread

Stacked on #4129; will be retargeted to master once that merges.

Motivation

docs/core/shared/_installation.mdx (rendered on Installation and <DataProvider />) hand-wrote the same Web / React Native / NextJS / Expo app-root code and Vue main.ts that #4129 generates in ProviderSetupCode. Its web tab still had ReactDOM.createRoot imported from react-dom.

Solution

managers (the children code block) and imports are now optional in ProviderSetupCode. Without them it renders a plain <DataProvider> / app.use(DataClientPlugin), and NextJS renders app/layout.tsx using DataProvider from @data-client/react/nextjs directly (no separate client Provider.tsx needed).

Before:

<TabItem value="web">

```tsx title="index.tsx"
import { DataProvider } from '@data-client/react';
import ReactDOM from 'react-dom';

ReactDOM.createRoot(document.body).render(
  <DataProvider>
    <App />
  </DataProvider>,
);
```

Alternatively [integrate state with redux](../guides/redux.md)

After:

<TabItem value="web">

<ProviderSetupCode platform="web" />

Alternatively [integrate state with redux](../guides/redux.md)

• Anansi tab, redux links and the NextJS guide button stay literal MDX.
• The Vue code-comment list of optional plugin overrides is now a sentence under the code block, linking managers to getDefaultManagers.
• The old NextJS/Expo blocks highlighted the DataProvider lines; generated blocks have no highlights.

Verified by rendering /docs/getting-started/installation, /vue/getting-started/installation, /docs/api/DataProvider and /docs|vue/api/LogoutManager (managers pages unchanged) in a local dev server; website typecheck and lint pass. Docs only, so no changeset.

Open questions

None.

🤖 Generated with Claude Code

https://claude.ai/code/session_01WS9omUKcWVGuPunL3VoKc4

---

Generated by Claude Code

---

Note

Low Risk
Documentation and a docs-site component only; no runtime library or API behavior changes.

Overview
Installation docs for Web, React Native, Next.js, Expo, and Vue replace duplicated inline snippets with shared <ProviderSetupCode platform="…" />, so setup examples stay aligned with the managers guide.

ProviderSetupCode now works without a managers child or extra imports: it emits plain <DataProvider> / app.use(DataClientPlugin) wiring. managers={managers} and the managers block are only included when children are passed (managers pages unchanged). For Next.js without managers, the sample is app/layout.tsx using @data-client/react/nextjs instead of a separate client Provider.tsx; with managers it still shows the client Provider.tsx pattern.

The Vue installation tab moves optional plugin overrides out of code comments into a short prose line linking managers to getDefaultManagers. Generated samples use createRoot from react-dom/client (replacing older react-dom usage in the hand-written web tab). Next.js/Expo highlight comments from the old MDX blocks are dropped in generated output.

^{Reviewed by Cursor Bugbot for commit ee45e7a. Bugbot is set up for automated code reviews on this repo. Configure here.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: ee45e7a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
docs-site	Ready	Preview	Oct 4, 2026 6:07pm UTC