Fumadocs Demo — Getting Started (No Imports)

Fumadocs Demo — Getting Started (No Imports)

This page is a self-contained demo for testing Fumadocs documentation features without importing any external components. It uses plain CSS, Tailwind/Tailwind-like snippets, and simple HTML/MDX examples so you can paste this into your docs and see predictable results.

Global CSS examples (use in styles/global.css)

Add the following CSS to test theme variables, layout width, light/dark mode, and RTL. These are plain CSS variables and utility rules — no imports.

styles/global.css
/* Layout width */
:root {
  --fd-layout-width: 1200px;
  --color-fd-background: hsl(0, 0%, 96%);
  --color-fd-foreground: hsl(0, 0%, 4%);
  --color-fd-muted: hsl(0, 0%, 96.1%);
  --color-fd-muted-foreground: hsl(0, 0%, 45.1%);
  --color-fd-card: hsl(0, 0%, 94.7%);
  --color-fd-border: hsla(0, 0%, 80%, 0.5);
  --color-fd-primary: hsl(220 90% 45%);
}

/* Dark mode */
.dark {
  --color-fd-background: hsl(220 14% 7%);
  --color-fd-foreground: hsl(0 0% 96%);
  --color-fd-card: hsl(220 10% 11%);
  --color-fd-border: hsla(0 0% 100% / 0.08);
  --color-fd-primary: hsl(220 90% 60%);
}

/* Base page */
html, body {
  height: 100%;
  margin: 0;
  background: var(--color-fd-background);
  color: var(--color-fd-foreground);
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Container */
.container {
  max-width: var(--fd-layout-width);
  margin: 0 auto;
  padding: 2rem;
}

/* Card */
.card {
  background: var(--color-fd-card);
  color: var(--color-fd-foreground);
  border: 1px solid var(--color-fd-border);
  border-radius: 0.5rem;
  padding: 1rem;
}

/* Simple utility for RTL support */
[dir='rtl'] .container {
  direction: rtl;
}

/* Typography (simple prose-like rules) */
.prose {
  line-height: 1.7;
  max-width: 65ch;
}
.prose h1, .prose h2, .prose h3 {
  color: var(--color-fd-foreground);
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}
.prose p { margin-bottom: 0.75rem; }

/* Tab-like visual (no JS) */
.tab-list { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.tab { padding: 0.5rem 1rem; border-radius: 9999px; background: transparent; border: 1px solid var(--color-fd-border); }
.tab--active { background: var(--color-fd-primary); color: white; border-color: transparent; }

/* Small responsive tweaks */
@media (max-width: 640px) {
  .container { padding: 1rem; }
}

Tailwind-like config (if you're using Tailwind)

If you are using Tailwind, add the Fumadocs preset to tailwind.config.cjs (example) and ensure your content globs include the MDX files. This snippet is safe to copy into your config.

tailwind.config.cjs
module.exports = {
  content: ['./app/**/*.{js,ts,jsx,tsx,mdx}', './content/**/*.{md,mdx}'],
  theme: {
    extend: {},
  },
  plugins: [],
  // if you have the preset installed, use it here; otherwise ignore.
  // presets: [require('fumadocs-ui/tailwind/preset')],
};

Note: the above presets line is commented out because this demo asked for no imports. Uncomment it if you have the preset installed.

Demo HTML/MDX content (paste into your .mdx file)

The examples below use only standard MDX/HTML and CSS classes defined earlier. They will render without importing any components.

<div className="container">

<div className="prose">

# Demo: Theme, Dark Mode, RTL, Typography

This page demonstrates theme variables, a simple card, tab-like controls (visual only), and prose typography without importing components.

</div>


<!-- Tab visuals (no JS) -->
<div className="tab-list" role="tablist" aria-label="Theme presets">
  <button className="tab tab--active" aria-selected="true">Neutral</button>
  <button className="tab">Dusk</button>
  <button className="tab">Ocean</button>
</div>

<!-- Example card -->
<section className="card" aria-labelledby="card-title">
  <h2 id="card-title">Example Card</h2>
  <p>This card uses CSS variables from the theme. Toggle dark mode by adding the <code>dark</code> class on the <code>html</code> element or add <code>class="dark"</code> on the <code>body</code> during local testing.</p>
</section>


<!-- Typography sample -->
<div className="prose" style={{ marginTop: '1rem' }}>
  <h3>Typography sample</h3>
  <p>This paragraph demonstrates the built-in prose styles: line length, spacing, and readable font sizing. Use these classes to ensure your MDX content looks consistent across pages.</p>
  <ul>
    <li>Readable line length</li>
    <li>Heading spacing</li>
    <li>Lists and code blocks</li>
  </ul>
</div>

</div>

How to toggle Dark / RTL for testing

  • Dark mode: add the dark class to the <html> or <body> element (e.g. <html class="dark">) to test dark colors.
  • RTL: set the dir attribute to rtl on the <html> or <body> element (e.g. <body dir="rtl">) to test right-to-left layouts. The CSS above will flip text direction for containers.

Troubleshooting notes

  • If you use Tailwind, ensure content globs include .mdx files so utilities are not purged.
  • For the picocolors error mentioned earlier, pin or override the package in your package.json if needed; this demo keeps everything on plain CSS to avoid runtime MDX plugin issues.

Quick test checklist

  1. Add styles/global.css with the CSS block above.
  2. Paste the MDX block into a new .mdx doc in your docs site.
  3. Load the page and confirm the card, tabs, and typography render.
  4. Toggle dark mode by adding class="dark" on html.
  5. Toggle RTL by adding dir="rtl" on body.

If you'd like, I can now:

  • Export this demo as a downloadable .mdx file, or
  • Convert the MDX sample into plain .html for quick static testing.

Tell me which you prefer.

CircuitUI Documentation

Build modern SaaS dashboard components.

Components

Components

On this page

Fumadocs Demo — Getting Started (No Imports)Global CSS examples (use in styles/global.css)Tailwind-like config (if you're using Tailwind)Demo HTML/MDX content (paste into your .mdx file)How to toggle Dark / RTL for testingTroubleshooting notesQuick test checklist