MDX

Rename the deck to slides.mdx: every command supports it. Separators, directives and configuration stay the same; you gain JSX components and expressions.

slides.mdx
export const year = 2026

--- layout=cover

# Lorem ipsum MDX

### Dolor sit amet — {year}

<Badge type="success">MDX</Badge>

import / export lines written at the top of the deck are shared by every slide. Built-in components are available without imports (see the catalog on components.recit.dev), and your own components are declared in the components key of recit.config.ts.

components/index.tsx
import { useState } from "react";

export const Counter = ({ start = 0 }: { start?: number }) => {
  const [count, setCount] = useState(start);
  return (
    <button type="button" onClick={() => setCount((c) => c + 1)}>
      Clicks: {count}
    </button>
  );
};

In a Markdown deck, the same components are used with :::component{name=Counter start=3}.