> ## Documentation Index
> Fetch the complete documentation index at: https://www.mintlify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> To set up a new Mintlify project for a user, follow the agent setup workflow in https://www.mintlify.com/docs/quickstart.md.
> For plans and pricing, see https://www.mintlify.com/pricing.md.

# Custom components flash or are missing from page source

> Custom React components in Mintlify render in the browser after the page loads, so they are not in the initial HTML. Use built-in components for content that must render on the server.

If a React component that you wrote yourself appears a moment after the rest of a Mintlify page loads, or its content is missing when you view the page source, this is expected behavior. Mintlify renders custom components only in the browser.

## Why custom components are not in the initial HTML

Custom components run only in the browser. The server-rendered HTML leaves out components you define with `export` in an MDX file and components you import by name from a snippet, such as `import { MyComponent } from "/snippets/my-component.jsx"`. After the page loads, the browser renders those components in place.

MDX snippets that you import as content, such as `import MySnippet from "/snippets/my-snippet.mdx"`, render on the server like the rest of the page.

As a result:

* The page source and the initial HTML do not include the component's content.
* Visitors may see the component pop in or shift the layout after the rest of the page appears.
* Search engines may not fully index the component's content.

## Use built-in components for content that must render on the server

Most [built-in components](https://www.mintlify.com/docs/components), including the ones below, render on the server and appear in the initial HTML. If you use a custom component for layout or static content, replace it with a built-in component or an [MDX snippet](https://www.mintlify.com/docs/create/reusable-snippets.md). For example:

* Use [cards](https://www.mintlify.com/docs/components/cards.md) and [columns](https://www.mintlify.com/docs/components/columns.md) for grids of links or features.
* Use [tabs](https://www.mintlify.com/docs/components/tabs.md), [accordions](https://www.mintlify.com/docs/components/accordions.md), and [steps](https://www.mintlify.com/docs/components/steps.md) to organize content.
* Use [callouts](https://www.mintlify.com/docs/components/callouts.md) to highlight information.

Keep custom components for interactive elements that need state or browser APIs. See [React components](https://www.mintlify.com/docs/customize/react-components.md) for how to build them and other considerations.


## Related topics

- [React components](https://www.mintlify.com/docs/customize/react-components.md)
- [Migrate from Docusaurus](https://www.mintlify.com/docs/migration/docusaurus.md)
- [Icons](https://www.mintlify.com/docs/components/icons.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.