# MDX

import source from "../../../../examples/deck-mdx/components/index.tsx?raw";

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

<ExampleHeader folder="deck-mdx" demo="mdx" file="slides.mdx" level="Advanced" features={["MDX", "Built-in components", "React components", "React state", "Expressions"]} />

## The demo

<StoryEmbed slug="mdx" />

## Try it

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

## Source code

<SourceFile deck="mdx" title="examples/deck-mdx/slides.mdx" language="mdx" />

## Configuration

<SourceFile deck="mdx" part="config" title="examples/deck-mdx/recit.config.ts" language="ts" />

## Components

<SourceFile code={source} title="examples/deck-mdx/components/index.tsx" language="tsx" />