Skip to main content
Snippets let you write a piece of content once and reuse it across as many pages as you like. When you update the snippet, every page that imports it reflects the change automatically. This is useful for repeated prerequisites, shared warnings, common code examples, and any content that appears in more than one place.

​
Create a snippet

Place snippet files in the snippets/ directory at the root of your docs project: 
docs/
├── snippets/
│   └── my-snippet.mdx
├── essentials/
│   └── quickstart.mdx
└── docs.json
Write the snippet as a normal MDX file with a default export:
snippets/my-snippet.mdx
This content will be reused wherever you import this snippet.
Files inside snippets/ are not rendered as standalone pages. They only appear where you explicitly import and use them.

​
Import and use a snippet

On any page, import the snippet and render it as a component: 
import MySnippet from '/snippets/my-snippet.mdx';

<MySnippet />
Use root-relative import paths starting with /snippets/.

​
Pass props to a snippet

Snippets accept props, letting you customize the content at the point of use. In the snippet file, reference the prop name inside curly braces:
snippets/favorite-fruit.mdx
My favorite fruit is {word}.
On the page that imports it, pass the value as an attribute: 
import FavoriteFruit from '/snippets/favorite-fruit.mdx';

<FavoriteFruit word="bananas" />
This renders: “My favorite fruit is bananas.”

​
Export variables

You can export named variables from a snippet and import them individually on other pages:
snippets/variables.mdx
export const companyName = 'Acme Corp';
export const supportEmail = 'support@acme.com';

import { companyName, supportEmail } from '/snippets/variables.mdx';

Contact {companyName} at {supportEmail}.

​
Export components

Export a component as an arrow function to reuse structured content with dynamic props:
snippets/callout-card.mdx
export const CalloutCard = ({ title }) => (
  <div>
    <h3>{title}</h3>
    <p>This is a reusable card component.</p>
  </div>
);

import { CalloutCard } from '/snippets/callout-card.mdx';

<CalloutCard title="Getting started" />
MDX does not compile inside the body of an arrow function. Use plain HTML tags — not Mintlify MDX components — inside exported arrow function components. For example, use <div> and <p> instead of <Card> or <Note>.