Demo

This is a demonstration of the MDX content design.

Elements

Headings

You're already seeing the headings in action.

Paragraphs

You're already seeing the paragraphs (normal text) in action.

Inline Formatting

We natively support bold text and italic text.

Underlined and ~~strikethrough~~ text is not natively supported through markdown, but can be manually applied using HTML. These aren't commonly used and aren't required.

Hyperlinks

A link formatted as text, like so: this is a hyperlink.

Code

We support inline code as well as full markdown code blocks:

# Fenced Code Block

This is markdown displayed in a fenced code block.

We also support more advanced code blocks via custom MDX components:

We also support a runnable code block:

Lists

We support two types of lists:

Ordered lists
- These lists can be nested.
- These lists are numbered.
Unordered lists
1. These lists can also be nested.
2. These lists are bulleted.

Blockquotes

We support blockquotes, used for quoting things.

Keys

We support keys for showing keyboard shortcuts using the HTML <kbd> syntax.

Example: Ctrl+K

Tables

We don't support markdown tables, but we do support HTML tables:

Column A	Column B
Item 1	Item 2
Item 3	Item 4
Item 5	Item 6

Cards

We support cards to display information or links in a clearer way, including supporting several Cards in one inline row using Grids.

This is a Card

Cards can have a title, icon, description, and link.

Grids

Grids allow Cards to be presented in a grid layout.

Card 1

This is a card in a Grid.

Card 2

This is a card in a Grid.

Card 3

This is a card in a Grid.

Card 4

This is a card in a Grid.

Callouts

There are various callout components to draw the user's attention in necessary ways.

This is an Info callout for anything informational.

This is a Warning callout to warn users.

This is an Error callout to inform users about issues or erroneous actions.

This is a Success callout to indicate a successful status.

Steps

Steps are an alternative to ordered lists that are specifically designed for followable instructions. They feature a left-aligned vertical "timeline" with several numbered circles ordered on it. As the user scrolls down, completing one step at a time, the circles get marked as completed and the sections of the timeline are highlighted purple.

Prerequisites

Make sure you have everything you need before starting. This might include a computer, internet access, and a cup of coffee.

Installation

Install the package using your favorite package manager.

npm install your-package

Configuration

Set up the configuration file in your project root.

Launch

You're all set! Run the application and see the magic happen.

Now test everything.

It's always critical to test.

Accordions

Accordions are stacks of full-width buttons that can be clicked to reveal one or more snippets of nested long content.

ApiFields

An ApiField is designed to show API-style documentation. It features a name, datatype, required/optional status, and a default value.

textstringrequireddefault: "Hello World"

The text used by your program.

best_numintegerdefault: 67

The best number in 2026.

Logs

Logs are designed to map a label and description on the left to content on the right. Here is an example combining Steps, Logs, and Accordions to create functional changelogs.

2026-15-6

Revert 67 Update

2026-16-5

67 Update

Badges

The following is an example of a badge. They support a couple of preset colors.

67 Update NEW