Getting Started

A premium, animated Table of Contents indicator for Starlight documentation sites.

Zero Config Theme Matching

starlight-glide automatically inherits your active theme’s colors (including Rapide, Base Starlight, or custom CSS). It uses a “decoupled” styling system that adopts your accent colors perfectly with no manual setup required.

Prerequisites

You will need to have a Starlight website set up. If you don’t have one yet, you can follow the “Getting Started” guide in the Starlight docs to create one.

Installation

1. starlight-glide is a Starlight plugin. Install it by running the following command in your terminal:

   npm

   npm install starlight-glide

   pnpm

   pnpm add starlight-glide

   Yarn

   yarn add starlight-glide

2. Configure the plugin in your Starlight configuration in the astro.config.mjs file.

   astro.config.mjs

   import starlight from '@astrojs/starlight'
   import { defineConfig } from 'astro/config'
   import starlightGlide from 'starlight-glide'
   
   export default defineConfig({
     integrations: [
       starlight({
         plugins: [starlightGlide()],
         title: 'My Docs',
       }),
     ],
   })

3. (Optional) Customize the plugin. Pick your presets for desktop indicator, mobile view, and animation physics:

   astro.config.mjs

   export default defineConfig({
     integrations: [
       starlight({
         plugins: [
           starlightGlide({
             desktop: 'snake',        // or 'dot'
             mobile: 'dropdown',      // or 'minimal'
             physics: 'smooth',       // or 'spring', 'snap'
             glassmorphism: true,
            })
          ],
        }),
      ],
    })

   Check out the Configuration guide for all presets and per-page overrides.

4. Start the development server to preview the plugin in action.