MDX Components

All the Mantine-based components available in your MDX content

Every component on this page is rendered with Mantine — you can restyle all of them through the Mantine theme. They live in components/mdx, ready to be customized.

Callout

Five semantic types, built on Alert:

import { Callout } from '@/components/mdx'

<Callout type="tip" title="Custom title">Helpful advice for doing things better.</Callout>

You can also use the GitHub alert syntax in plain Markdown blockquotes.

Steps

Numbered steps with a connector line — just nest h3 headings inside:

import { Steps } from '@/components/mdx'

<Steps>

### Install the package

### Configure it

### Profit

</Steps>

FileTree

import { FileTree } from '@/components/mdx'

<FileTree>
  <FileTree.Folder name="app" defaultOpen>
    <FileTree.File name="layout.tsx" />
  </FileTree.Folder>
</FileTree>

Code blocks

Code is highlighted at build time with Shiki — zero client-side JavaScript — and follows the Mantine color scheme. Add a title with the title meta:

export const source = loader({
  baseUrl: '/docs',
  source: docs.toFumadocsSource(),
});

Highlight specific lines with {n}:

const a = 1;
const highlighted = 'this line pops';
const b = 2;

Inline code like const x = 1 is styled too.

Tables

Markdown tables are rendered with the Mantine Table component, scrollable on small screens:

Mantine components, directly

Since the whole app shares one styling system, you can drop any Mantine component straight into your MDX:

import { Button, Center } from '@mantine/core';

<Center my="lg">
  <Button>I am a Mantine Button inside MDX</Button>
</Center>