Expose Astro components in a Starlight plugin

Starlight plugins offer an easy-to-share and reusable way to customize and extend Starlight, the fully-featured documentation theme built on top of the Astro framework.

This guide will walk you through the process of exposing Astro components in a Starlight plugin, enabling users to use them in their Starlight projects.

Prerequisites

You will need to have a Starlight plugin set up. If you don’t have one yet, you can follow the “How to create a Starlight plugin” note to create one or refer to the Starlight documentation for a complete reference.

Export an Astro component

To export an Astro component from a Starlight plugin, you can add a new entry in the exports field of the plugin’s package.json file.

The following example adds a new entry point name ./PluginComponent.astro that points to a PluginComponent.astro file in the plugin’s root directory:

{
  "name": "starlight-plugin-example",
  "version": "0.0.1",
  "license": "MIT",
  "type": "module",
  "exports": {
    ".": "./plugin.ts"
    ".": "./plugin.ts",
    "./PluginComponent.astro": "./PluginComponent.astro"
  },
  "peerDependencies": {
    "@astrojs/starlight": ">=0.34"
  }
}

Use the Astro component in a Starlight project

Once the Astro component is exported from the Starlight plugin, it can be used in a Starlight project by importing it from the plugin package and using its associated identifier.

The following example uses the <PluginComponent/> component exported from the starlight-plugin-example package in an MDX content page from a Starlight project:

---
title: My page title
---

My page content.

import PluginComponent from 'starlight-plugin-example/PluginComponent.astro'

<PluginComponent />

To learn more about Starlight plugins, check out the “Starlight Plugins by Example” notebook for additional guides and examples.