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.

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

<PackageManagers pkg="astro" />

The code above generates the following commands:

npm i astro

yarn add astro

pnpm add astro

Customization

You can customize the package managers using the pkgManagers prop.

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

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

The code above generates the following commands:

npm i astro

bun 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:

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

type Props = PackageManagersProps
---

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

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

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

<AllPackageManagers pkg="astro" />

The code above generates the following commands:

npm i astro

yarn add astro

pnpm add astro

bun add astro

ni astro