Skip to content

Commit 6c3bde5

Browse files
fuma-namafuma-nama
committed
UI: Prefer importing <RootProvider /> from fumadocs-ui/provider/<framework> 
1 parent 43db875 commit 6c3bde5

File tree

39 files changed

+160
-125
lines changed

39 files changed

+160
-125
lines changed

‎.changeset/ninety-lamps-dress.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'fumadocs-ui': patch
3+
---
4+
5+
**Prefer importing `<RootProvider />` from `fumadocs-ui/provider/<framework>`**
6+
7+
- Old `fumadocs-ui/provider` will be kept, as it's used by majority of previous projects.
8+
- New guides & templates will follow the new recommendation.

‎apps/docs/content/docs/ui/(ui)/layouts/root-provider.mdx‎

Lines changed: 42 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@ for search dialog. It should be located at the root layout.
88

99
## Usage
1010

11+
Import it according to your React.js framework:
12+
1113
```jsx tab="Next.js"
12-
import { RootProvider } from 'fumadocs-ui/provider';
14+
import { RootProvider } from 'fumadocs-ui/provider/next';
1315

1416
export default function Layout({ children }) {
1517
return (
@@ -22,8 +24,45 @@ export default function Layout({ children }) {
2224
}
2325
```
2426

25-
```jsx tab="Others"
26-
import { RootProvider } from 'fumadocs-ui/provider/base';
27+
```jsx tab="React Router"
28+
import { RootProvider } from 'fumadocs-ui/provider/react-router';
29+
30+
export function Layout({ children }) {
31+
return (
32+
<html lang="en">
33+
<body>
34+
<RootProvider>{children}</RootProvider>
35+
</body>
36+
</html>
37+
);
38+
}
39+
```
40+
41+
```jsx tab="Tanstack"
42+
import {
43+
HeadContent,
44+
Scripts,
45+
} from '@tanstack/react-router';
46+
import { RootProvider } from 'fumadocs-ui/provider/tanstack';
47+
48+
function RootDocument({ children }: { children: React.ReactNode }) {
49+
return (
50+
<html suppressHydrationWarning>
51+
<head>
52+
<HeadContent />
53+
</head>
54+
<body className="flex flex-col min-h-screen">
55+
<RootProvider>{children}</RootProvider>
56+
<Scripts />
57+
</body>
58+
</html>
59+
);
60+
}
61+
62+
```
63+
64+
```jsx tab="Waku"
65+
import { RootProvider } from 'fumadocs-ui/provider/waku';
2766

2867
export default function Layout({ children }) {
2968
return (

‎apps/docs/content/docs/ui/(ui)/theme.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ RTL (Right-to-left) layout is supported.
4646
To enable RTL, set the `dir` prop to `rtl` in body and root provider (required for Radix UI).
4747

4848
```tsx
49-
import { RootProvider } from 'fumadocs-ui/provider';
49+
import { RootProvider } from 'fumadocs-ui/provider/<framework>';
5050
import type { ReactNode } from 'react';
5151

5252
export default function RootLayout({ children }: { children: ReactNode }) {

‎apps/docs/content/docs/ui/internationalization/next.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ Create a `/app/[lang]` folder, and move your pages/layouts into it, except route
5757
Provide UI translations and other config to `<RootProvider />`, the English translations are used when `translations` is not specified.
5858

5959
```tsx title="app/[lang]/layout.tsx"
60-
import { RootProvider } from 'fumadocs-ui/provider';
60+
import { RootProvider } from 'fumadocs-ui/provider/next';
6161
import { defineI18nUI } from 'fumadocs-ui/i18n';
6262
import { i18n } from '@/lib/i18n';
6363

‎apps/docs/content/docs/ui/manual-installation/next.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ Create a file for MDX components:
3232
Wrap the entire application inside [Root Provider](/docs/ui/layouts/root-provider), and add required styles to `body`.
3333

3434
```tsx title="app/layout.tsx"
35-
import { RootProvider } from 'fumadocs-ui/provider';
35+
import { RootProvider } from 'fumadocs-ui/provider/next';
3636
import type { ReactNode } from 'react';
3737

3838
export default function Layout({ children }: { children: ReactNode }) {

‎apps/docs/content/docs/ui/manual-installation/react-router.mdx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,7 @@ Wrap your entire app under Fumadocs providers:
5858

5959
```tsx title="root.tsx"
6060
import { Links, Meta, Scripts, ScrollRestoration } from 'react-router';
61-
import { RootProvider } from 'fumadocs-ui/provider/base';
62-
import { ReactRouterProvider } from 'fumadocs-core/framework/react-router';
61+
import { RootProvider } from 'fumadocs-ui/provider/react-router';
6362
import './app.css';
6463

6564
export function Layout({ children }: { children: React.ReactNode }) {
@@ -72,10 +71,8 @@ export function Layout({ children }: { children: React.ReactNode }) {
7271
<Links />
7372
</head>
7473
<body className="flex flex-col min-h-screen">
75-
{/* [!code ++:3] */}
76-
<ReactRouterProvider>
77-
<RootProvider>{children}</RootProvider>
78-
</ReactRouterProvider>
74+
{/* [!code ++] */}
75+
<RootProvider>{children}</RootProvider>
7976
<ScrollRestoration />
8077
<Scripts />
8178
</body>

‎apps/docs/content/docs/ui/manual-installation/tanstack-start.mdx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,7 @@ import {
5151
Scripts,
5252
} from '@tanstack/react-router';
5353
import * as React from 'react';
54-
import { RootProvider } from 'fumadocs-ui/provider/base';
55-
import { TanstackProvider } from 'fumadocs-core/framework/tanstack';
54+
import { RootProvider } from 'fumadocs-ui/provider/tanstack';
5655

5756
export const Route = createRootRoute({
5857
component: RootComponent,
@@ -73,10 +72,8 @@ function RootDocument({ children }: { children: React.ReactNode }) {
7372
<HeadContent />
7473
</head>
7574
<body className="flex flex-col min-h-screen">
76-
{/* [!code ++:3] */}
77-
<TanstackProvider>
78-
<RootProvider>{children}</RootProvider>
79-
</TanstackProvider>
75+
{/* [!code ++] */}
76+
<RootProvider>{children}</RootProvider>
8077
<Scripts />
8178
</body>
8279
</html>

‎apps/docs/content/docs/ui/search/.shared.mdx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
### Replace Search Dialog
22

3-
Replace the search dialog with yours from `<RootProvider />`:
3+
Replace the search dialog with yours from [`<RootProvider />`](/docs/ui/root-provider):
44

55
```tsx
6-
import { RootProvider } from 'fumadocs-ui/provider';
6+
import { RootProvider } from 'fumadocs-ui/provider/<framework>';
77
// [!code ++]
88
import SearchDialog from '@/components/search';
9-
import type { ReactNode } from 'react';
109

1110
<RootProvider
1211
// [!code ++:3]
@@ -22,7 +21,7 @@ If it was in a server component, you would need a separate client component for
2221

2322
```tsx tab="provider.tsx"
2423
'use client';
25-
import { RootProvider } from 'fumadocs-ui/provider';
24+
import { RootProvider } from 'fumadocs-ui/provider/<framework>';
2625
import SearchDialog from '@/components/search';
2726
import type { ReactNode } from 'react';
2827

‎apps/docs/content/docs/ui/search/index.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ You can customise some configurations from root provider.
1010
For example, to disable search UI:
1111

1212
```tsx title="app/layout.tsx"
13-
import { RootProvider } from 'fumadocs-ui/provider';
13+
import { RootProvider } from 'fumadocs-ui/provider/<framework>';
1414
import type { ReactNode } from 'react';
1515

1616
export default function Layout({ children }: { children: ReactNode }) {
@@ -35,7 +35,7 @@ export default function Layout({ children }: { children: ReactNode }) {
3535
Customise the hot keys to trigger search dialog, by default it's <kbd>⌘</kbd> <kbd>K</kbd> or <kbd>Ctrl</kbd> <kbd>K</kbd>.
3636

3737
```tsx
38-
import { RootProvider } from 'fumadocs-ui/provider';
38+
import { RootProvider } from 'fumadocs-ui/provider/<framework>';
3939

4040
<RootProvider
4141
search={{

‎examples/content-collections/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { RootProvider } from 'fumadocs-ui/provider';
1+
import { RootProvider } from 'fumadocs-ui/provider/next';
22
import 'fumadocs-ui/style.css';
33
import { Inter } from 'next/font/google';
44
import type { ReactNode } from 'react';

0 commit comments

Comments
 (0)