React components

Stainless Docs supports rendering React components in your documentation. This can be helpful for encapsulating UI or adding interactive elements.

React components can be placed anywhere under your src/ directory, but we recommend putting them in src/components for consistency.

To create a React component, create a new file in your src/components directory:

src/components/Counter.tsx

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      Counter: {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Next, import your component on any page of your site:

src/content/docs/getting-started.mdx

---
title: Getting started
description: This is a description of the page
---
import Counter from "/src/components/Counter.tsx";

## Hello, world!

Lorem ipsum dolor sit...

<Counter client:load />

The client:load directive ensures that your component is rendered client-side. Without client:load, the component will only be rendered server-side and will not be interactive.

See the Astro client-directives documentation for more information.

Components from other frameworks

Stainless Docs comes with built-in support for React, but you can use components from other frameworks like Vue or Svelte by adding the appropriate Astro integration.

Here are some Astro integrations for a few popular frameworks:

• Vue
• Svelte
• Solid
• Preact