Temi

Utilizzo

Nota: è supportato solo Tailwind CSS v4:

@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

/* path of `fumadocs-ui` relative to the CSS file */
@source '../node_modules/fumadocs-ui/dist/**/*.js';

Modifiche preflight

Utilizzando il plug-in CSS Tailwind o il foglio di stile predefinito, il bordo, il testo e lo sfondo predefiniti i colori verranno cambiati

Modalità chiaro/scuro

Fumadocs supporta le modalità chiaro/scuro con next-themes, è incluso in Root Provider.

Vedi Root Provider per saperne di più.

RTL Disposizione

È supportato il layout RTL (da destra a sinistra).

Per abilitare RTL, imposta la prop dir su rtl nel corpo e nel provider root (richiesto per Radix UI).

import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body dir="rtl">
        <RootProvider dir="rtl">{children}</RootProvider>
      </body>
    </html>
  );
}

Prefisso

L'interfaccia utente di Fumadocs ha i propri colori, animazioni e utilità. Per impostazione predefinita, aggiunge un prefisso fd- per evitare conflitti con l'interfaccia utente di Shadcn o con le tue variabili CSS.

Puoi usarli senza il prefisso aggiungendo alcuni alias:

@theme {
  --color-primary: var(--color-fd-primary);
}

Larghezza layout

Personalizza la larghezza massima del layout dei documenti con le variabili CSS.

:root {
  --fd-layout-width: 1400px;
}

Preimpostazione CSS Tailwind

La preimpostazione CSS Tailwind introduce nuovi colori e utilità extra tra cui fd-steps.

Temi

Viene fornito con molti temi pronti all'uso, puoi sceglierne uno che preferisci.

@import 'fumadocs-ui/css/<theme>.css';

/* Example */
@import 'fumadocs-ui/css/black.css';

neutralblackvitepressduskcatppuccinoceanpurple

Colori

Il sistema di progettazione è stato ispirato da Shadcn UI, puoi facilmente personalizzare i colori utilizzando le variabili CSS.

:root {
  --color-fd-background: hsl(0, 0%, 100%);
}

.dark {
  --color-fd-background: hsl(0, 0%, 0%);
}

Tipografia

Abbiamo un plugin integrato derivato da Tailwind CSS Typography.

Il plugin aggiunge una classe prose e varianti per personalizzarlo.

<div className="prose">
  <h1>Good Heading</h1>
</div>