# MDX

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

```mdx title="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](https://components.recit.dev)), and your own components are declared in the `components`
key of [`recit.config.ts`](/documentation/configuration/recit-config).

```tsx title="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}`.

<StoryEmbed slug="mdx" slide={3} />