Usage

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

src/content/docs/example.mdx

---
title: My Docs
---

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

<PackageManagers pkg="astro" />

Preview

npm

npm i astro

pnpm

pnpm add astro

yarn

yarn add astro

Command 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(s) of the package(s) to install. You can specify one or more package names by separating them with a space.

src/content/docs/example.mdx

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

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

Preview

npm

npm i astro @astrojs/starlight

pnpm

pnpm add astro @astrojs/starlight

yarn

yarn add astro @astrojs/starlight

Development dependencies

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

src/content/docs/example.mdx

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

<PackageManagers pkg="astro" dev />

Preview

npm

npm i -D astro

pnpm

pnpm add -D astro

yarn

yarn add -D astro

create

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

src/content/docs/example.mdx

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

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

Preview

npm

npm create astro@latest

pnpm

pnpm create astro@latest

yarn

yarn create astro

dlx

To fetch and execute a package binary, without installing it as a dependency, you can use the dlx type and specify extra arguments using the args prop.

src/content/docs/example.mdx

<PackageManagers type="dlx" pkg="serve" args="public" />

Preview

npm

npx serve public

pnpm

pnpx serve public

yarn

yarn dlx serve public

exec

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

src/content/docs/example.mdx

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

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

Preview

npm

npx astro add solid

pnpm

pnpm astro add solid

yarn

yarn astro add solid

install

To install all dependencies, you can use the install type, with no other props specified.

src/content/docs/example.mdx

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

<PackageManagers type="install" />

Preview

npm

npm install

pnpm

pnpm install

yarn

yarn install

remove

The pkg prop is used to specify the name of the package to remove.

src/content/docs/example.mdx

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

<PackageManagers type="remove" pkg="@astrojs/starlight" />

Preview

npm

npm uninstall @astrojs/starlight

pnpm

pnpm remove @astrojs/starlight

yarn

yarn remove @astrojs/starlight

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.

src/content/docs/example.mdx

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

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

Preview

npm

npm run dev

pnpm

pnpm run dev

yarn

yarn run dev

Extra arguments

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

src/content/docs/example.mdx

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

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

Preview

npm

npm create astro@latest -- --template starlight

pnpm

pnpm create astro@latest --template starlight

yarn

yarn create astro --template starlight

Comment

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

src/content/docs/example.mdx

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

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

Preview

npm

# create a new project
npm create astro

pnpm

# create a new project
pnpm create astro

yarn

# create a new project
yarn create astro

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

src/content/docs/example.mdx

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

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

Preview

npm

# create a new project with npm
npm create astro

pnpm

# create a new project with pnpm
pnpm create astro

yarn

# create a new project with yarn
yarn create astro

Prefix

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

src/content/docs/example.mdx

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

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

Preview

npm

DEBUG=true npm run dev

pnpm

DEBUG=true pnpm run dev

yarn

DEBUG=true yarn run dev

Appearance

By default, commands are rendered using Starlight’s tabs, a terminal frame around them and an icon indicating the package manager. You can tweak this behavior and optionally provide a title for the frame.

Frame

When using the tabs variant with Expressive Code, you can disable the terminal frame surrounding commands by setting the frame prop to none.

src/content/docs/example.mdx

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

<PackageManagers pkg="astro" frame="none" />

Preview

npm

npm i astro

pnpm

pnpm add astro

yarn

yarn add astro

Icons

By default, starlight-package-managers displays a package manager icon next to its name. You can disable this behavior using the icons prop and set it to false.

src/content/docs/example.mdx

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

<PackageManagers pkg="astro" icons={false} />

Preview

npm

npm i astro

pnpm

pnpm add astro

yarn

yarn add astro

Title

When using the tabs variant with Expressive Code and the default terminal frame, you can provide a title using the title prop.

src/content/docs/example.mdx

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

<PackageManagers pkg="astro" title="Install dependencies" />

Preview

npm

Install dependencies

npm i astro

pnpm

Install dependencies

pnpm add astro

yarn

Install dependencies

yarn add astro

Variant

The variant prop controls how package manager tabs are displayed. It defaults to tabs, which uses Starlight’s tabs above a terminal frame.

Set it to compact to merge the tabs with the code frame.

src/content/docs/example.mdx

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

<PackageManagers pkg="astro" variant="compact" />

Preview

npm

npm i astro

pnpm

pnpm add astro

yarn

yarn add astro

The compact variant requires Expressive Code, which Starlight enables by default. It does not support the frame and title props.