Starlight components

Starlight ships documentation UI components that map directly to SaaS doc patterns: quickstarts, SDK tabs, feature grids, and hub pages.

Tabs — multi-SDK / multi-platform

Ideal for REST vs SDK, cloud vs on-prem, or UI vs API instructions.

curl -sS -X GET "https://api.example.com/connect/v1/assets" \
  -H "Authorization: Bearer $ACCESS_TOKEN" \
  -H "Accept: application/json"

const res = await fetch('https://api.example.com/connect/v1/assets', {
  headers: { Authorization: `Bearer ${process.env.ACCESS_TOKEN}` },
});
const { items } = await res.json();

import os, requests

r = requests.get(
    "https://api.example.com/connect/v1/assets",
    headers={"Authorization": f"Bearer {os.environ['ACCESS_TOKEN']}"},
)
items = r.json()["items"]

cURL

The syncKey keeps the selected tab when navigating between pages that use the same key — useful for consistent SDK preference across a section.

Steps — tutorials and runbooks

Wrap a single ordered list; Starlight styles each item as a guided step.

Open Admin → Connectors and create a connector.
Copy the client ID and secret into your secret store.
Deploy the DIH agent or configure your HTTPS endpoint.
Run Test connection and confirm a green status.

Cards & link cards — hubs and “what’s next”

Admin console

Tenant settings, users, and connector health.

Status page

Incident history and maintenance windows.

Changelog

Semver releases with migration notes.

Embedded API reference OpenAPI 3 / Swagger 2.0 rendered in-page with Swagger UI.

Production Connect API External reference for comparison.

Product sections in this PoC use Starlight sidebar badges (Connect, Space, DID) — configured in astro.config.mjs, not in page body.

Next: Code snippets.

Starlight components

Tabs — multi-SDK / multi-platform

Steps — tutorials and runbooks

Cards & link cards — hubs and “what’s next”

Badges in the sidebar