Skip to main content
Snippets allow to conveniently keep the same content in sync, while components let you easily reuse a piece of UI or styling consistently. Examples might include a link card or a YouTube embed. Mintlify supports the use of MDX snippets and JSX (React) components in MDX files and provides some built-in components for you to use. In addition to those, this documentation provides a number of custom components in the snippets/ folder.

​
Using a snippet

One of the core principles of software development is DRY (Don’t Repeat Yourself), which applies to documentation as well. If you find yourself repeating the same content in multiple places, consider creating a custom snippet to keep your content in sync. All snippets are placed in the root snippets/ folder. For more info on their creation and usage, refer to the reusable snippets page in the Mintlify documentation.

​
Using a component

You can use a component by importing it into your MDX file and then rendering it as a JSX tag. These look like HTML tags but start with an uppercase letter matching the name in your import statement:
some/page.mdx
---
title: "Frontmatter goes first, as usual"
---

{/* Right after the formatter go the imports of snippets... */}
import MyMdxSnippet from '/snippets/my-mdx-snippet.mdx';

{/* ...and components */}
import { Aside } from '/snippets/aside.jsx';

And now, some text and usage!

<Aside>Here we go, some **nested content and formatting**!</Aside>
Learn more in the Mintlify documentation:

​
Built-in components

Mintlify provides built-in components for common documentation use cases. These components are available globally without needing to import anything. See items on the left navigation panel near that page, such as: Accordion, Cards, Columns, Code groups, etc.

​
Custom components

TON documentation has a number of components built for various needs. See items on the left navigation panel within the “Components and snippets” group under the “Contribute” section, such as: Aside, Image, etc.

​
Styling

Mintlify supports Tailwind CSS v3 style HTML elements and any components or snippets from the snippets/ folder. Read more:

​
See also

⌘I