UI: add shadcn.css color preset

.changeset/tame-jeans-show.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Add `shadcn.css` preset

apps/docs/content/docs/ui/theme.mdx

@@ -45,21 +45,6 @@ export default function RootLayout({ children }: { children: ReactNode }) {
 }
 ```
 
-### Prefix
-
-Fumadocs UI has its own colors, animations, and utilities.
-By default, it adds a `fd-` prefix to avoid conflicts with Shadcn UI or your own CSS variables.
-
-You can use them without the prefix by adding some aliases:
-
-```css title="Tailwind CSS"
-@theme {
-  --color-primary: var(--color-fd-primary);
-}
-```
-
-> You can use it with CSS media queries for responsive design.
-
 ### Layout Width
 
 Customise the max width of docs layout with CSS Variables.
@@ -74,17 +59,15 @@ Customise the max width of docs layout with CSS Variables.
 
 ## Tailwind CSS Preset
 
-The Tailwind CSS preset introduces new colors and extra utilities including `fd-steps`.
+Fumadocs UI adds its own colors, animations, and utilities with Tailwind CSS preset.
 
-### Themes
+### Colors
 
 It comes with many themes out-of-the-box, you can pick one you prefer.
 
 ```css
 @import 'fumadocs-ui/css/<theme>.css';
-
-/* Example */
-@import 'fumadocs-ui/css/black.css';
+@import 'fumadocs-ui/css/preset.css';
 ```
 
 <Tabs items={['neutral', 'black', 'vitepress', 'dusk', 'catppuccin', 'ocean', 'purple']}>
@@ -133,9 +116,7 @@ It comes with many themes out-of-the-box, you can pick one you prefer.
 
 </Tabs>
 
-### Colors
-
-The design system was inspired by [Shadcn UI](https://ui.shadcn.com), you can easily customize the colors using CSS variables.
+The design system was inspired by [Shadcn UI](https://ui.shadcn.com), you can also customize the colors using CSS variables.
 
 ```css title="global.css"
 :root {
@@ -147,6 +128,15 @@ The design system was inspired by [Shadcn UI](https://ui.shadcn.com), you can ea
 }
 ```
 
+For Shadcn UI, you can use the `shadcn` preset instead.
+It uses colors from your Shadcn UI theme.
+
+```css
+@import 'tailwindcss';
+@import 'fumadocs-ui/css/shadcn.css';
+@import 'fumadocs-ui/css/preset.css';
+```
+
 ### Typography
 
 We have a built-in plugin forked from [Tailwind CSS Typography](https://tailwindcss.com/docs/typography-plugin).

packages/ui/css/shadcn.css

@@ -0,0 +1,18 @@
+@theme {
+  --color-fd-background: var(--background);
+  --color-fd-foreground: var(--foreground);
+  --color-fd-muted: var(--muted);
+  --color-fd-muted-foreground: var(--muted-foreground);
+  --color-fd-popover: var(--popover);
+  --color-fd-popover-foreground: var(--popover-foreground);
+  --color-fd-card: var(--card);
+  --color-fd-card-foreground: var(--card-foreground);
+  --color-fd-border: var(--border);
+  --color-fd-primary: var(--primary);
+  --color-fd-primary-foreground: var(--primary-foreground);
+  --color-fd-secondary: var(--secondary);
+  --color-fd-secondary-foreground: var(--secondary-foreground);
+  --color-fd-accent: var(--accent);
+  --color-fd-accent-foreground: var(--accent-foreground);
+  --color-fd-ring: var(--ring);
+}

packages/ui/src/components/codeblock.tsx

@@ -2,9 +2,9 @@
 import { Check, Copy } from 'lucide-react';
 import {
   type ButtonHTMLAttributes,
+  forwardRef,
   type HTMLAttributes,
   type ReactNode,
-  forwardRef,
   useCallback,
   useRef,
 } from 'react';
@@ -90,13 +90,13 @@ export const CodeBlock = forwardRef<HTMLElement, CodeBlockProps>(
         ref={ref}
         {...props}
         className={cn(
-          'not-prose group fd-codeblock relative my-6 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm',
+          'not-prose group fd-codeblock relative my-4 overflow-hidden rounded-lg border bg-fd-secondary/50 text-sm',
           keepBackground && 'bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg)',
           props.className,
         )}
       >
         {title ? (
-          <div className="flex flex-row items-center gap-2 border-b bg-fd-muted px-4 py-1.5">
+          <div className="flex items-center gap-2 border-b bg-fd-muted px-4 py-1.5">
             {icon ? (
               <div
                 className="text-fd-muted-foreground [&_svg]:size-3.5"