apps/docs/app/(home)/page.tsx

@@ -689,7 +689,7 @@ function Features() {
         description="Fumadocs CLI creates interactive components for your docs, offering a rich experience to your users."
       >
         <CodeBlock
-          code="npx fumadocs add accordion"
+          code="npx @fumadocs/cli add"
           lang="bash"
           wrapper={{
             title: 'Terminal',

apps/docs/app/docs/[...slug]/page.tsx

@@ -4,7 +4,6 @@ import {
   DocsBody,
   DocsTitle,
   DocsDescription,
-  DocsCategory,
 } from 'fumadocs-ui/page';
 import { notFound } from 'next/navigation';
 import {
@@ -24,7 +23,7 @@ import { openapi, source } from '@/lib/source';
 import { Wrapper } from '@/components/preview/wrapper';
 import { metadataImage } from '@/lib/metadata-image';
 import { File, Folder, Files } from 'fumadocs-ui/components/files';
-import { Mermaid } from '@theguild/remark-mermaid/mermaid';
+import { Mermaid } from '@/components/mdx/mermaid';
 import { Rate } from '@/components/rate';
 import { repo, owner, onRateAction } from '@/lib/github';
 import type { MDXComponents } from 'mdx/types';
@@ -38,6 +37,8 @@ import Link from 'fumadocs-core/link';
 import { UiOverview } from '@/components/ui-overview';
 import { AutoTypeTable } from 'fumadocs-typescript/ui';
 import { createGenerator } from 'fumadocs-typescript';
+import { getPageTreePeers } from 'fumadocs-core/server';
+import { Card, Cards } from 'fumadocs-ui/components/card';
 
 function PreviewRenderer({ preview }: { preview: string }): ReactNode {
   if (preview && preview in Preview) {
@@ -137,22 +138,34 @@ export default async function Page(props: {
             Files,
             blockquote: Callout as unknown as FC<ComponentProps<'blockquote'>>,
             APIPage: openapi.APIPage,
-            DocsCategory: ({ slugs = params.slug }: { slugs?: string[] }) => (
-              <DocsCategory page={source.getPage(slugs)!} from={source} />
-            ),
+            DocsCategory: ({ url }) => {
+              return <DocsCategory url={url ?? page.url} />;
+            },
             UiOverview,
 
             ...(await import('@/content/docs/ui/components/tabs.client')),
             ...(await import('@/content/docs/ui/theme.client')),
           }}
         />
-        {page.data.index ? <DocsCategory page={page} from={source} /> : null}
+        {page.data.index ? <DocsCategory url={page.url} /> : null}
       </DocsBody>
       <Rate onRateAction={onRateAction} />
     </DocsPage>
   );
 }
 
+function DocsCategory({ url }: { url: string }) {
+  return (
+    <Cards>
+      {getPageTreePeers(source.pageTree, url).map((peer) => (
+        <Card key={peer.url} title={peer.name} href={peer.url}>
+          {peer.description}
+        </Card>
+      ))}
+    </Cards>
+  );
+}
+
 export async function generateMetadata(props: {
   params: Promise<{ slug: string[] }>;
 }): Promise<Metadata> {

apps/docs/app/global.css

@@ -10,12 +10,6 @@
 @source '../node_modules/fumadocs-openapi/dist/**/*.js';
 @plugin 'tailwindcss-animate';
 
-@layer base {
-  button {
-    cursor: pointer;
-  }
-}
-
 @theme {
   @keyframes stroke {
     from {

apps/docs/components/mdx/mermaid.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { useEffect, useId, useRef, useState } from 'react';
+import type { MermaidConfig } from 'mermaid';
+import { useTheme } from 'next-themes';
+
+export function Mermaid({ chart }: { chart: string }) {
+  const id = useId();
+  const [svg, setSvg] = useState('');
+  const containerRef = useRef<HTMLDivElement>(null!);
+  const { resolvedTheme } = useTheme();
+
+  useEffect(() => {
+    void renderChart();
+
+    async function renderChart() {
+      const mermaidConfig: MermaidConfig = {
+        startOnLoad: false,
+        securityLevel: 'loose',
+        fontFamily: 'inherit',
+        themeCSS: 'margin: 1.5rem auto 0;',
+        theme: resolvedTheme === 'dark' ? 'dark' : 'default',
+      };
+
+      const { default: mermaid } = await import('mermaid');
+
+      try {
+        mermaid.initialize(mermaidConfig);
+        const { svg } = await mermaid.render(
+          // strip invalid characters for `id` attribute
+          id.replaceAll(':', ''),
+          chart.replaceAll('\\n', '\n'),
+          containerRef.current,
+        );
+        setSvg(svg);
+      } catch (error) {
+        console.error('Error while rendering mermaid', error);
+      }
+    }
+  }, [chart, id, resolvedTheme]);
+
+  return <div ref={containerRef} dangerouslySetInnerHTML={{ __html: svg }} />;
+}

apps/docs/components/preview/dynamic-codeblock.tsx

@@ -27,7 +27,16 @@ export default function Example() {
           className="bg-transparent px-4 py-2 text-sm focus-visible:outline-none"
         />
       </div>
-      <DynamicCodeBlock lang={lang} code={code} options={{}} />
+      <DynamicCodeBlock
+        lang={lang}
+        code={code}
+        options={{
+          themes: {
+            light: 'catppuccin-latte',
+            dark: 'catppuccin-mocha',
+          },
+        }}
+      />
     </div>
   );
 }

apps/docs/content/docs/cli/index.mdx

@@ -5,14 +5,10 @@ description: The CLI tool that automates setups and installing components.
 
 ## Installation
 
-```package-install
-npm install @fumadocs/cli --save-dev
-```
-
 Initialize a config for CLI:
 
 ```package-install
-npx fumadocs
+npx @fumadocs/cli
 ```
 
 You can change the output paths of components in the config.
@@ -22,13 +18,13 @@ You can change the output paths of components in the config.
 Select and install components.
 
 ```package-install
-npx fumadocs add
+npx @fumadocs/cli add
 ```
 
 You can pass component names directly.
 
 ```package-install
-npx fumadocs add banner files
+npx @fumadocs/cli add banner files
 ```
 
 #### How the magic works?
@@ -46,27 +42,27 @@ Make sure to use the latest version of CLI
 A simple way to customise Fumadocs layouts.
 
 ```package-install
-npx fumadocs customise
+npx @fumadocs/cli customise
 ```
 
 ### Tree
 
 Generate files tree for Fumadocs UI `Files` component, using the `tree` command from your terminal.
 
-```bash
-pnpm fumadocs tree ./my-dir ./output.tsx
+```package-install
+npx @fumadocs/cli tree ./my-dir ./output.tsx
 ```
 
 You can output MDX file too:
 
-```bash
-pnpm fumadocs tree ./my-dir ./output.mdx
+```package-install
+npx @fumadocs/cli tree ./my-dir ./output.mdx
 ```
 
 See help for further details:
 
-```bash
-pnpm fumadocs tree -h
+```package-install
+npx @fumadocs/cli tree -h
 ```
 
 #### Example Output
@@ -96,7 +92,7 @@ export default (
 Some features of Fumadocs require copying code to get started, it is similar to `codemod` but for configuring features automatically.
 
 ```package-install
-npx fumadocs init
+npx @fumadocs/cli init
 ```
 
 Please note that some features may change your existing code, make sure to commit your changes to Git before running it.

apps/docs/content/docs/ui/(integrations)/mermaid.mdx

@@ -3,35 +3,45 @@ title: Mermaid
 description: Rendering diagrams in your docs
 ---
 
-Fumadocs doesn't have a built-in Mermaid wrapper provided, instead you can try different approaches easily.
+Fumadocs doesn't have a built-in Mermaid wrapper provided, we recommend using `mermaid` directly.
 
 ## Setup
 
-`@theguild/remark-mermaid` converts codeblocks to JSX elements using MDX and render them in a React component. It renders the graph on client side.
+Install the required dependencies, `next-themes` is used with Fumadocs to manage the light/dark mode.
 
 ```package-install
-@theguild/remark-mermaid
+mermaid next-themes
 ```
 
-Add their remark plugin, for example (in Fumadocs MDX):
+Create the Mermaid component:
 
-```ts title="source.config.ts"
-import { defineDocs, defineConfig } from 'fumadocs-mdx/config';
-import { remarkMermaid } from '@theguild/remark-mermaid';
+<include cwd meta='title="components/mdx/mermaid.tsx"'>
+  ./components/mdx/mermaid.tsx
+</include>
 
-export const { docs, meta } = defineDocs({
-  dir: 'content/docs',
-});
+> This is originally inspired by [remark-mermaid](https://github.com/the-guild-org/docs/blob/main/packages/remark-mermaid/src/mermaid.tsx).
 
-export default defineConfig({
-  mdxOptions: {
-    remarkPlugins: [remarkMermaid],
-  },
-});
+Add the component as a MDX component:
+
+```tsx title="/docs/[[...slug]]/page.tsx"
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import { Mermaid } from '@/components/mdx/mermaid';
+
+<MdxContent
+  components={{
+    ...defaultMdxComponents,
+    Mermaid,
+  }}
+/>;
 ```
 
-````md
-```mermaid
+## Usage
+
+Use it in MDX files.
+
+```mdx
+<Mermaid
+  chart="
 graph TD;
 subgraph AA [Consumers]
 A[Mobile app];
@@ -49,9 +59,9 @@ B --> Z;
 C --> Z;
 Z --> E;
 Z --> F;
-Z --> G;
+Z --> G;"
+/>
 ```
-````
 
 <Mermaid
   chart="

apps/docs/content/docs/ui/components/dynamic-codeblock.mdx

@@ -29,6 +29,10 @@ import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
   lang="ts"
   code='console.log("Hello World")'
   options={{
+    themes: {
+      light: 'github-light',
+      dark: 'github-dark',
+    },
     components: {
       // add/override components
     },

apps/docs/content/docs/ui/customisation.mdx

@@ -56,17 +56,17 @@ Since the design system is built on Tailwind CSS, you can customise it [with CSS
 Fumadocs CLI is a tool that installs components to your codebase, similar to Shadcn UI.
 
 ```package-install
-npx fumadocs
+npx @fumadocs/cli
 ```
 
 Use it to install Fumadocs UI components:
 
 ```package-install
-npx fumadocs add
+npx @fumadocs/cli add
 ```
 
 Or customise layouts:
 
 ```package-install
-npx fumadocs customise
+npx @fumadocs/cli customise
 ```

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

@@ -68,12 +68,12 @@ See [Middleware](/docs/headless/internationalization#middleware) for customisabl
 
 Create a `/app/[lang]` folder, and move all files (e.g. `page.tsx`, `layout.tsx`) from `/app` to the folder.
 
-Wrap the root provider inside `I18nProvider`, and provide available languages & translations to it.
+Provide UI translations and other config to `<RootProvider />`.
 Note that only English translations are provided by default.
 
 ```tsx title="app/[lang]/layout.tsx"
 import { RootProvider } from 'fumadocs-ui/provider';
-import { I18nProvider, type Translations } from 'fumadocs-ui/i18n';
+import type { Translations } from 'fumadocs-ui/i18n';
 
 const cn: Partial<Translations> = {
   search: 'Translated Content',
@@ -105,13 +105,17 @@ export default async function RootLayout({
   return (
     <html lang={lang}>
       <body>
-        <I18nProvider
-          locale={lang}
-          locales={locales}
-          translations={{ cn }[lang]}
+        <RootProvider
+          i18n={{
+            locale: lang,
+            // available languages
+            locales,
+            // translations for UI
+            translations: { cn }[lang],
+          }}
         >
-          <RootProvider>{children}</RootProvider>
-        </I18nProvider>
+          {children}
+        </RootProvider>
       </body>
     </html>
   );

apps/docs/content/docs/ui/layouts/docs.mdx

@@ -49,25 +49,6 @@ import { DocsLayout } from 'fumadocs-ui/layouts/docs';
 
 See [Navigation Guide](/docs/ui/navigation/sidebar#sidebar-tabs) for usages.
 
-#### Decoration
-
-Change the icon/styles of tabs.
-
-```tsx
-import { DocsLayout } from 'fumadocs-ui/layouts/docs';
-
-<DocsLayout
-  sidebar={{
-    tabs: {
-      transform: (option, node) => ({
-        ...option,
-        icon: 'my icon',
-      }),
-    },
-  }}
-/>;
-```
-
 ## Nav
 
 A mobile-only navbar, we recommend to customise it from `baseOptions`.