Usage

starlight-package-managers exports an Astro component that you can use in any MDX files of your Starlight documentation site.

---
title: My Docs
---

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

Types

The component provided by starlight-package-managers supports various types of commands that can be specified using the type prop and defaults to the add type if none is provided.

add

The pkg prop is used to specify the name of the package to install. You can specify one or more package names by separating them with a space.

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

<PackageManagers pkg="astro @astrojs/starlight" />

The code above generates the following commands:

npm i astro @astrojs/starlight

yarn add astro @astrojs/starlight

pnpm add astro @astrojs/starlight

Development dependencies

You can use the dev prop to specify that the package should be installed as a development dependency.

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

<PackageManagers pkg="astro" dev />

The code above generates the following commands:

npm i -D astro

yarn add -D astro

pnpm add -D astro

create

To setup new or existing project, you can use the create type.

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

<PackageManagers type="create" pkg="astro@latest" />

The code above generates the following commands:

npm create astro@latest

yarn create astro@latest

pnpm create astro@latest

exec

To execute a package binary, you can use the exec type and specify extra arguments using the args prop.

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

<PackageManagers type="exec" pkg="astro" args="add solid" />

The code above generates the following commands:

npx astro add solid

yarn astro add solid

pnpm astro add solid

run

To run a script defined in the package’s manifest file, you can use the run type and specify the name of the name of the script using the args prop.

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

<PackageManagers type="run" args="dev" />

The code above generates the following commands:

npm run dev

yarn run dev

pnpm run dev

Extra arguments

You can provide extra arguments to any command using the args prop.

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

<PackageManagers type="create" pkg="astro@latest" args="--template starlight" />

The code above generates the following commands:

npm create astro@latest -- --template starlight

yarn create astro@latest --template starlight

pnpm create astro@latest --template starlight

Comment

You can include a comment before the command using the comment prop.

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

<PackageManagers type="create" pkg="astro" comment="create a new project" />

The code above generates the following commands:

# create a new project
npm create astro

# create a new project
yarn create astro

# create a new project
pnpm create astro

You can also reference the name of the selected package manager in a comment using the {PKG} placeholder.

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

<PackageManagers
  type="create"
  pkg="astro"
  comment="create a new project with {PKG}"
/>

The code above generates the following commands:

# create a new project with npm
npm create astro

# create a new project with yarn
yarn create astro

# create a new project with pnpm
pnpm create astro

Prefix

You can include a prefix before the command, for example to define an environment variable, using the prefix prop.

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

<PackageManagers type="run" args="dev" prefix="DEBUG=true" />

The code above generates the following commands:

DEBUG=true npm run dev

DEBUG=true yarn run dev

DEBUG=true pnpm run dev