---

name: rspress-components description: Use RSPress built-in components and MDX features in documentation. Use when adding interactive elements like tabs, badges, steps, callouts, or code groups to documentation pages. allowed-tools: Read, Write, Edit, Glob

RSPress Components Skill

Guide for using RSPress built-in components and MDX features in documentation.

Importing Components

Import built-in components from rspress/theme:

import { Badge, Tabs, Tab } from 'rspress/theme';

Common Components

Badge

Display inline status badges:

<Badge type="info" text="Info" />
<Badge type="tip" text="Tip" />
<Badge type="warning" text="Warning" />
<Badge type="danger" text="Danger" />

Tabs

Create tabbed content sections:

import { Tabs, Tab } from 'rspress/theme';

<Tabs>
  <Tab label="JavaScript">
    ```javascript
    console.log('Hello');
    ```
  </Tab>
  <Tab label="TypeScript">
    ```typescript
    console.log('Hello');
    ```
  </Tab>
</Tabs>

PackageManagerTabs

Special tabs for package manager commands:

import { PackageManagerTabs } from 'rspress/theme';

<PackageManagerTabs command="install react" />
<PackageManagerTabs command="add -D typescript" />

Steps

Create numbered step-by-step instructions:

import { Steps } from 'rspress/theme';

<Steps>
### Step 1

First instruction.

### Step 2

Second instruction.
</Steps>

NoSSR

Prevent server-side rendering for client-only components:

import { NoSSR } from 'rspress/theme';

<NoSSR>
  <ClientOnlyComponent />
</NoSSR>

Code Block Features

Syntax Highlighting

Specify language for automatic syntax highlighting:

```typescript
const example: string = "code";
```

Line Highlighting

Highlight specific lines with {line-numbers}:

```typescript{2,4-6}
const a = 1;
const b = 2; // highlighted
const c = 3;
const d = 4; // highlighted
const e = 5; // highlighted
const f = 6; // highlighted
```

Diff Highlighting

Show additions and deletions with // [!code ++] and // [!code --]:

```typescript
const old = 'remove'; // [!code --]
const new = 'add'; // [!code ++]
```

Container Blocks

Callouts

Create styled callout boxes:

:::tip
Helpful tip content
:::

:::info
Informational content
:::

:::warning
Warning content
:::

:::danger
Danger/error content
:::

Details (Collapsible)

Create collapsible sections:

:::details Summary text
Hidden content that can be expanded
:::

MDX Features

Importing Custom Components

import CustomComponent from '../components/CustomComponent';

<CustomComponent prop="value" />

Inline Expressions

Use JavaScript expressions inline:

export const version = '1.0.0';

Current version: {version}

Mixing Markdown and JSX

<div className="custom-wrapper">

## Markdown heading

Regular markdown content works inside JSX.

</div>

Best Practices

• Use PackageManagerTabs for install commands to support all package managers
• Add language identifiers to all code blocks for proper syntax highlighting
• Use appropriate callout types (tip/info/warning/danger) for context
• Import only the components you need to minimize bundle size
• Use NoSSR sparingly, only when necessary for client-only features