Kitchen Sink Example

This page demonstrates all the features available in Starlight. Use this as a reference for what you can do in your documentation.

Heading Levels

Level 3 Heading

This is a level 3 heading. You can use multiple heading levels to organize your content hierarchically.

Level 4 Heading

Level 4 headings are useful for more granular organization.

Level 5 Heading

Even deeper nesting is available for complex topics.

Level 6 Heading

This is the deepest heading level available.

Basic Content

Regular paragraph text goes here. You can write bold text, italic text, bold and italic, inline code, and links.

You can also use lists:

First item
Second item
- Nested item
- Another nested item
Third item

Numbered lists work too:

First step
Second step
Third step
1. Sub-step A
2. Sub-step B

Asides

Asides are highlighted blocks that call attention to specific information.

Code Blocks

JavaScript

function helloWorld(name) {
  console.log(`Hello, ${name}!`);
  return true;
}

helloWorld('Starlight');

Python

def hello_world(name):
    print(f"Hello, {name}!")
    return True

hello_world('Starlight')

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Example Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is an example HTML page.</p>
  </body>
</html>

CSS

body {
  font-family: 'Inter', sans-serif;
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

JSON

{
  "name": "starlight-theme-wpe",
  "version": "1.0.0",
  "description": "A theme for Starlight",
  "type": "module",
  "exports": {
    ".": "./index.js"
  }
}

With Line Highlighting

function calculateTotal(items) {
  let total = 0;
  for (let item of items) {
    total += item.price * item.quantity;
  }

  return total;
}

Tabs

Tabs are useful for showing multiple options or variants:

bash npm install @wpengine/starlight-theme-wpe

bash pnpm add @wpengine/starlight-theme-wpe

bash yarn add @wpengine/starlight-theme-wpe

Tabs with Code Examples

function Button() {
  return <button>Click me</button>;
}

<template>
  <button>Click me</button>
</template>

<button>Click me</button>

Blockquotes

This is a blockquote. It’s useful for quoting text from other sources or highlighting important passages.

“The best way to predict the future is to invent it.” — Alan Kay

Horizontal Rules

Tables

Feature	Status	Description
Asides	✅	Supported
Code Blocks	✅	With syntax highlighting
Tabs	✅	For multi-option content
Tables	✅	For tabular data
Custom Components	✅	MDX support

Key Takeaways

Check out the example reference for more information.