Getting Started

A modern and beautiful theme for Starlight.

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

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
npm install starlight-theme-nova
yarn add starlight-theme-nova
bun add starlight-theme-nova

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 = never, const TFontFamilies extends FontFamily[] = never>(config: AstroUserConfig<TLocales, TDriver, TFontFamilies>): AstroUserConfig<TLocales, TDriver, TFontFamilies>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, TSession extends SessionDriverName = never, TFontFamilies extends FontFamily[] = 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({
      pluginsplugins?: {
    name: string;
    hooks: {
        'i18n:setup'?: ((args_0: {
            injectTranslations: (args_0: Record<string, Record<string, string>>) => void;
        }) => void | Promise<void>) | undefined;
        'config:setup'?: ((args_0: {
            logger: AstroIntegrationLogger;
            config: {
                title: string | Record<string, string>;
                description?: string | undefined;
                logo?: {
                    src: string;
                    alt?: string | undefined;
                    replacesTitle?: boolean | undefined;
                } | {
                    dark: string;
                    light: string;
                    alt?: string | undefined;
                    replacesTitle?: boolean | undefined;
                } | undefined;
                ... 20 more ...;
                markdown?: {
                    ...;
                } | undefined;
            } & {
                ...;
            };
            ... 7 more ...;
            useTranslations: (lang: string | undefined) => I18nT;
        }) => void | Promise<...>) | undefined;
        setup?: ((args_0: {
            logger: AstroIntegrationLogger;
            config: {
                title: string | Record<string, string>;
                description?: string | undefined;
                logo?: {
                    src: string;
                    alt?: string | undefined;
                    replacesTitle?: boolean | undefined;
                } | {
                    dark: string;
                    light: string;
                    alt?: string | undefined;
                    replacesTitle?: boolean | undefined;
                } | undefined;
                ... 20 more ...;
                markdown?: {
                    ...;
                } | undefined;
            } & {
                ...;
            };
            ... 7 more ...;
            useTranslations: (lang: string | undefined) => I18nT;
        }) => void | Promise<...>) | undefined;
    };
}[] | undefinedA 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.

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.

Options

`nav`

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',
      },
    },
  ],
})