Shadcn/ui

Own your design system.

Shadcn/ui

Open-system React component library powered by Radix UI Primitives, and Tailwind CSS.

Radix UI Primitives

Headless UI component library that complies with WAI-ARIA accessibility guidelines and handles complex interaction logic. Used by CodeSandbox, Node.js, Vercel, and more.

Tailwind CSS

Provides low-level primitive tokens to rapidly create design systems and scale them with ease.

While the Fumadocs UI design system is inspired by Shadcn/ui and also uses Tailwind CSS, it does not use the same tokens and is therefore not compatible. Installing Shadcn/ui will overwrite the current Tailwind CSS configuration, which will break Fumadocs UI.

Next.js allows for separate Root layouts for different routes, which will allow us to use both design systems without conflicts.

Separate design systems

Create (home)/ under app/. Copy global.css, layout.tsx, and page.tsx from app/ into app/(home)/.

Then cut/move layout.config.tsx, source.ts, and global.css into app/docs/.

Delete layout.tsx in app/.

You can click on the folders to expand them.

layout.tsx

global.css

layout.config.tsx

layout.tsx

page.tsx

source.ts

.gitignore

.map.ts

README.md

mdx-components.tsx

next-env.d.ts

next.config.mjs

package.json

pnpm-lock.yaml

postcss.config.js

tailwind.config.js

tsconfig.json

Terminal

pwd # /home/mfarabi/workspace/dirname
cd src/app
mkdir -p (home)
cp global.css layout.tsx page.tsx (home)/
mv layout.config.tsx source.ts global.css docs/
rm -rf layout.tsx

Now see the After tab.

Rename and modify files

Rename src/app/docs/global.css -> src/app/docs/fumadocs.global.css.

Rename tailwind.config.js, to -> tailwind.config.ts. Duplicate tailwind.config.ts, name it to -> tailwind.fumadocs.config.ts.

Make the following changes in the following files.

You can use these commands to rename the files:

Terminal

mv src/app/docs/global.css src/app/docs/fumadocs.global.css
mv tailwind.config.js tailwind.config.ts
cp tailwind.config.ts tailwind.fumadocs.config.ts

route.ts

page.tsx

fumadocs.global.css

layout.config.tsx

layout.tsx

source.ts

mdx-components.tsx

next-env.d.ts

next.config.mjs

package.json

pnpm-lock.yaml

postcss.config.js

tailwind.config.ts

tailwind.fumadocs.config.ts

tsconfig.json

Run Shadcn/ui install script

Follow the below steps and cross-check with the instructions in the Shadcn/ui docs to install Shadcn. Step 1 on their docs can be skipped, as we've already set up a Next.js project.

Terminal

pnpm dlx shadcn-ui@latest init

Terminal

Would you like to use TypeScript (recommended)? yes
Which style would you like to use? › New York
Which color would you like to use as base color? › Neutral
Where is your global CSS file? src/app/(home)/globals.css
Do you want to use CSS variables for colors? Yes
Are you using a custom tailwind prefix eg. tw-? (Leave blank if not)
Where is your tailwind.config.js located?  tailwind.config.ts
Configure the import alias for components:  @/components
Configure the import alias for utils: @/lib/utils
Are you using React Server Components? Yes
Write configurations to components.json. Proceed? Y

Add configurations

tailwind.config.ts

import type { Config } from 'tailwindcss'
+ import tailwindcssAnimate from 'tailwindcss-animate'
 
const config = {
  darkMode: ['class'],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  prefix: '',
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      },
    },
    extend: {
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      keyframes: {
        'accordion-down': {
          from: { height: '0' },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: '0' },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },
  },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [tailwindcssAnimate],
} satisfies Config
 
export default config

Shadcn/ui

Shadcn/ui

Radix UI Primitives

Tailwind CSS

Installation

Separate design systems

Rename and modify files

Run Shadcn/ui install script

Add configurations

On this page