Starlight components

This page hosts a visual reference for every Starlight built-in component, rendered in the Exquisitus style. Each component keeps its own behavior and markup; the theme only changes how it looks.

Asides

Four semantic variants, each with a distinct hue and a softened full border instead of a side stripe.

Tabs

The active tab is marked three ways at once: accent color, weight 600, and a 3px indicator. Selection is unambiguous without competing chrome. Light mode sets the page in a chroma-0 off-white, never a warm tint.

Steps

Step counters are set in JetBrains Mono with tabular figures, so multi-digit sequences stay aligned.
The connecting guide fades softly into the page below the last step.
example.js
```
const step = 2;
```
Each step is free to hold prose, code, or another component.

Cards

Hairline, not box

Cards are defined by a single hairline and a generous radius. On hover they lift two pixels and warm their border; the lift is suppressed on touch.

Sans titles

Card titles are set in Alegreya Sans, tying them to the document headings and the rest of the wayfinding register.

Read the typography pageSee how prose, blockquotes, and tables read in the reading column.

Link buttons

Primary Secondary Minimal

The primary button uses the full honey-amber as a fill with an ink label: the one place in light mode where the brand color appears at full strength. It can’t carry link text on white (insufficient contrast), so links deepen to bronze; the button, with its dark ink label, carries it freely.

File tree

An open hairline figure, not a filled box. It sits on the page surface and is pressed slightly into it with the same letterpress as the code block below, so the two read as one family without twinning. Petrol-teal marks structure: folder icons, disclosure markers, and the indent guides. Files stay neutral, and the warm accent is reserved for hover and the highlighted file.

astro.config.mjs
package.json
Directorysrc
- Directorycontent
  - Directorydocs
    getting-started.mdx
    index.mdx
- Directorystyles
  - custom.css

Details

The summary of a disclosure

The content of the disclosure. It can hold any Markdown, whether prose, code blocks, or even lists. The summary is set in Alegreya Sans, tying it to the heading hierarchy.

Code blocks

Code blocks are reframed as editorial figures. The filename becomes a quiet monospace caption above the panel, without the usual editor-tab chrome or traffic-light dots, and the panel itself is a bordered, petrol-tinted surface pressed into the page. The letterpress ties code to the file tree: both belong to the information register, signalled by petrol-teal, monospace, and a slight debossed depth against the flat reading surface. Diff lines keep their familiar bands but also carry a +/− gutter glyph, so the change reads without relying on color alone.

import starlight from '@astrojs/starlight';
import starlightThemeExquisitus from 'starlight-theme-exquisitus';
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [
    starlight({
      plugins: [starlightThemeExquisitus()],
      title: 'My Docs',
    }),
  ],
});

function greet(name) {
  return 'Hello, ' + name;
  return `Hello, ${name}`;
}

pnpm add starlight-theme-exquisitus

Badges

Badges appear here as well:

New, Beta, Note, Deprecated, and Experimental.