React Components

Writing Content

React Components

Learn how to create custom React Components

Build interactive React components directly in your MDX files. Create dynamic content with state management, event handlers, and custom styling. Define components inline or import them from external files for rich documentation experiences.

Example

.docs/components/Counter.mdx

export function Counter() {
  const [count, setCount] = React.useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(0);

  return (
    <div className="counter">
      <div className="counter-display">
        <span className="counter-label">Count:</span>
        <span className="counter-value">{count || "0"}</span>
      </div>
      <div className="counter-controls">
        <button 
          className="counter-btn counter-btn-decrement" 
          onClick={decrement}
          aria-label="Decrease count"
        >
          -
        </button>
        <button 
          className="counter-btn counter-btn-reset" 
          onClick={reset}
          aria-label="Reset count"
        >
          Reset
        </button>
        <button 
          className="counter-btn counter-btn-increment" 
          onClick={increment}
          aria-label="Increase count"
        >
          +
        </button>
      </div>
    </div>
  );
}

<Counter/>

Important

to use React API you need to explicite call React e.g React.useState

Count:0

and import that in your content via @include function:

@include ".docs/components/Counter.mdx"

and your custom CSS:

.docs/theme/index.css

/* Counter Component Styles */
.counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  ...
}
...

Next Steps

Code Samples

Learn how to setup React Component

Edit page

SEO Compose Content