diff --git a/.changeset/silly-impalas-double.md b/.changeset/silly-impalas-double.md
new file mode 100644
index 000000000..9813689d9
--- /dev/null
+++ b/.changeset/silly-impalas-double.md
@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Add css prefix by default
diff --git a/apps/docs/content/docs/ui/theme.mdx b/apps/docs/content/docs/ui/theme.mdx
index 27bf17d54..66135e0fe 100644
--- a/apps/docs/content/docs/ui/theme.mdx
+++ b/apps/docs/content/docs/ui/theme.mdx
@@ -44,11 +44,7 @@ To enable RTL, set the `dir` prop to `rtl` in body and root provider (required f
import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';
-export default function RootLayout({
- children,
-}: {
- children: ReactNode;
-}): ReactNode {
+export default function RootLayout({ children }: { children: ReactNode }) {
return (
@@ -63,6 +59,26 @@ export default function RootLayout({
Fumadocs UI provides some CSS variables for customising the layout.
+### Prefix
+
+By default, it has a `fd-` prefix to avoid conflicts with Shadcn UI or your own CSS variables.
+
+You can set or remove the prefix in `createPreset`:
+
+```js
+import { createPreset } from 'fumadocs-ui/tailwind-plugin';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+ presets: [
+ createPreset({
+ // no prefix
+ cssPrefix: '',
+ }),
+ ],
+};
+```
+
### Navbar Height
When the default navbar is replaced, the layout may overlap with your new navbar.
diff --git a/packages/create-app/template/+shared/app/(home)/layout.tsx b/packages/create-app/template/+shared/app/(home)/layout.tsx
index 608a58b1d..1dd4684d0 100644
--- a/packages/create-app/template/+shared/app/(home)/layout.tsx
+++ b/packages/create-app/template/+shared/app/(home)/layout.tsx
@@ -2,10 +2,6 @@ import type { ReactNode } from 'react';
import { HomeLayout } from 'fumadocs-ui/layouts/home';
import { baseOptions } from '@/app/layout.config';
-export default function Layout({
- children,
-}: {
- children: ReactNode;
-}): React.ReactElement {
+export default function Layout({ children }: { children: ReactNode }) {
return {children};
}
diff --git a/packages/create-app/template/+tailwindcss/tailwind.config.js b/packages/create-app/template/+tailwindcss/tailwind.config.js
index c9b20f90c..c343ccec8 100644
--- a/packages/create-app/template/+tailwindcss/tailwind.config.js
+++ b/packages/create-app/template/+tailwindcss/tailwind.config.js
@@ -1,3 +1,4 @@
+// @ts-check
import { createPreset } from 'fumadocs-ui/tailwind-plugin';
/** @type {import('tailwindcss').Config} */
diff --git a/packages/ui/src/tailwind-plugin.ts b/packages/ui/src/tailwind-plugin.ts
index 769d1be15..a5d1509a2 100644
--- a/packages/ui/src/tailwind-plugin.ts
+++ b/packages/ui/src/tailwind-plugin.ts
@@ -120,7 +120,7 @@ function createTailwindColors(
}
export const docsUi = plugin.withOptions(
- ({ cssPrefix = '', preset = 'default', layoutWidth = '100vw' } = {}) => {
+ ({ cssPrefix = 'fd', preset = 'default', layoutWidth = '100vw' } = {}) => {
return ({ addBase, addComponents, addUtilities }) => {
const { light, dark, css } =
typeof preset === 'string' ? presets[preset] : preset;