Using components inside MDX

The difference between .md and .mdx is that MDX lets a post import components and use them as tags. Everything else — frontmatter, the schema, the route — is identical.

Here is a real <Card>, rendered from inside this post’s body:

And a <Button>:

See the full style guide

When to reach for MDX

Use it when a post genuinely needs interactivity or a bespoke layout block — a comparison table component, an embedded demo, a callout. Plain Markdown builds faster and is easier for a non-developer to edit, so it should stay the default for ordinary prose.

One caveat worth knowing: component imports in MDX use paths relative to the content file, not the project root, which is why the imports above start with ../../.