> ## Documentation Index
> Fetch the complete documentation index at: https://companyname-a7d5b98e-ton-storage.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Using components and snippets

*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](https://www.mintlify.com/docs/components/cards) or a [YouTube embed](https://www.mintlify.com/docs/create/image-embeds#youtube-embeds).

Mintlify supports the use of MDX snippets and JSX (React) components in MDX files and provides some [built-in components](#built-in-components) for you to use. In addition to those, this documentation provides a number of [custom components](#custom-components) in the `snippets/` folder.

## Using a snippet

One of the core principles of software development is [DRY (Don’t Repeat Yourself)](https://en.wikipedia.org/wiki/Don%27t_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](https://www.mintlify.com/docs/create/reusable-snippets).

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

```mdx title="some/page.mdx" theme={null}
---
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:

* [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 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](https://www.mintlify.com/docs/create/reusable-snippets#jsx-snippets), such as: [Accordion](https://www.mintlify.com/docs/components/accordions), [Cards](https://www.mintlify.com/docs/components/cards), [Columns](https://www.mintlify.com/docs/components/columns), [Code groups](https://www.mintlify.com/docs/components/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](/contribute/snippets/aside), [Image](/contribute/snippets/image), etc.

## Styling

Mintlify supports [Tailwind CSS v3][tailwind] style HTML elements and any components or snippets from the `snippets/` folder.

Read more:

* [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

* [Learn how to format text, create headers, and style content with Mintlify](https://www.mintlify.com/docs/text)

[tailwind]: https://v3.tailwindcss.com/docs/utility-first