Component reference

Five components live under src/components/ and are importable in any MDX page via the ~/ alias. Four are placed manually where they fit; the fifth is auto-injected and must not be placed by hand.

<Warning />

A branded callout for genuine hazards.

Props

Prop	Type	Default	Purpose
type	'caution' | 'info' | 'danger'	'caution'	Color and semantic role of the callout.
title	string	—	Optional heading shown above the body.

Usage

import Warning from '~/components/Warning.astro';

<Warning type="danger" title="Destructive">
  `pnpm astro build` overwrites `dist/` — commit first.
</Warning>

Live example

Destructive

pnpm astro build overwrites dist/ — commit first.

See How to add a warning callout for guidance on when to reach for each variant.

<CodeTabs />

Language-variant code blocks. Use when the same operation has meaningfully different shapes in two or more languages or toolchains. Not for stylistic variants of the same language.

Props

Prop	Type	Default	Purpose
syncKey	string	—	Optional key that links multiple <CodeTabs> on the page so selecting one switches them all.

Children must be <TabItem label="..."> from @astrojs/starlight/components.

Usage

import CodeTabs from '~/components/CodeTabs.astro';
import { TabItem } from '@astrojs/starlight/components';

<CodeTabs syncKey="lang">
  <TabItem label="Python">
    ```python
    import requests
    r = requests.get('https://api.example.com/users/42')
    user = r.json()
    ```
  </TabItem>
  <TabItem label="TypeScript">
    ```ts
    const r = await fetch('https://api.example.com/users/42');
    const user = await r.json();
    ```
  </TabItem>
</CodeTabs>

Live example

Python

import requests
r = requests.get('https://api.example.com/users/42')
user = r.json()

TypeScript

const r = await fetch('https://api.example.com/users/42');
const user = await r.json();

<ApiRef />

A single-endpoint card for reference pages describing HTTP APIs. One per endpoint.

Props

Prop	Type	Required	Purpose
method	'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'	yes	HTTP verb, color-coded.
path	string	yes	URL path including any path parameters.
description	string	no	One-sentence purpose of the endpoint.
schemaLabel	string	no	Label for a linked request/response schema.
schemaHref	string	no	URL the schema label links to.

Usage

import ApiRef from '~/components/ApiRef.astro';

<ApiRef
  method="POST"
  path="/api/v1/users"
  description="Create a new user account."
  schemaLabel="UserCreate"
  schemaHref="/reference/schemas/user-create/"
/>

Live example

POST /api/v1/users

Create a new user account.

Schema: UserCreate

<Mermaid />

Client-rendered Mermaid diagrams. Use for architecture diagrams, flowcharts, sequence diagrams, and other visual documentation. Fenced ```mermaid code blocks also render as diagrams automatically without importing the component.

Props

Prop	Type	Required	Purpose
chart	string	yes	Mermaid diagram definition.

Usage

import Mermaid from '~/components/Mermaid.astro';

<Mermaid chart={`
graph LR
    A[Input] --> B[Process] --> C[Output]
`} />

Live example

See Mermaid diagrams for more diagram types and the fenced code block syntax.

<StackIcon />

Renders a single inline brand icon from simple-icons. Designed for stack-style bullet lists on the landing page, but usable anywhere in MDX. Unknown brand names render a small dot placeholder so the bullet still lays out cleanly — no runtime errors.

The name prop is matched against a normalization map in src/lib/stack-icon-map.ts (lowercases, strips punctuation), so "Next.js", "nextjs", and "next" all resolve to the same icon. Extend that map to cover new brands.

Props

Prop	Type	Required	Notes
name	string	yes	Stack value (e.g. "TypeScript", "Postgres"). Case-insensitive.
size	string	—	CSS length for width and height. Default 1.1em (inherits from surrounding text).

Import

import StackIcon from '~/components/StackIcon.astro';

Example

## Stack

- <StackIcon name="TypeScript" /> **TypeScript** — type-safe authoring.
- <StackIcon name="Astro" /> **Astro** — static site generator.
- <StackIcon name="Postgres" /> **Postgres** — primary datastore.

Icons render in currentColor so they inherit the surrounding text color and adapt to light / dark mode.

<CopyMarkdownButton /> — auto-injected

Renders next to every page’s h1 heading via a Starlight PageTitle override. Clicking it copies the raw Markdown source of the page to the clipboard — the same payload served by GET /<slug>.md (where <slug> is the page’s URL path).

Do not import or place <CopyMarkdownButton /> manually in a page body. It appears automatically on every page; placing it by hand produces a duplicate that breaks the header layout.

Built-in endpoints

Every component-using page is reachable via two URLs: the HTML page and the raw-Markdown twin. The template also exposes a readiness probe:

GET /health

JSON readiness probe. Body includes service identity and template version.

GET /llms.txt

Machine-readable index of every page (llmstxt.org format).

GET /<slug>.md

Raw Markdown source of a page, frontmatter preserved.