> For AI agents: the complete documentation index is available at https://rspress.rs/llms.txt, the full documentation bundle is available at https://rspress.rs/llms-full.txt.

# shadcn/ui

[shadcn/ui](https://ui.shadcn.com/) 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](https://rspress.rs/ui/tailwindcss.md) 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:
```json title="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](https://ui.shadcn.com/docs/installation/manual) approach to create the configuration files.
Create a `components.json` file in your project root to configure the shadcn/ui CLI:
```json title="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:

```sh [npm]
npm install clsx tailwind-merge class-variance-authority
```

```sh [yarn]
yarn add clsx tailwind-merge class-variance-authority
```

```sh [pnpm]
pnpm add clsx tailwind-merge class-variance-authority
```

```sh [bun]
bun add clsx tailwind-merge class-variance-authority
```

```sh [deno]
deno add npm:clsx npm:tailwind-merge npm:class-variance-authority
```
```ts title="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:

```sh [npx]
npx shadcn@latest add button
```

```sh [yarn]
yarn dlx shadcn@latest add button
```

```sh [pnpm]
pnpm dlx shadcn@latest add button
```

```sh [bunx]
bunx shadcn@latest add button
```

```sh [deno]
deno run -A npm:shadcn@latest add button
```
### Usage in MDX
Import and use components in your MDX files:
```mdx title="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.
:::