MDX Components

Built-in components

Docusaurus provides built-in components such as tabs, diagrams, and more. To explore these components and learn how to use them, please refer to the official Docusaurus documentation on markdown features.

MDX Components we've made

LoomVideo

The LoomVideo component is designed to embed Loom videos in your documentation. To use it, provide the video's src as a prop. You can also control the visibility of the owner, title, share, and embed elements using the hideOwner, hideTitle, hideShare, and hideEmbed props, respectively.

Example:

<LoomVideo
    src="https://www.loom.com/embed/your_loom_video_id"
    hideOwner
    hideTitle
    hideShare
    hideEmbed
/>

Refer to src/components/global/LoomVideo/index.tsx file for additional props and usage details.

Docs cards

The DocsCard component is a custom component created to display documentation cards in a visually appealing manner. It accepts an image source or a ReactNode, alt text, title, description, call-to-action (CTA) link, and optional CTA text.

Example:

import GithubSvg from "/static/logos/github.svg";

<DocsCard
    imgSrcOrNode={
        <GithubSvg className={"text-primary my-m"} height={"auto"} width={"auto"} />
    }
    className={"my-8"}
    altText="Image Alt Text"
    title="Title"
    description="Description"
    ctaLink="/some/path/or/url"
    ctaText="Learn More"
/>;

Title

Description

Learn More→

Or even build some complex grids

<div className={"grid grid-cols-2 gap-4 my-8"}>
    <DocsCard
        imgSrcOrNode={
            <GithubSvg className={"text-primary"} height={"auto"} width={"auto"} />
        }
        altText="Image Alt Text"
        title="Title"
        description="Description"
        ctaLink="/some/path/or/url"
        ctaText="Learn More"
    />
    <DocsCard
        imgSrcOrNode={
            <GithubSvg className={"text-primary"} height={"auto"} width={"auto"} />
        }
        altText="Image Alt Text"
        title="Title"
        description="Description"
        ctaLink="/some/path/or/url"
        ctaText="Learn More"
    />
    <DocsCard
        imgSrcOrNode={
            <GithubSvg className={"text-primary"} height={"auto"} width={"auto"} />
        }
        altText="Image Alt Text"
        title="Title"
        description="Description"
        ctaLink="/some/path/or/url"
        ctaText="Learn More"
    />
    <DocsCard
        imgSrcOrNode={
            <GithubSvg className={"text-primary"} height={"auto"} width={"auto"} />
        }
        altText="Image Alt Text"
        title="Title"
        description="Description"
        ctaLink="/some/path/or/url"
        ctaText="Learn More"
    />
</div>

Title

Description

Learn More→

Title

Description

Learn More→

Title

Description

Learn More→

Title

Description

Learn More→

Refer to src/components/global/DocsCard/index.tsx file for additional props and usage details.

Creating a custom component

If you want to create a custom component for your documentation and believe it would be useful for other projects, consider opening a PR on the template repo to add it. If your custom component is small and specific to your project, remember that you can use HTML directly within your MDX files.