Starlight Components

Use this page as a visual regression checklist when changing theme tokens or component overrides.

Cards

Docs navigation

Cards use compact type, quiet surfaces, and restrained hover states.

Theme tokens

Cards, code blocks, tabs, and file trees share the local surface tokens.

Search ready

The interface remains easy to scan on dense documentation pages.

Link Cards

TypographyInspect prose, tables, code, images, and inline elements.

Splash PagesCompare the custom hero layouts supported by the local schema.

Example GuideSee the standard documentation layout with sidebar, table of contents, and pagination.

Asides

Заметка

Default asides provide a quiet way to surface useful context.

Theme QA

Keep this page open while adjusting tokens to catch inconsistent component states quickly.

Contrast check

Review both modes after changing --foreground, --muted-foreground, --border, or --code-background.

Опасно

Do not judge a documentation theme only by headings and paragraphs. Interactive and structured components need the same review.

Badges

• Default
• Note
• Success
• Tip
• Caution
• Danger
• Small
• Large

Code

src/theme/styles/theme.css

@layer lucode {
  :root[data-theme='dark'] {
    --background: oklch(14.5% 0 0);
    --foreground: oklch(98.5% 0 0);
    --code-background: oklch(20.5% 0 0);
  }
}

src/theme/config.ts

export const themeConfig = {
  navLinks: [{ label: 'Showcase', link: '/showcase/starlight-components/' }],
  docs: { includeAiUtilities: false },
};

File Tree

• Директорияsrc

  • Директорияcontent

    • Директорияdocs

      • Директорияshowcase

        • starlight-components.mdx
        • typography.md
        • splash-pages.mdx
  • Директорияtheme

    • Директорияcomponents

      • custom
      • overrides
    • Директорияstyles

      • base.css
      • theme.css
    • config.ts
    • schema.ts
• astro.config.mjs

Icons and Buttons

Starlight button Local theme button

Local Dropdown

Open showcase menu

Theme examples

Splash layoutsTypography

Standard guide Docs

Steps

1. Change a token

   Edit a CSS custom property in src/theme/styles/theme.css.

2. Inspect both themes

   Switch between light and dark mode and review every component group.

3. Check responsive behavior

   Verify the sidebar, search, table of contents, and mobile drawer.

4. Run the production build

   Use bun run build to validate content, aliases, and component imports.

Tabs

Tokens

Design tokens live in src/theme/styles/theme.css.

Components

Starlight overrides live in src/theme/components/overrides.

Configuration

Navigation and local options live in src/theme/config.ts.

Tokens

Use this view for palette and radius changes.

Components

Use this view for structural UI changes.

Configuration

Use this view for labels and navigation.