Component Showcase

This page showcases all the components and plugins available in this documentation template. Use them to create rich, interactive documentation pages.

Tabs

Use tabs to organize content by context, such as different package managers or languages.

npm

npm install astro-starlight-docs-template

yarn

yarn add astro-starlight-docs-template

pnpm

pnpm add astro-starlight-docs-template

bun

bun add astro-starlight-docs-template

Cards

Standard Cards

Analytics

Google Analytics 4 with Consent Mode v2 and IP anonymization.

GDPR

Automatic GDPR compliance with regional cookie consent.

SEO

Open Graph, Twitter Cards, and Schema.org structured data.

LLM Support

AI-friendly metadata and llms.txt generation.

Staggered Cards

One Command

Run npx astro-starlight-docs-template init and you’re done.

Zero Config

Sensible defaults for everything. Customize only what you need.

Link Cards

Quick Start Guide Get up and running in 2 minutes

Features Overview See everything this template offers

Steps

Use the Steps component for sequential instructions.

1. Install the package

   npx astro-starlight-docs-template init

2. Answer the prompts

   Provide your Google Analytics ID, site URL, and preferences.

3. Build your site

   npm run build

4. Deploy

   Push to GitHub Pages, Vercel, Netlify, or any static host.

File Tree

Visualize your project structure.

• Directorysrc/

  • Directorycomponents/

    • Footer.astro (custom footer)
  • Directorycontent/

    • Directoryblog/

      • welcome.md
      • openapi-support.md
    • Directorydocs/

      • index.mdx
      • Directorygetting-started/

        • quick-start.md
        • installation.md
      • Directoryfeatures/

        • overview.md
        • analytics.md
      • Directoryguides/

        • component-showcase.mdx (this file)
  • Directorystyles/

    • custom.css
• Directoryschemas/

  • openapi.yaml
• Directorypublic/

  • cookie-consent.js
  • favicon.svg
• astro.config.mjs
• package.json

Badges

Inline badges for status indicators:

• Stable Production-ready features
• Beta Features in testing
• Deprecated Features being removed
• New Recently added features

Asides

Note

This is a note aside. Use it for supplementary information.

Pro Tip

This is a tip aside with a custom title. Use it for helpful advice.

Caution

This is a caution aside. Use it for potential issues.

Danger

This is a danger aside. Use it for critical warnings.

Mermaid Diagrams

This template includes Mermaid diagram support. Use fenced code blocks with the mermaid language.

Flowchart

Sequence Diagram

Architecture Diagram

Code Blocks

With Filename and Highlighting

astro.config.mjs

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
import starlightOpenAPI from 'starlight-openapi';

export default defineConfig({
  integrations: [
    starlight({
      plugins: [
        starlightOpenAPI([{
          base: 'api',
          schema: './schemas/openapi.yaml',
        }]),
      ],
    }),
  ],
});

Diff Style

// Before
const config = {
-  analytics: false,
-  gdpr: false,
+  analytics: true,
+  gdpr: true,
+  seo: {
+    ogImage: '/og-image.svg',
+    twitterCard: 'summary_large_image',
+  },
};

Terminal Output

$ npx astro-starlight-docs-template init

🚀 Astro Starlight Docs Template v1.0.1

🔍 Checking if this is an Astro Starlight project...

✓ Astro project detected
✓ Starlight integration found

? Google Analytics Measurement ID: G-XXXXXXXXXX
? Site URL: https://example.com
? Create custom footer? Yes

✅ All done! Run `npm run build` to see your changes.

OpenAPI Integration

This template includes the starlight-openapi plugin which auto-generates API documentation from OpenAPI/Swagger specifications. Check the API Reference section in the sidebar to see it in action.

The API docs are generated from schemas/openapi.yaml and include:

• Individual pages for each endpoint
• Request/response schemas
• Parameter documentation
• Example values

Image Zoom

Images in this documentation support click-to-zoom for better readability. Try clicking on the hero image on the home page.

Blog

This template includes a blog section powered by starlight-blog. The blog lives alongside your documentation and supports posts, tags, authors, and RSS feeds.

Summary

All these components are available out of the box in this template:

Component	Source	Type
Tabs	Built-in	Interactive
Cards / CardGrid	Built-in	Layout
LinkCard	Built-in	Navigation
Steps	Built-in	Sequential
FileTree	Built-in	Visualization
Badge	Built-in	Inline
Asides	Built-in	Callout
Mermaid Diagrams	Plugin	Visualization
OpenAPI Docs	Plugin	API Reference
Image Zoom	Plugin	Enhancement
Blog	Plugin	Content
Link Validation	Plugin	Build-time check