Getting Started

Installation

Install the theme package:

bun add git+ssh://git@codefloe.com/devxy/starlight-theme-celestia.git

Once installed, start the dev server:

Configuration

Add the theme plugin to your astro.config.mjs:

import { defineConfig } from "astro/config";
import starlight from "@astrojs/starlight";
import starlightCelestiaTheme from "starlight-theme-celestia";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  integrations: [
    starlight({
      title: "My Docs",
      plugins: [starlightCelestiaTheme()],
      sidebar: [{ label: "Guide", autogenerate: { directory: "guide" } }],
    }),
  ],
  vite: {
    plugins: [tailwindcss()],
  },
});

Options

The theme accepts the following options:

nav

An array of navigation items to display in the header bar.

starlightCelestiaTheme({
  nav: [
    { label: "Blog", href: "/blog" },
    { label: "GitHub", href: "https://github.com" },
  ],
});

stylingSystem

Controls whether to use Tailwind CSS or plain CSS. Defaults to "detect" which auto-detects Tailwind in your project.

starlightCelestiaTheme({
  stylingSystem: "tailwind", // or 'css' or 'detect'
});

Multi-Sidebar

Turn every top-level group of your sidebar config into an independent switchable sidebar:

starlightCelestiaTheme({
  multiSidebar: {
    switcherStyle: "horizontalList", // or 'dropdown' or 'hidden'
  },
});

See the multi-sidebar guide for the switcher styles and the sidebar requirements.

Features

• No sidebar borders — Clean, seamless layout
• Inter font — Self-hosted via @fontsource/inter, 14px base size
• Wider content — 55rem content width (up from default 50rem)
• Narrower sidebars — 17rem sidebars for better content focus
• 3-way theme toggle — Cycles through Auto, Light, and Dark
• Warm accent colors — #fb923c (dark) / #c2410c (light)
• Multi-sidebar — Built-in switchable sidebars, one per top-level sidebar group