# Using components and snippets (https://docs.ton.org/llms/contribute/snippets/overview/content.md)
Due to the move from Mintlify to Fumadocs, most descriptions on this page and related snippet and component pages are obsolete. They will be patched up soon, sorry for the inconvenience.
*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 [#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 *ad hoc* 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 [#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"
---
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!
Here we go, some **nested content and formatting**!
```
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 [#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 [#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. Always wrap `` components in a single `` block.
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 page, 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 [#do-not-use]
These components have better alternatives:
1. `` - use the custom [``](https://docs.ton.org/llms/contribute/snippets/aside/content.md) component.
2. `` - use the custom [``](https://docs.ton.org/llms/contribute/snippets/image/content.md) component.
3. `` - use ``, organize content in sub-headers, or create distinct pages per environment or language.
4. `` - use ``.
5. `` - do not use unless icons in other components or code blocks are insufficient in the given case.
These components are currently unused:
1. `` - reserved for special occasions and public releases.
2. `` - the documentation does not contain changelogs.
## Custom components [#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](https://docs.ton.org/llms/contribute/snippets/aside/content.md), [Image](https://docs.ton.org/llms/contribute/snippets/image/content.md), etc.
## Styling [#styling]
Mintlify supports [Tailwind CSS v3][tailwind] for styling HTML elements and any components or snippets from the `snippets/` folder.
Related resources:
* [Styling with Tailwind CSS in the Mintlify documentation](https://www.mintlify.com/docs/settings/custom-scripts#styling-with-tailwind-css)
* [Tailwind CSS v3 documentation][tailwind]
* [Unofficial Tailwind CSS v3 cheatsheet](https://tailwindcss.504b.cc/)
## See also [#see-also]
* [Text formatting, headers, and styling with Mintlify](https://www.mintlify.com/docs/create/text)
[tailwind]: https://v3.tailwindcss.com/docs/utility-first