> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ton.org/llms.txt
> Use this file to discover all available pages before exploring further.
## Submitting Feedback
If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:
POST https://docs.ton.org/feedback
```json
{
"path": "/contribute/snippets/overview",
"feedback": "Description of the issue"
}
```
Only submit feedback when you have something specific and actionable to report.
# 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](https://www.mintlify.com/docs/components/cards) or a [YouTube embed](https://www.mintlify.com/docs/create/image-embeds#youtube-embeds).
Mintlify supports MDX snippets and JSX (React) components in MDX files, and provides several [built-in components](#built-in-components). In addition, this documentation includes a number of [custom components](#custom-components) in the `snippets/` folder.
## Using a snippet
The [DRY (Don't Repeat Yourself)](https://en.wikipedia.org/wiki/Don%27t_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](https://www.mintlify.com/docs/create/reusable-snippets).
## 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:
```mdx title="some/page.mdx" theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
---
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!
```
Related Mintlify documentation:
* [JSX snippets](https://www.mintlify.com/docs/create/reusable-snippets#jsx-snippets)
* [React components](https://www.mintlify.com/docs/customize/react-components)
## Built-in components
[Mintlify provides built-in components](https://www.mintlify.com/docs/components/index) 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.
Display sequential instructions in a numbered format.
Display multiple code examples with a toggle.
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.
Arrange \ components in responsive layouts.
Expandable sections for progressive disclosure of content.
Show and hide detailed content on demand. Append the expandable keyword to the opening part of a code block to collapse large examples.
Add inline labels and status indicators for outdated or deprecated items. Otherwise, avoid this component.
Display additional information on hover without going too deep. Link to the [glossary](/foundations/glossary), a detailed explanation page, or a reference page instead.
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.
Show \ that describes API response structures and fields.
Show \ and \ side by side.
When explaining a complex topic or writing a tutorial, use concise diagrams to clarify behavior that text and code cannot.
Use code blocks with [Mermaid.js](https://mermaid.js.org/) syntax to create flowcharts, sequence diagrams, and more.
### Do not use
These components have better alternatives:
1. `` - use the custom [`