close
Rspress
  • English

      • PackageManagerTabs

      PackageManagerTabs displays commands for different package managers.

      Basic usage

      index.mdx
      import { PackageManagerTabs } from '@rspress/core/theme';

<PackageManagerTabs command="install -D @rspress/core" />
      npm
      yarn
      pnpm
      bun
      deno
      npm install -D @rspress/core

      Set commands per package manager

      You can pass an object to define the command for each package manager:

      npm
      yarn
      pnpm
      bun
      deno
      npm create rspress@latest
      index.mdx
      import { PackageManagerTabs } from '@rspress/core/theme';

<PackageManagerTabs
  command={{
    npm: 'npm create rspress@latest',
    yarn: 'yarn create rspress',
    pnpm: 'pnpm create rspress@latest',
    bun: 'bun create rspress@latest',
    deno: 'deno init --npm rspress@latest',
  }}
/>

      Add extra tabs

      Use additionalTabs to add more package managers:

      npm
      yarn
      pnpm
      bun
      deno
      custom
      npm install -D @rspress/core
      index.mdx
      import { PackageManagerTabs } from '@rspress/core/theme';

<PackageManagerTabs
  command="install -D @rspress/core"
  additionalTabs={[
    {
      tool: 'custom',
    },
  ]}
/>

      Props

      type PackageManagerTabProps = (
  | {
      command: string;
      /**
       * If true, use local package execution (npx <pkg>, yarn <pkg>, pnpm <pkg>, bun <pkg>, deno run <pkg>).
       * For packages installed in node_modules.
       */
      exec?: boolean;
      /**
       * If true, use remote package execution (npx, yarn dlx, pnpm dlx, bunx, deno run).
       * For downloading and running packages directly without local install.
       * Takes priority over exec.
       */
      dlx?: boolean;
    }
  | {
      command: {
        // Set commands for different package managers
        npm?: string;
        yarn?: string;
        pnpm?: string;
        bun?: string;
        deno?: string;
      };
      exec?: never;
      dlx?: never;
    }
) &
  // Configure extra tabs
  {
    additionalTabs?: {
      // Extra package manager name
      tool: string;
      // Icon for the extra package manager
      icon?: React.ReactNode;
    }[];
  };
      Tip
      • When command is a string, the component auto prefixes the correct package manager command and renders npm, yarn, pnpm, bun, and deno tabs by default.
      • For install commands, yarn, pnpm, bun, and deno tabs automatically replace install with add.
      • In the deno tab, packages without an explicit source automatically get the npm: prefix.