Add sponsors to your Starlight site
Many open-source projects are sponsored by companies in their fields. Using Starlight component overrides, you can add custom content to showcase sponsors directly in your documentation.
In this guide, you’ll implement a sponsors component using component overrides.
This guide assumes you have an existing Starlight project. If you don’t have an existing project, you can check out the getting started documentation, or run the following command to create a new site.
This component is inspired by the sponsors component in the Vite documentation, located under the table of contents. Feel free to customise it to your liking, and add your own sponsors and images to the component.
This component should look something like this (with the hovered sponsor image inverted):
TableOfContents component to include the
Sponsors component. You can import the builtin component from
TableOfContents component to your Starlight config in
astro.config.mjs to override the builtin component.
With that, you have a custom sponsors component to display your project’s sponsors in your docs! Make sure to check out my other Starlight recipes for more ways to customise your docs.