CodeTabs

A specialized component that automatically converts package manager commands between npm, yarn, pnpm, and bun. Users can switch between their preferred package manager.

Usage

Simply write npm commands in a code block, and they will automatically be converted to a tabbed interface with all package managers:


bun add docs-please

The above code block is automatically rendered with tabs for npm, yarn, pnpm, and bun.

Automatic Conversion

The component automatically converts the following command patterns:

Install Commands

npm	yarn	pnpm	bun
`npm install pkg`	`yarn add pkg`	`pnpm add pkg`	`bun add pkg`
`npm install`	`yarn install`	`pnpm install`	`bun install`

Create Commands

npm	yarn	pnpm	bun
`npm create app`	`yarn create app`	`pnpm create app`	`bun create app`

Npx Commands

npm	yarn	pnpm	bun
`npx command`	`yarn dlx command`	`pnpm dlx command`	`bunx --bun command`

Run Commands

npm	yarn	pnpm	bun
`npm run dev`	`yarn dev`	`pnpm dev`	`bun dev`

Examples

Installation


bun add vue

Create Project


bunx --bun create-nuxt-app my-app

Run Scripts


bun build

User Preference

The selected package manager is persisted in the user's browser, so their preference is remembered across page visits.

How It Works

The CodeTabs component is automatically applied to code blocks that contain npm, yarn, pnpm, or bun commands. It:

Detects the package manager command pattern
Generates equivalent commands for all supported package managers
Renders a tabbed interface with syntax highlighting
Includes a copy button for each command

Styling

The component displays a terminal icon header with the package manager tabs below. Each tab shows the correctly formatted command with syntax highlighting.