https://github.com/fuma-nama/fumadocs-shadcn
Example to use Shadcn UI with Fumadocs UI
https://github.com/fuma-nama/fumadocs-shadcn
fumadocs shadcn-ui
Last synced: 7 months ago
JSON representation
Example to use Shadcn UI with Fumadocs UI
- Host: GitHub
- URL: https://github.com/fuma-nama/fumadocs-shadcn
- Owner: fuma-nama
- Created: 2024-12-20T09:24:08.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-12-20T09:24:10.000Z (11 months ago)
- Last Synced: 2025-05-07T12:18:12.281Z (7 months ago)
- Topics: fumadocs, shadcn-ui
- Language: TypeScript
- Homepage:
- Size: 61.5 KB
- Stars: 4
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Fumadocs + Shadcn UI
Fumadocs UI uses a Tailwind CSS preset to add its own styles. With this design, we can improve the themes regularly and release as updates.
It adds colors, utilities, as well as some base styles including default `border-color`, `background-color` and `color`.
### With Shadcn UI
After `shadcn init`, the CSS variables may conflict. You can add the following to `createPreset` in `tailwind.config.js`:
```js
import { createPreset } from "fumadocs-ui/tailwind-plugin";
/** @type {import('tailwindcss').Config} */
export default {
presets: [
createPreset({
cssPrefix: "fuma-", // here!
}),
],
// other options
};
```
This will force Fumadocs to add prefixes to CSS variables.
Since Shadcn UI has its own default background color & text color, you need to remove these defaults from `global.css`, and instead apply them on layouts, like `app/(home)/layout.tsx` for example:
```tsx
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 }) {
return (
{children}
);
}
```
Now Fumadocs should work well with Shadcn UI.