[sdserranog]

What this is

Step 2 of the Fumadocs follow-ups, stacked on #1253 (the page shell). The page content now renders with Fumadocs' own components and typography instead of the Nextra theme's, which were copied over during the migration.

• No MDX changes. Thin wrappers in components/mdx take the props the 180 pages were written with (<Tabs storageKey>, <Cards.Card>, <Callout type="warning">, numbered ### inside <Steps>).
• Removed: the ported Nextra renderers (headings, links, lists, tables, code blocks, tabs, copy buttons, icons) and about 500 lines of Nextra CSS.
• Brand colours and fonts are not in this PR. That's step 3.

Preview: https://docs-git-fumadocs-native-content-arcade-ai.vercel.app

Before and after

Left is #1253, whose page content is the same as production. Right is this PR. Pink numbers mark what changed and match the list under each image.

Steps and code blocks

Highlighted lines

Tabs

Tabs now remember your pick by name, not position. Production remembered the position. So picking "JavaScript" on a page that lists Python first opened Python on "Secure auth in production", which lists JavaScript first. Here the same pick opens JavaScript.

Video

Tables and callouts

Cards

Collapsible sections

Toolkit pages

Light mode

Phone

How it was done

• mdx-components.tsx starts from fumadocs-ui/mdx, so links, code blocks, tables and images are Fumadocs' own.
• The MDX body sits in Fumadocs' DocsBody typography. The home page is built from its own components and stays outside it.
• Callouts: Fumadocs' Callout. Nextra's types map onto Fumadocs' (default becomes a tip, important a warning).
• Steps: Fumadocs' fd-steps / fd-step utilities number the headings inside <Steps>, so pages need no <Step> wrappers.
• Tabs: built on Fumadocs' tabs.
  • storageKey becomes Fumadocs' group sync, saved for the next visit.
  • A saved pick that a group has no tab for is ignored, so a group never ends up with no open panel. That includes picks saved by production, which stored a position like 1.
  • "TypeScript" and "JavaScript" count as the same pick: most groups say JavaScript, a few say TypeScript.
  • Every panel stays in the HTML, so search and links still reach a closed tab, and Fumadocs opens the tab a link points into.
• Code blocks: Fumadocs' code block, with a title bar, language icon, line numbers and {1-3} line highlighting. Content needs no change.
• Cards: Fumadocs' cards. A card linking to a docs page shows that page's description.
• Collapsible sections (<details>): drawn like Fumadocs' accordion but kept as the native element. Fumadocs' Accordion leaves a closed body out of the page, which would hide it from search and find-in-page.
• Headings: same look as Fumadocs' and the same ids. Fumadocs' copy-link button puts a hidden "Copy Anchor Link" label inside the heading, so this one leaves it out. Otherwise every search record and the heading's accessible name would end in "Copy Anchor Link".
• Self-styled components opt out of the typography with not-prose, the Fumadocs convention: the client and framework cards, sample apps and auth provider cards. Without it, every line inside those link cards got underlined.

What we checked so nothing broke

Each check compared #1253's preview with this branch.

• Search records: I ran what the Algolia crawler indexes (headings and text, after its remove rules) on 40 pages.
  • Headings and record counts are identical.
  • The only differences: the stray space the Nextra external-link arrow left before punctuation is gone ("dashboard ." is now "dashboard.").
• Markdown export (/llms.mdx/*, used by Copy Markdown and agents): byte-for-byte identical on the same 40 pages.
• SEO: title, description, canonical link and H1 are identical on the same 40 pages. robots.txt and llms.txt are identical; the sitemap differs only in build timestamps.
• Tabs:
  • Groups switch together, and the pick survives a reload.
  • A saved value from production opens the first tab.
  • A link to a heading inside a closed tab opens that tab: on a fresh load, from the table of contents (desktop and phone), and when the URL already has that hash (a gap production also has, fixed here).
• Screens: desktop and phone, dark and light, guides, a quickstart, hub pages, a toolkit page and the home page (unchanged).
• Repo checks: lint, typecheck, build and 911 tests pass, including new tests for the tab rule.

Two layout issues found while reviewing are fixed here:

• Tall JSX table rows: table cells written as JSX over several lines picked up paragraph margins. They now sit flush.
• Doubled quote marks: Fumadocs' typography added its own quote marks around blockquotes that already have them. It no longer does.

Visible changes to know about

• Typography: sizes and spacing follow Fumadocs' typography. For example, h2 headings are smaller and have no underline.
• No external-link arrow: external links lose the small arrow Nextra added.
• Bash code blocks without a file name lose the "Terminal" bar with the three dots.
• On phones, code blocks scroll sideways instead of wrapping.
• Short pages: the page footer sits at the bottom of the screen (Fumadocs' layout).

Not in this PR

• Brand colours and fonts mapped onto Fumadocs' variables (step 3). Some tab labels in light mode are low-contrast until then.
• Changing the MDX itself to Fumadocs' native tags (a later step).

The images live on the pr-1254-media branch, which holds only media and can be deleted after merge.

🤖 Generated with Claude Code

---

Note

Medium Risk
Wide change to how every docs page renders (typography, tabs, code blocks, headings) with intentional UX differences from production; MDX source is untouched but visual and interaction regressions are the main risk.

Overview
Docs content now uses Fumadocs typography and components instead of the ported Nextra theme. MDX pages are unchanged; wrappers keep Nextra-style props (storageKey, callout types, <Cards.Card>, etc.).

The docs route wraps non-landing MDX in DocsBody. mdx-components.tsx spreads fumadocs-ui/mdx for prose, links, and code blocks, and drops the custom Nextra element renderers (elements, pre, code-buttons, tabs.client, icons). Callouts, cards, steps, and tables delegate to Fumadocs; tabs use SyncedTabs (label-based sync, invalid saved picks ignored, hash/TOC deep links); <details> stays native for search/find-in-page; headings use a custom copy-link control without polluting accessible names.

global.css removes the large Nextra “content parity” block and adds small .prose fixes (task lists, blockquotes, table cells, hidden tab-label headings). Shiki in source.config.ts maps fence {line} meta to Fumadocs’ highlighted class instead of reshaping output for Nextra pre markup.

Card/grid components add not-prose so Fumadocs typography does not restyle them. tabValue tests cover cross-group tab memory.

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

[vercel]

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

Project	Deployment	Actions	Updated
docs	Ready	Preview	Oct 20, 2026 7:33pm UTC

[cursor]

Stale Bugbot comment from a previous run.

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit c491f13. Configure here.}