Skip to main content
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:
some/page.mdx
---
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 */}
import { Aside } from '/snippets/aside.jsx';

And now, some text and usage!

<Aside>Here we go, some **nested content and formatting**!</Aside>
Related 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.

​
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.

Steps

Display sequential instructions in a numbered format.

Code groups

Display multiple code examples with a toggle.

Cards

Highlight content with customizable containers and icons. Prefer regular ordered or unordered Markdown lists and resort to cards only when the relevant links and content should stand out.

Columns

Arrange <Card> components in responsive layouts.

Accordions

Expandable sections for progressive disclosure of content.

Expandables

Show and hide detailed content on demand. Append the expandable keyword to the opening part of a code block to collapse large examples.

Badge

Add inline labels and status indicators for outdated or deprecated items. Otherwise, avoid this component.

Tooltips

Display additional information on hover without going too deep. Link to the glossary, a detailed explanation page, or a reference page instead.

Fields

Display parameter and property definitions, configuration options, or object fields.
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.

Responses

Show <ResponseField> that describes API response structures and fields.

Examples

Show <RequestExample> and <ResponseExample> side by side.
When explaining a complex topic or writing a tutorial, use concise diagrams to clarify behavior that text and code cannot.

Mermaid diagrams

Use code blocks with Mermaid.js syntax to create flowcharts, sequence diagrams, and more.

​
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:

​
See also