> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/mintlify/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# React components
> Build interactive and reusable elements with React components in your documentation.
[React components](https://react.dev) are a powerful way to create interactive and reusable elements in your documentation. Use React hooks to build dynamic interfaces that respond to user interactions.
## Using React components
You can build React components directly in your MDX files using [React hooks](https://react.dev/reference/react/hooks).
### Example: Counter component
This example declares a `Counter` component and then uses it with ``.
```mdx theme={null}
export const Counter = () => {
const [count, setCount] = useState(0)
const increment = () => setCount(count + 1)
const decrement = () => setCount(count - 1)
return (
{count}
)
}
```
The counter renders as an interactive React component with increment and decrement buttons.
React components defined in MDX files have access to all standard React hooks including `useState`, `useEffect`, `useMemo`, and more.
## Importing components
To import React components in your MDX files, the component files must be located in the `/snippets/` folder. Learn more about [reusable snippets](/create/reusable-snippets).
Nested imports are not supported. If a React component references other components, you must import all components directly into the parent MDX file rather than importing components within component files.
### Example: Color generator
This example demonstrates a more complex `ColorGenerator` component that uses multiple React hooks.
Create a `color-generator.jsx` file in the `snippets` folder:
```jsx /snippets/color-generator.jsx theme={null}
export const ColorGenerator = () => {
const [hue, setHue] = useState(180)
const [saturation, setSaturation] = useState(50)
const [lightness, setLightness] = useState(50)
const [colors, setColors] = useState([])
useEffect(() => {
const newColors = []
for (let i = 0; i < 5; i++) {
const l = Math.max(10, Math.min(90, lightness - 20 + i * 10))
newColors.push(`hsl(${hue}, ${saturation}%, ${l}%)`)
}
setColors(newColors)
}, [hue, saturation, lightness])
const copyToClipboard = (color) => {
navigator.clipboard
.writeText(color)
.then(() => {
console.log(`Copied ${color} to clipboard!`)
})
.catch((err) => {
console.error("Failed to copy: ", err)
})
}
return (
{colors.map((color, idx) => (
copyToClipboard(color)}
/>
))}
Base color: hsl({hue}, {saturation}%, {lightness}%)
)
}
```
Import the `ColorGenerator` component and use it in an MDX file:
```mdx theme={null}
import { ColorGenerator } from "/snippets/color-generator.jsx"
```
The color generator renders as an interactive React component with sliders to adjust hue, saturation, and lightness.
## Considerations
React hook components render on the client-side, which has several implications:
* **SEO**: Search engines might not fully index dynamic content.
* **Initial load**: Visitors may experience a flash of loading content before components render.
* **Accessibility**: Ensure dynamic content changes are announced to screen readers.
* **Optimize dependency arrays**: Include only necessary dependencies in your `useEffect` dependency arrays.
* **Memoize complex calculations**: Use `useMemo` or `useCallback` for expensive operations.
* **Reduce re-renders**: Break large components into smaller ones to prevent cascading re-renders.
* **Lazy loading**: Consider lazy loading complex components to improve initial page load time.
When building React components for documentation, prioritize accessibility by using semantic HTML, ARIA labels, and keyboard navigation support.