Package Manager Tabs

The proseflyComponents() integration enables package manager tabs so authors can 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:

```sh
npm install @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.

pnpm add @prosefly/astro-components

npm install @prosefly/astro-components

yarn add @prosefly/astro-components

bun add @prosefly/astro-components

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.

```sh
pip install prosefly
```

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 a Prosefly theme, register the shared integration in astro.config.ts. Package manager tabs are enabled by default.

import { defineConfig } from 'astro/config';
import proseflyComponents from '@prosefly/astro-components/integration';

export default defineConfig({
  integrations: [proseflyComponents()],
});

The integration configures remarkPackageManagerTabs, which injects the required Tabs and TabItem imports when it transforms a code block. Authors do not need to import those components manually.

To keep the other integration features but disable this transform, set markdown.packageManagerTabs to false.

proseflyComponents({
  markdown: { packageManagerTabs: false },
})

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.