Skip to main content

Custom Components

WriteDocs allows you to create your own React component, and add it to your documentation. This page guides you on how you can create and use your custom components.

Feature Availability

This feature is only available in the Growth plan.

How to Create a Custom Component​

To create a usable custom component in WriteDocs, you need to add the component's files to the components directory of your documentation repository. The WriteDocs template comes with an example MyCustomComponent to show you how to do it.

Just like in React, you can create your components, and add CSS customization, either directly in the component, or with a CSS file. We suggest following the example code and creating a folder for each custom component. In the example, you will see the following structure for the components folder:

|-- components
  |-- MyCustomComponent
    |-- MyCustomComponent.jsx
    |-- myCustomComponent.css
CSS import

Remember to import your css file into your component's jsx file.

Using your Custom Component​

Once your component is created, you can use it in any mdx file you need it. You will need only to import it in the file, adding @site/src/ before the file's relative path. Follow the example below:

import MyCustomComponent from '@site/src/components/MyCustomComponent/MyCustomComponent';

Now, to use it in your documentation page, you need to call it, just like any other available component in WriteDocs, passing the needed props for it to work:

import MyCustomComponent from '@site/src/components/MyCustomComponent/MyCustomComponent';

<MyCustomComponent name="John Doe"/>

This will render the following card in your page:

Hello, John Doe!

Welcome to our website.