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" />

Preview

npm i astro

pnpm add astro

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.

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

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

Preview

npm i astro @astrojs/starlight

pnpm add astro @astrojs/starlight

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.

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

<PackageManagers pkg="astro" dev />

Preview

npm i -D astro

pnpm add -D astro

yarn 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" />

Preview

npm create astro@latest

pnpm create astro@latest

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.

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

Preview

npx serve public

pnpx serve public

yarn dlx serve public

`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" />

Preview

npx astro add solid

pnpm astro add solid

yarn astro add solid

`install`

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

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

<PackageManagers type="install" />

Preview

npm install

pnpm install

yarn install

`remove`

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

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

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

Preview

npm uninstall @astrojs/starlight

pnpm remove @astrojs/starlight

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.

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

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

Preview

npm run dev

pnpm run dev

yarn 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" />

Preview

npm create astro@latest -- --template starlight

pnpm create astro@latest --template starlight

yarn create astro --template starlight

Comment

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

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

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

Preview

# create a new project
npm create astro

# create a new project
pnpm create astro

# 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.

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

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

Preview

# create a new project with npm
npm create astro

# create a new project with pnpm
pnpm create astro

# 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.

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

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

Preview

DEBUG=true npm run dev

DEBUG=true pnpm run dev

DEBUG=true yarn run dev

Appearance

By default, commands are rendered with a terminal frame around them and an icon indicating the package manager. You can disable this behavior and optionally provide a title for the frame.

Frame

To disable the terminal frame surrounding commands when using Expressive Code, you can use the frame prop and set it to none.

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

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

Preview

npm i astro

pnpm add astro

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.

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

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

Preview

npm i astro

pnpm add astro

yarn add astro

Title

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

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

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

Preview

npm i astro

pnpm add astro

yarn add astro