close
Rspress
  • English

      • shadcn/ui

      shadcn/ui is a collection of reusable components built with Radix UI / Base UI and Tailwind CSS. This guide covers how to use shadcn/ui components in your Rspress documentation site.

      Make sure you have already set up Tailwind CSS in your project before proceeding.

      Configure path aliases

      Add paths to the compilerOptions in your tsconfig.json so that shadcn/ui components can be resolved correctly:

      tsconfig.json
      {
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["doc", "src", "rspress.config.ts"]
}

      Create components.json and utility function

      Since shadcn init cannot automatically detect the Rspress framework, you need to follow the manual installation approach to create the configuration files.

      Create a components.json file in your project root to configure the shadcn/ui CLI:

      components.json
      {
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "tailwind": {
    "config": "",
    "css": "tailwind.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "rsc": false,
  "tsx": true,
  "aliases": {
    "utils": "@/lib/utils",
    "components": "@/components",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}
      Tip
      • tailwind.config is omitted because Tailwind CSS v4 no longer requires a config file.
      • rsc is set to false because Rspress does not use React Server Components.

      Then install the dependencies and create the utility function:

      npm
      yarn
      pnpm
      bun
      deno
      npm install clsx tailwind-merge class-variance-authority
      src/lib/utils.ts
      import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

      Add components

      Use the shadcn CLI to add the components you need. For example, to add a Button:

      npm
      yarn
      pnpm
      bun
      deno
      npx shadcn@latest add button

      Usage in MDX

      Import and use components in your MDX files:

      doc/index.mdx
      import { Button } from '@/components/ui/button';

# My page

<Button>Click me</Button>
<Button variant="outline">Outline</Button>
      Tip

      Since shadcn/ui is not a traditional npm package but a collection of copy-paste components, you have full control over the component code and can customize them as needed.