English

Built-in Components

Badge

The Badge component is used to display a badge. For example:

index.mdx

import { Badge } from '@theme';

function App() {
  // Using text prop
  return <Badge text="info" type="info" />;

  // Using custom children
  return (
    <Badge>
      <img
        style={{ height: '18px' }}
        src="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/rspress/rspress-logo.png"
      />
      <span>Rspress</span>
    </Badge>
  );
}

The effect is as follows:

tip info warning danger outlined

Custom children:

Rspress Github

Inlined with text Tip

H5 Info

H4 Warning

H3 Danger

The types of props included are as follows:

interface BadgeProps {
  /**
   * The content to display inside the badge. Can be a string or React nodes.
   */
  children?: React.ReactNode;
  /**
   * The type of badge, which determines its color and style.
   * @default 'tip'
   */
  type?: 'tip' | 'info' | 'warning' | 'danger';
  /**
   * The text content to display inside the badge (for backwards compatibility).
   */
  text?: string;
  /**
   * Whether to display the badge with an outline style.
   * @default false
   */
  outline?: boolean;
}

Card

The Card component is used to display a card. For example:

index.mdx

import { Card } from '@theme';

function App() {
  return <Card title="Card Title" content="Card Content" />;
}

The effect is as follows:

Card Title

Card Content

The types of props included are as follows:

interface CardProps {
  /**
   * The title of the card.
   */
  title: React.ReactNode;
  /**
   * The content to display inside the card.
   */
  content?: React.ReactNode;
  /**
   * The icon of the card.
   */
  icon?: React.ReactNode;
  /**
   * The style of the card.
   */
  style?: React.CSSProperties;
}

LinkCard

The LinkCard component is used to display a link card. For example:

index.mdx

import { LinkCard } from '@theme';

function App() {
  return (
    <LinkCard
      href="https://example.com"
      title="Link Card Title"
      description="Link Card Description"
    />
  );
}

The effect is as follows:

Link Card TitleLink Card Description

The types of props included are as follows:

interface LinkCardProps {
  /**
   * The URL of the link.
   */
  href: string;
  /**
   * The title of the link.
   */
  title: string;
  /**
   * The description of the link.
   */
  description?: React.ReactNode;
  /**
   * The style of the link card.
   */
  style?: React.CSSProperties;
}

Helmet

It is generally used to set custom head content in documents (based on react-helmet-async). The usage is as follows:

index.tsx

// Below is a custom component, you can import it into your document
import { Helmet } from 'rspress/runtime';

function App() {
  return (
    <Helmet>
      <meta property="og:description" content="Out-of-box Rspack build tools" />
    </Helmet>
  );
}

HomeFeature

Feature component in Hero page, look the effect in this website.

import { HomeFeature } from 'rspress/theme';

interface Feature {
  title: string;
  details: string;
  icon: string;
  // only support [3, 4, 6]
  span?: number;
  link?: string;
}

export type Features = Feature[];

HomeHero

Hero component in Hero page.

import { HomeHero } from 'rspress/theme';

interface Hero {
  name: string;
  text: string;
  tagline: string;
  image?: {
    src: string | { dark: string; light: string };
    alt: string;
  };
  actions: {
    text: string;
    link: string;
    theme: 'brand' | 'alt';
  }[];
}

LastUpdated

The LastUpdated component is used to display the last update time of the current page. For example:

index.mdx

import { LastUpdated } from '@theme';

function App() {
  return <LastUpdated />;
}

TIP

If lastUpdated: true is not configured in the default theme, you need to install and register the @rspress/plugin-last-updated plugin.

NoSSR

Used to skip the ssr for some components. For example:

import { NoSSR } from 'rspress/runtime';

const Component = () => {
  return (
    <NoSSR>
      <div>The content here will only be rendered on the client side</div>
    </NoSSR>
  );
};

Overview

Overview component, look the effect in this website

import { Overview } from 'rspress/theme';

interface GroupItem {
  text?: string;
  link?: string;
  headers?: Header[];
}

interface Group {
  name: string;
  items: GroupItem[];
}

interface OverviewProps {
  // content before data rendering
  content?: React.ReactNode;
  // data
  groups?: Group[];
  // default title
  defaultGroupTitle?: string;
  // headers displayed in the overview page of the file
  overviewHeaders?: number[];
}

PackageManagerTabs

The PackageManagerTabs component is used to display commands for different package managers in the documentation. The usage is as follows:

index.mdx

import { PackageManagerTabs } from '@theme';

function App() {
  return <PackageManagerTabs command="install rspress -D" />;
}

The effect is as follows:

npm

yarn

pnpm

bun

npm install rspress -D

The types of props included are as follows:

interface PackageManagerTabsProps {
  command:
    | string
    | {
        // Used to set commands for different package managers
        npm?: string;
        yarn?: string;
        pnpm?: string;
        bun?: string;
      };
  // Used to set additional tabs
  additionalTabs: {
    // Used to set additional package managers
    tool: string;
    // Used to set the icon of the additional package manager
    icon?: React.ReactNode;
  }[];
}

When command is set to a string, it will default to displaying three tabs: npm, yarn, pnpm and bun, and the component will automatically add the corresponding package manager command before the command. If you need to display additional tabs, you can achieve this through additionalTabs.

TIP

In the install command, special processing has been done for yarn and bun. If your command is install some-packages, the install will be automatically replaced with add in the yarn/bun tab.

PrevNextPage

The PrevNextPage component is used to display the previous and next pages of the current page. For example:

index.mdx

import { PrevNextPage } from '@theme';

function App() {
  return (
    <PrevNextPage
      type="prev"
      text="Previous Page"
      href="https://rspress.dev/"
    />
  );
}

The types of props included are as follows:

interface PrevNextPageProps {
  // Set the link to the previous page or the next page through type
  type: 'prev' | 'next';
  // Used to set the text of the previous page or the next page
  text: string;
  // Used to set the link to the previous page or the next page
  href: string;
}

SourceCode

The SourceCode component is used to jump to the source code. For example:

index.mdx

import { SourceCode } from '@theme';

function App() {
  return (
    <SourceCode href="https://github.com/web-infra-dev/rspress/blob/main/packages/theme-default/src/components/SourceCode/index.tsx" />
  );
}

The effect is as follows:

Source

The types of props included are as follows:

interface SourceCodeProps {
  // Used to set the link to the source code
  href: string;
  // Used to set source platform
  platform?: 'github' | 'gitlab';
}

Steps

The Steps component is used to turn your content into a visual representation of steps.

index.mdx

import { Steps } from '@theme';

function App() {
  return (
    <Steps>
      ### Step 1

      Body for Step 1.

      ### Step 2

      > Body for Step 2.
    </Steps>
  );
}

The effect is as follows:

Step 1

Body for Step 1.

Step 2

Body for Step 2.

Tab/Tabs

You can directly use the Tab/Tabs component in the document to achieve the effect of tab switching. For example:

index.mdx

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

function App() {
  return (
    <Tabs>
      <Tab label="Tab 1">Tab 1 content</Tab>
      <Tab label="Tab 2">Tab 2 content</Tab>
    </Tabs>
  );
}

Tab 1 content

Note

In order to make it easier for you to use these components, the rspress/theme package has been aliased inside the framework, so you can directly use @theme to import these components.

The props type of the Tabs component is as follows:

interface TabsProps {
  children: React.ReactNode;
  defaultValue?: string;
  groupId?: string;
  tabPosition?: 'left' | 'center';
}

defaultValue is used to set the tab item selected by default. This value will be compared with the value field of the Tab component props, and if they are equal, the tab will be selected.

groupId is used to sync the selected tab item between multiple Tabs components.The groups with the same groupId will be synchronized.

tabPosition is used to set the position of the tab list, it has two values: left and center, the default is left.

The props types of the Tab component are as follows:

interface TabProps {
  label: string;
  // Used to identify the current tab, if not passed, the default label will be used
  value?: string;
  children: React.ReactNode;
}

The value field is used to identify the current tab, if not passed, the default label will be used.

Render TOC of current page

index.mdx

import { Toc } from '@theme';

function App() {
  return <Toc />;
}

Badge
H4
H3
Card
LinkCard
Helmet
HomeFeature
HomeHero
LastUpdated
NoSSR
Overview
PackageManagerTabs
PrevNextPage
SourceCode
Steps
Tab/Tabs
Table of Contents

ON THIS PAGE

Built-in Components#

Badge#

H5 Info#

H4 Warning#

H3 Danger#

Card#

LinkCard#

Helmet#

HomeFeature#

HomeHero#

LastUpdated#

NoSSR#

Overview#

PackageManagerTabs#

PrevNextPage#

SourceCode#

Steps#

Step 1

Step 2

Tab/Tabs#

Table of Contents#

Built-in Components

Badge

H5 Info

H4 Warning

H3 Danger

Card

LinkCard

Helmet

HomeFeature

HomeHero

LastUpdated

NoSSR

Overview

PackageManagerTabs

PrevNextPage

SourceCode

Steps

Tab/Tabs

Table of Contents