Getting Started

A modern and beautiful theme for Starlight.

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.

1. The Starlight Nova theme is a Starlight plugin that you can install using your favorite package manager:

   • pnpm
   • npm
   • yarn
   • bun

   pnpm add starlight-theme-nova

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

   // astro.config.mjs
   import starlightfunction starlight(userOpts: StarlightUserConfigWithPlugins): AstroIntegration from '@astrojs/starlight'
   import { defineConfigfunction defineConfig<const TLocales extends Locales = never, const TDriver extends SessionDriverName | SessionDriverConfig = never, const TFontProviders extends Array<FontProvider> = never>(config: AstroUserConfig<TLocales, TDriver, TFontProviders>): AstroUserConfig<TLocales, TDriver, TFontProviders>
   See the full Astro Configuration API Documentation
   https://astro.build/config } from 'astro/config'
   import starlightThemeNovafunction starlightThemeNova(options?: ThemeNovaOptions): StarlightPlugin from 'starlight-theme-nova'
   
   export default defineConfigdefineConfig<never, never, never>(config: AstroUserConfig<never, never, never>): AstroUserConfig<never, never, never>
   See the full Astro Configuration API Documentation
   https://astro.build/config({
     integrationsAstroUserConfig<TLocales extends Locales = never, TDriver extends SessionDriverName | SessionDriverConfig | undefined = never, TFontProviders extends Array<FontProvider> = never>.integrations?: (false | AstroIntegration | (false | AstroIntegration | null | undefined)[] | null | undefined)[] | undefined
   @docs@nameintegrations@typeraw{AstroIntegration[]}@descriptionExtend Astro with custom integrations. Integrations are your one-stop-shop for adding framework support (like Solid.js), new features (like sitemaps), and new libraries (like Partytown).
   
   Read our [Integrations Guide](https://docs.astro.build/en/guides/integrations-guide/) for help getting started with Astro Integrations.
   
   ```js
   import react from '@astrojs/react';
   import mdx from '@astrojs/mdx';
   {
     // Example: Add React + MDX support to Astro
     integrations: [react(), mdx()]
   }
   ```: [
       starlightfunction starlight(userOpts: StarlightUserConfigWithPlugins): AstroIntegration({
         plugins
   plugins?: {
       hooks: {
           'i18n:setup'?: $InferInnerFunctionType<ZodTuple<readonly [ZodObject<{
               injectTranslations: ZodFunction<ZodTuple<readonly [ZodRecord<ZodString, ZodRecord<ZodString, ZodString>>], null>, ZodVoid>;
           }, $strip>], null>, ZodPromise<ZodVoid>> | undefined;
           'config:setup'?: $InferInnerFunctionType<ZodTuple<readonly [ZodObject<{
               config: ZodType<StarlightUserConfigWithPlugins, StarlightUserConfigWithPlugins>;
               ... 8 more ...;
               absolutePathToLang: ZodFunction<...>;
           }, $strip>], null>, ZodPromise<...>> | undefined;
           setup?: $InferInnerFunctionType<...> | undefined;
       };
       name: string;
   }[] | undefined
   A list of plugins to extend Starlight with.
   @example// Add Starlight Algolia plugin.
   starlight({
   	plugins: [starlightAlgolia({ … })],
   }): [
           starlightThemeNovafunction starlightThemeNova(options?: ThemeNovaOptions): StarlightPlugin(/* options */), 
         ],
         titletitle: string | Record<string, string>
   Title for your website. Will be used in metadata and as browser tab title.: 'My Docs',
       }),
     ],
   })

   Check the Options section below for available options.

3. Start the development server to preview the theme in action.

That’s it! You should now see the Starlight Nova theme applied to your Starlight website.

You can add optional navigation items to the top navigation bar by passing an array of objects to the nav option.

starlightThemeNovafunction starlightThemeNova(options?: ThemeNovaOptions): StarlightPlugin({
  navThemeNovaOptions.nav?: NavItem[] | undefined: [
    { labelNavItem.label: string | Record<string, string>
The visible label for this item in the navigation. It could be a string or
a record of strings with the language code as the key.: 'Quick start', hrefNavItem.href: string | Record<string, string>
The link to this item’s content. It could be a string or a record of
strings with the language code as the key.: '/guide/getting-started' },
    { labelNavItem.label: string | Record<string, string>
The visible label for this item in the navigation. It could be a string or
a record of strings with the language code as the key.: 'External link', hrefNavItem.href: string | Record<string, string>
The link to this item’s content. It could be a string or a record of
strings with the language code as the key.: 'https://example.com' },
  ],
})

If you want to support multiple languages, you can pass an object with values for each different locale to label and href. When using the object form, the keys must be BCP-47 tags (e.g. en, ar, or zh-CN) or the root key to set the default value:

starlightThemeNovafunction starlightThemeNova(options?: ThemeNovaOptions): StarlightPlugin({
  navThemeNovaOptions.nav?: NavItem[] | undefined: [
    {
      labelNavItem.label: string | Record<string, string>
The visible label for this item in the navigation. It could be a string or
a record of strings with the language code as the key.: {
        enen: string: 'Quick start',
        'zh-CN': '快速开始',
      },
      hrefNavItem.href: string | Record<string, string>
The link to this item’s content. It could be a string or a record of
strings with the language code as the key.: {
        enen: string: '/guide/getting-started',
        'zh-CN': '/zh-cn/guide/getting-started',
      },
    },
  ],
})

You can optionally use Tailwind CSS with the Starlight Nova theme. To do so, you need to:

1. Install Tailwind CSS and its dependencies:

   npm install tailwindcss @tailwindcss/vite

2. Create a ./src/styles/global.css file and add the following content:

   /** ./src/styles/global.css */
   @import 'tailwindcss';
   @import 'starlight-theme-nova/tailwind.css';

3. Configure your Astro config file:

   // astro.config.mjs
   import starlight from '@astrojs/starlight'
   import tailwindcss from '@tailwindcss/vite'
   import { defineConfig } from 'astro/config'
   import starlightThemeNova from 'starlight-theme-nova'
   
   export default defineConfig({
     vite: {
       plugins: [tailwindcss()], 
     integrations: [
       starlight({
         plugins: [starlightThemeNova()],
         title: 'My Docs',
         customCss: ['./src/styles/global.css'], 
       }),
     ],
   })