Configuration Reference

Starlight UI Tweaks exposes several options to customize your documentation site’s UI components.

Configure the plugin

navbarLinks

type: Link[]

Add custom navigation links to the navbar.

import starlight from "@astrojs/starlight";
import { defineConfig } from "astro/config";
import starlightUiTweaks from "starlight-ui-tweaks";

export default defineConfig({
  integrations: [
    starlight({
      plugins: [
        starlightUiTweaks({
          navbarLinks: [
            { label: "Documentation", href: "/docs" },
            { label: "API Reference", href: "/api" },
            { label: "GitHub", href: "https://github.com/user/repo" },
          ],
        }),
      ],
      title: "My Docs",
    }),
  ],
});

ad

type: Ad

Display promotional content below the table of contents on desktop, or at the end of page content on mobile.

import starlight from "@astrojs/starlight";
import { defineConfig } from "astro/config";
import starlightUiTweaks from "starlight-ui-tweaks";

export default defineConfig({
  integrations: [
    starlight({
      plugins: [
        starlightUiTweaks({
          ad: {
            image: "/ad-image.png",
            title: "Try Our New Product",
            description: "Boost your productivity with our latest tool.",
            buttonLabel: "Learn More",
            buttonHref: "https://example.com/product",
          },
        }),
      ],
      title: "My Docs",
    }),
  ],
});

footer

type: Footer

Add a marketing-style footer with four columns to pages using the splash template.

import starlight from "@astrojs/starlight";
import { defineConfig } from "astro/config";
import starlightUiTweaks from "starlight-ui-tweaks";

export default defineConfig({
  integrations: [
    starlight({
      plugins: [
        starlightUiTweaks({
          footer: {
            copyright: "My Company. All rights reserved.",
            firstColumn: {
              title: "Product",
              links: [
                { label: "Features", href: "/features" },
                { label: "Pricing", href: "/pricing" },
              ],
            },
            secondColumn: {
              title: "Resources",
              links: [
                { label: "Documentation", href: "/docs" },
                { label: "Guides", href: "/guides" },
              ],
            },
            thirdColumn: {
              title: "Support",
              links: [
                { label: "Help Center", href: "/help" },
                { label: "Community", href: "/community" },
              ],
            },
            fourthColumn: {
              title: "Company",
              links: [
                { label: "About", href: "/about" },
                { label: "Blog", href: "/blog" },
              ],
            },
            showSocialIcons: true,
          },
        }),
      ],
      title: "My Docs",
    }),
  ],
});

locales

type: Record<string, LocaleConfig>

Provide translations for UI Tweaks content in different languages.

Each locale key must match the locale keys defined in your Starlight configuration. You can translate navbarLinks, ad, and footer for each locale.

import starlight from "@astrojs/starlight";
import { defineConfig } from "astro/config";
import starlightUiTweaks from "starlight-ui-tweaks";

export default defineConfig({
  integrations: [
    starlight({
      locales: {
        root: {
          label: "English",
          lang: "en",
        },
        es: {
          label: "Español",
          lang: "es",
        },
      },
      plugins: [
        starlightUiTweaks({
          navbarLinks: [{ label: "Documentation", href: "/docs" }],
          locales: {
            es: {
              navbarLinks: [{ label: "Documentación", href: "/docs" }],
            },
          },
        }),
      ],
      title: "My Docs",
    }),
  ],
});

See the Internationalization guide for more details.