Package Managers

starlight-package-managers supports the following package managers:

• npm
• yarn
• pnpm
• bun
• ni

Defaults

By default, starlight-package-managers will use npm, yarn and pnpm.

src/content/docs/example.mdx

import { PackageManagers } from 'starlight-package-managers'

<PackageManagers pkg="astro" />

The code above generates the following commands:

npm

npm i astro

yarn

yarn add astro

pnpm

pnpm add astro

Customization

You can customize the package managers using the pkgManagers prop.

src/content/docs/example.mdx

import { PackageManagers } from 'starlight-package-managers'

<PackageManagers pkg="astro" pkgManagers={['npm', 'bun']} />

The code above generates the following commands:

npm

npm i astro

bun

bun add astro

Note

If only a single package manager is specified, the command will be displayed with no tabs.

src/content/docs/example.mdx

import { PackageManagers } from 'starlight-package-managers'

<PackageManagers pkg="astro" pkgManagers={['pnpm']} />

The code above generates the following command:

pnpm add astro

Global Customization

Having to specify the pkgManagers prop every time can be tedious. To avoid this, you can create a custom Astro component wrapping starlight-package-managers:

src/components/AllPackageManagers.astro

---
import {
  PackageManagers,
  type PackageManagersProps,
} from 'starlight-package-managers'

type Props = PackageManagersProps
---

{/* Customize the package managers to use. */}
<PackageManagers
  pkgManagers={['npm', 'yarn', 'pnpm', 'bun', 'ni']}
  {...Astro.props}
/>

Now you can use the custom component instead of starlight-package-managers:

src/content/docs/example.mdx

import AllPackageManagers from '@/components/AllPackageManagers.astro'

<AllPackageManagers pkg="astro" />

The code above generates the following commands:

npm

npm i astro

yarn

yarn add astro

pnpm

pnpm add astro

bun

bun add astro

ni

ni astro