Using components and snippets

Snippets keep the same content in sync across pages, while components provide reusable UI elements with consistent styling. Examples include a link card or a YouTube embed.

Mintlify supports MDX snippets and JSX (React) components in MDX files, and provides several built-in components. In addition, this documentation includes a number of custom components in the snippets/ folder.

Using a snippet

The DRY (Don't Repeat Yourself) principle applies to documentation. When the same content appears in multiple places, create a custom snippet to keep it in sync.

All snippets are placed in the root snippets/ folder. For creation and usage details, see the Mintlify reusable snippets documentation.

Using a component

To use a custom component, import it into the MDX file and render it as a JSX tag. Tags start with an uppercase letter matching the name in the import statement:

---
title: "Frontmatter goes first, as usual"
---

{/* Snippet imports go right after the frontmatter */}
import MyMdxSnippet from '/snippets/my-mdx-snippet.mdx';

{/* Component imports follow suit */}

And now, some text and usage!

<Aside>Here we go, some **nested content and formatting**!</Aside>

Related Mintlify documentation:

• JSX snippets
• React components

Built-in components

Mintlify provides built-in components for common documentation use cases. These components are available globally without needing to import anything.

Use sparingly

Keep formatting as simple as possible. Avoid components when a paragraph or series of paragraphs communicates the same intent and information without them.

Use either of the following components only on pages that document HTTP APIs. Because they override the default auto-generated blocks, prefer regular code blocks whenever possible.

When explaining a complex topic or writing a tutorial, use concise diagrams to clarify behavior that text and code cannot.

Do not use

These components have better alternatives:

1. <Callout> - use the custom <Aside> component.
2. <Frame> - use the custom <Image> component.
3. <View> - use <CodeGroup>, organize content in sub-headers, or create distinct pages per environment or language.
4. <Tile> - use <Card>.
5. <Icon> - do not use unless icons in other components or code blocks are insufficient in the given case.

These components are currently unused:

1. <Banner> - reserved for special occasions and public releases.
2. <Update> - the documentation does not contain changelogs.

Custom components

TON documentation includes custom 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 for styling HTML elements and any components or snippets from the snippets/ folder.

Related resources:

• Styling with Tailwind CSS in the Mintlify documentation
• Tailwind CSS v3 documentation
• Unofficial Tailwind CSS v3 cheatsheet

See also

• Text formatting, headers, and styling with Mintlify