Component guide

This page is the living guide of the docs module: it shows every element available when writing MDX. Use it as a reference (and as a test page whenever the documentation shell changes).

Typography

Text with bold, italics, inline code, ~~strikethrough~~ and relative internal links that resolve to the right language automatically.

Blockquotes highlight ideas or third-party references.

Callouts

Information

The default callout, for additional context.

Careful

For warnings the reader shouldn't skip.

Danger

For destructive actions or common errors.

Cards

Installation

The project bootstrap guide.

Introduction

The documentation welcome page.

Code

Block with a title and syntax highlighting (shiki, light/dark themed):

lib/example.ts

export function greet(name: string): string {
  return `Hello, ${name}`;
}

With highlighted lines and line numbers:

highlight.ts

export function sum(values: number[]): number {
  return values.reduce((total, v) => total + v, 0);
}

With diff notation:

changes.ts

export function budget(items: number[]): number {
  return items.reduce((total, i) => total + i, 0); 
  return items.reduce((total, i) => total + i * 1.18, 0); 
}