Markdown
GitHub alert syntax and MDX components rendered with Mantine
This template renders Markdown and MDX through fumadocs with a
fully Mantine-based component map: every HTML tag produced by your .mdx files is rendered
with a Mantine component (headings, links, tables, blockquotes, and so on).
It also supports the GitHub alert syntax, rendered with a Mantine Alert.
Usage
Useful information that users should know, even when skimming content.
Markdown
> [!NOTE]
>
> Useful information that users should know, even when skimming content.Helpful advice for doing things better or more easily.
Markdown
> [!TIP]
>
> Helpful advice for doing things better or more easily.Key information users need to know to achieve their goal.
Markdown
> [!IMPORTANT]
>
> Key information users need to know to achieve their goal.Urgent info that needs immediate user attention to avoid problems.
Markdown
> [!WARNING]
>
> Urgent info that needs immediate user attention to avoid problems.Advises about risks or negative outcomes of certain actions.
Markdown
> [!CAUTION]
>
> Advises about risks or negative outcomes of certain actions.How it works
The blockquote mapping
The MDX component map in components/mdx/index.tsx maps the blockquote tag to a
component that detects the [!TYPE] marker in the first paragraph. When found, the
blockquote renders as a Mantine Alert of the matching type; otherwise it renders as a
regular Mantine Blockquote.
The Callout component
You can also use the Callout component directly in your MDX files:
import { Callout } from '@/components/mdx'
<Callout type="tip" title="Pro tip">
You can customize everything with Mantine props.
</Callout>You can customize everything with Mantine props.
Customize it
All the MDX components live in components/mdx/ — they are plain Mantine components,
so you can restyle them with the usual Mantine theme tokens and Styles API.