Formatting & Advanced Components

import { Tabs, TabItem, Steps } from ‘@astrojs/starlight/components’;

Starlight includes built-in support for rich technical documentation formatting.

Callouts (Admonitions)

Use three colons (:::) to create styled notification boxes:

Note

Standard informational callout for general context.

Best Practice

Highlight shortcuts, tips, and recommended practices.

Caution

Alert readers to potential pitfalls or prerequisites.

Critical Warning

Highlight actions that could cause data loss or system errors.

---

Interactive Tabs

Use <Tabs> when presenting operating-system-specific instructions or multi-language code:

1. Press `Win + R`. 2. Type `cmd` and press Enter. 1. Press `Cmd + Space` to open Spotlight. 2. Type `Terminal` and press Enter.

---

Syntax-Highlighted Code Blocks

Add language tags, file titles, and line highlights to code snippets:

config.js

// Highlighting specific lines helps draw attention
const API_URL = "[https://api.example.com/v1](https://api.example.com/v1)";
export default API_URL;