Package Manager Tabs

Use remarkPackageManagerTabs when authors should write one familiar command and let the docs render equivalent commands for other package managers.

What Authors Write

Write a supported command in a shell code block:

pnpm add @prosefly/astro-components

npm install @prosefly/astro-components

yarn add @prosefly/astro-components

bun add @prosefly/astro-components

The transform renders tabs for pnpm, npm, yarn, and bun. The generated commands keep the same package names and normalize install syntax for each tool.

Supported Node Commands

• npm install
• npm install <packages>
• npm i <packages>
• npm add <packages>
• npm run <script>
• npm create <initializer>
• npx <command>
• npm dlx <command>

Install commands preserve package names and normalize dev-dependency flags for each package manager. For example, npm install --save-dev typescript becomes the matching pnpm add -D, yarn add -D, and bun add -d command.

Examples:

pnpm build

npm run build

yarn build

bun build

pnpm dlx astro add mdx

npx astro add mdx

yarn dlx astro add mdx

bunx --bun astro add mdx

Supported Python Commands

Python install commands render as pip, uv, poetry, and pdm tabs.

pip install prosefly

uv add prosefly

poetry add prosefly

pdm add prosefly

Supported forms include:

• pip install <packages>
• python -m pip install <packages>
• python3 -m pip install <packages>
• uv pip install <packages>
• uv add <packages>
• poetry add <packages>
• pdm add <packages>

Standalone Astro Setup

If you are not using Lotus, add the remark plugin in astro.config.ts.

import { defineConfig } from 'astro/config';
import { remarkPackageManagerTabs } from '@prosefly/astro-components/markdown';

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkPackageManagerTabs],
  },
});

The plugin injects the required Tabs and TabItem imports when it transforms a code block, so authors do not need to import those components manually.

Authoring Rules

1. Use a shell code fence.

   The plugin transforms sh, shell, bash, zsh, terminal, and console blocks. It also handles code fences without a language.

2. Keep prompts simple.

   Lines may start with $ , and the prompt is preserved in each generated command. Other prompt formats remain normal code blocks.

3. Keep each transformed block consistent.

   A block can contain multiple commands, but they must belong to the same package-manager family. Do not mix Node and Python commands in the same code block.

4. Leave custom commands alone.

   Unsupported commands remain normal code blocks. Use manual Tabs when the alternatives need custom wording.