React components

Build interactive elements in your docs using React components and hooks directly in MDX files.

Inline components

Declare components directly in your MDX file:

export const Counter = () => {
  const [count, setCount] = useState(0)
  const increment = () => setCount(count + 1)
  const decrement = () => setCount(count - 1)

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  )
}

<Counter />

Constraints

React components in Mintlify run in a sandboxed MDX environment with the following constraints:

React hooks are pre-injected: useState, useEffect, useRef, useCallback, useMemo, useContext, and useReducer are available without importing them.
npm packages require setup: To import third-party packages, set up third-party libraries. Otherwise, use browser built-ins or write the logic inline.
No default exports: Use named exports (export const MyComponent = ...). Default exports (export default) are not supported.
Each file declares its own imports: If a snippet uses another snippet, import it in that snippet file. Imports on the page don’t apply to the snippets the page imports. See Nested snippets.
No JSON imports: Importing .json files is not supported.
No code splitting: React.lazy and dynamic import() are not supported. All component code on a page, including imported snippets, compiles into the page and loads with it.

Import components

Component files are .jsx or .tsx files, and you can place them anywhere in your project. Learn more about reusable snippets. Create a component file in snippets/:

/snippets/color-generator.jsx

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 (
    <div className="p-4 border dark:border-zinc-950/80 rounded-xl not-prose">
      <div className="space-y-4">
        <div className="space-y-2">
          <label className="block text-sm text-zinc-950/70 dark:text-white/70">
            Hue: {hue}°
            <input
              type="range"
              min="0"
              max="360"
              value={hue}
              onChange={(e) => setHue(Number.parseInt(e.target.value))}
              className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
              style={{
                background: `linear-gradient(to right, 
                  hsl(0, ${saturation}%, ${lightness}%), 
                  hsl(60, ${saturation}%, ${lightness}%), 
                  hsl(120, ${saturation}%, ${lightness}%), 
                  hsl(180, ${saturation}%, ${lightness}%), 
                  hsl(240, ${saturation}%, ${lightness}%), 
                  hsl(300, ${saturation}%, ${lightness}%), 
                  hsl(360, ${saturation}%, ${lightness}%))`,
              }}
            />
          </label>

          <label className="block text-sm text-zinc-950/70 dark:text-white/70">
            Saturation: {saturation}%
            <input
              type="range"
              min="0"
              max="100"
              value={saturation}
              onChange={(e) => setSaturation(Number.parseInt(e.target.value))}
              className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
              style={{
                background: `linear-gradient(to right, 
                  hsl(${hue}, 0%, ${lightness}%), 
                  hsl(${hue}, 50%, ${lightness}%), 
                  hsl(${hue}, 100%, ${lightness}%))`,
              }}
            />
          </label>

          <label className="block text-sm text-zinc-950/70 dark:text-white/70">
            Lightness: {lightness}%
            <input
              type="range"
              min="0"
              max="100"
              value={lightness}
              onChange={(e) => setLightness(Number.parseInt(e.target.value))}
              className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
              style={{
                background: `linear-gradient(to right, 
                  hsl(${hue}, ${saturation}%, 0%), 
                  hsl(${hue}, ${saturation}%, 50%), 
                  hsl(${hue}, ${saturation}%, 100%))`,
              }}
            />
          </label>
        </div>

        <div className="flex space-x-1">
          {colors.map((color, idx) => (
            <div
              key={idx}
              className="h-16 rounded flex-1 cursor-pointer transition-transform hover:scale-105"
              style={{ backgroundColor: color }}
              title={`Click to copy: ${color}`}
              onClick={() => copyToClipboard(color)}
            />
          ))}
        </div>

        <div className="text-sm font-mono text-zinc-950/70 dark:text-white/70">
          <p>
            Base color: hsl({hue}, {saturation}%, {lightness}%)
          </p>
        </div>
      </div>
    </div>
  )
}

Then import and use it:

import { ColorGenerator } from "/snippets/color-generator.jsx"

<ColorGenerator />

Considerations

Client-side rendering: Most custom components render in the browser after the page loads, so they aren’t in the server-rendered HTML. This applies to components you import by name from a snippet, such as import { ColorGenerator } from "/snippets/color-generator.jsx", and to most components you define with export in an MDX file. MDX snippets that you import as content, such as import MySnippet from "/snippets/my-snippet.mdx", render on the server. A component you define with export also renders on the server when it is a simple template. It must only place its props into HTML elements and built-in components, without state, hooks, function calls, conditionals, event handlers, or style attributes. Every place you use it must pass only plain string attributes, such as <HeroCard title="Quickstart" href="/quickstart" />.
SEO: Because custom components are not in the initial HTML, search engines may not fully index their content.
Initial load: Visitors may see a flash or layout shift while custom components render. For content that must appear in the initial HTML or must not shift on load, use built-in components such as cards and columns instead. Most built-in components render on the server.
Accessibility: Ensure screen readers announce dynamic content changes.
Optimize dependency arrays: Only include necessary dependencies in useEffect.
Memoize expensive operations: Use useMemo or useCallback where appropriate.
Reduce re-renders: Break large components into smaller ones.
Lazy loading: Component code cannot lazy load. All components load with the page. If a component performs resource-intensive operations when it mounts, such as fetching data or heavy computation, use conditional rendering to defer mounting it until user interaction.

Get started

Create content

Manage your site

Agent

Assistant

Agent-ready content

Search and SEO

Document APIs

Integrations

Reference

Inline components

Constraints

Import components

Considerations

​Inline components

​Constraints

​Import components

​Considerations

Inline components

Constraints

Import components

Considerations