Skip to content
Starlight Package Managers

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

The code above generates the following commands:

Terminal window
npm i 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" />

The code above generates the following commands:

Terminal window
npm i 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 />

The code above generates the following commands:

Terminal window
npm i -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" />

The code above generates the following commands:

Terminal window
npm create astro@latest

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

The code above generates the following commands:

Terminal window
npx 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" />

The code above generates the following commands:

Terminal window
npx 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.

src/content/docs/example.mdx
import { PackageManagers } from 'starlight-package-managers'


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

The code above generates the following commands:

Terminal window
npm run dev

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

The code above generates the following commands:

Terminal window
npm uninstall @astrojs/starlight

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

The code above generates the following commands:

Terminal window
npm create astro@latest -- --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" />

The code above generates the following commands:

Terminal window
# create a new project
npm 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}"
/>

The code above generates the following commands:

Terminal window
# create a new project with npm
npm 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" />

The code above generates the following commands:

Terminal window
DEBUG=true npm 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.

src/content/docs/example.mdx
import { PackageManagers } from 'starlight-package-managers'


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

The code above generates the following commands:

npm i 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} />

The code above generates the following commands:

Terminal window
npm i astro

Title

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

The code above generates the following commands:

Install dependencies
npm i astro