MDX | Presentation

An .mdx deck: built-in components (Grid, Card, Badge, Callout, Step), user components (Timeline, Counter with React state) and JavaScript expressions ({year}, {6 * 7}).

AdvancedMDXBuilt-in componentsReact componentsReact stateExpressions

pnpm --filter recit-example-deck-mdx dev

▶ Open the demoexamples/deck-mdx/slides.mdx

The demo

Click the deck, then use ← → · 4 slides · 00:15Open fullscreen →

Try it

Click the counter on slide 3: it is a stateful React component.
Add export const author = "…" at the top and use {author}.
Create a component in components/index.tsx and use it without import.

Source code

---
title: MDX Deck
author: Lorem Ipsum Team
description: "An MDX deck: built-in components, stateful React components and expressions."
lang: en
---

export const year = 2026

--- layout=cover

# Lorem ipsum MDX

### Dolor sit amet, consectetur — {year}

<Badge type="success">MDX</Badge> <Badge type="primary">React 19</Badge>

---

# Built-in components

<Grid cols={2}>
  <Card title="Lorem ipsum">
    `Grid`, `Card`, `Columns`, `Image`, `Badge`, `Callout`, `Step`… dolor sit amet.
  </Card>
  <Card title="Dolor sit amet">
    `:::card` et `:::callout` consectetur adipiscing elit.
  </Card>
</Grid>

<Callout type="tip" title="Tip">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Callout>

---

# User components

<Timeline items={["Lorem", "Ipsum", "Dolor"]} />

<Counter start={1} />

--- layout=split

# Columns & steps

:::left
<Step>Lorem ipsum dolor</Step>
<Step>Sit amet consectetur</Step>
:::

:::right
```ts title="slides.mdx"
const total = 6 * 7 // {6 * 7}
```

Result: **{6 * 7}**
:::

Configuration

import { defineConfig } from "@recit/core";

export default defineConfig({
  metadata: { lang: "en" },
  theme: { colors: { primary: "#0ea5e9" }, radius: "16px" },
  footer: { right: "{slide} / {total}" },
  components: "./components/index.tsx",
});

Components

import type * as React from "react";
import classes from "./Timeline.module.css";

export { Counter } from "./Counter.js";

/** Numbered steps in a row: a user component of an MDX slide, styled by its module */
export const Timeline: React.FC<{ items: string[] }> = ({ items }) => (
  <ol className={classes.root}>
    {items.map((item, i) => (
      <li key={item} className={classes.item}>
        <span className={classes.step}>{i + 1}</span>
        <span>{item}</span>
      </li>
    ))}
  </ol>
);