← Home

MDX Components

(Last Edited)

These components are available globally in every .mdx file — no import needed.

ArticleList

Renders a sorted list of articles from a content directory.

<ArticleList dir="blog" />
<ArticleList dir="blog" limit={5} />
PropTypeRequiredDescription
dirstringYesDirectory path relative to content/.
limitnumberNoMaximum number of articles to show.

Articles are sorted by date descending. Undated articles sort last. Draft articles are excluded.

ArticleListItem

Renders a single article row. Used internally by <ArticleList> but available for custom layouts.

<ArticleListItem article={article} urlPrefix="/blog" />
PropTypeRequiredDescription
articleArticleYesArticle object from getArticlesInDir.
urlPrefixstringYesURL prefix prepended to the article slug.

TableOfContents

Client component. Auto-detects all h2 and h3 headings on the page and renders a linked list. Highlights the active heading as you scroll.

<TableOfContents />

No props. Place it anywhere in the MDX body — typically near the top of long articles.

Spacer

Inserts vertical whitespace.

<Spacer />
<Spacer size="xl" />
PropTypeDefaultDescription
size'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl''md'Amount of vertical space.

Adding new components

  1. Create the component in src/components/mdx/.
  2. Export it from src/components/mdx/index.tsx and add it to the mdxComponents map.

The component is then available globally in all MDX files without any import.