Embedding X Posts in Fumadocs

This tutorial will guide you through the process of embedding X (formerly Twitter) posts in your Fumadocs site. We'll cover installation, component setup, and usage in MDX files. Step 1: Install the Required Package First, you need to install the react-social-media-embed package: pnpm install react-social-media-embed Step 2: Create the XEmbedClient Component Create a client component wrapper for the XEmbed component. This needs to be a client component because it interacts with the X embed script. "use client"; import { XEmbed, XEmbedProps } from "react-social-media-embed"; export function XEmbedClient({ ...props }: XEmbedProps) { return ( ); } The client component wrapper: Uses the "use client" directive to ensure it runs on the client side Wraps the XEmbed component from react-social-media-embed Adds a flex container with center alignment for better display Maintains the same API as the original XEmbed component Step 3: Add the Component to MDX Components Update your mdx-components.tsx file to include the XEmbedClient component: import defaultMdxComponents from "fumadocs-ui/mdx"; import type { MDXComponents } from "mdx/types"; import { XEmbedClient } from "./components/XEmbedClient"; export function getMDXComponents(components?: MDXComponents): MDXComponents { return { ...defaultMdxComponents, XEmbed: XEmbedClient, ...components, }; } Step 4: Use the XEmbed Component in Your MDX Files Now you can use the XEmbed component in your MDX files: Example Here's an example of an embedded X post: https://rjv.im/blog/solution/embed-x-post-in-fuma-docs Documentation You can also embed Facebook, LinkedIn etc., too. Refer to react-social-media-embed for more details.

Apr 17, 2025 - 07:44

This tutorial will guide you through the process of embedding X (formerly Twitter) posts in your Fumadocs site. We'll cover installation, component setup, and usage in MDX files.

Step 1: Install the Required Package

First, you need to install the react-social-media-embed package:

pnpm install react-social-media-embed

Step 2: Create the XEmbedClient Component

Create a client component wrapper for the XEmbed component. This needs to be a client component because it interacts with the X embed script.

"use client";

import { XEmbed, XEmbedProps } from "react-social-media-embed";

export function XEmbedClient({ ...props }: XEmbedProps) {
  return (
    <div className="flex justify-center">
      <XEmbed {...props} />
    div>
  );
}

The client component wrapper:

Uses the "use client" directive to ensure it runs on the client side
Wraps the XEmbed component from react-social-media-embed
Adds a flex container with center alignment for better display
Maintains the same API as the original XEmbed component

Step 3: Add the Component to MDX Components

Update your mdx-components.tsx file to include the XEmbedClient component:

import defaultMdxComponents from "fumadocs-ui/mdx";
import type { MDXComponents } from "mdx/types";
import { XEmbedClient } from "./components/XEmbedClient";

export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...defaultMdxComponents,
    XEmbed: XEmbedClient,
    ...components,
  };
}

Step 4: Use the XEmbed Component in Your MDX Files

Now you can use the XEmbed component in your MDX files:

<XEmbed url="https://x.com/rjv_im/status/1912033485285376492" width={325} />

Example

Here's an example of an embedded X post: https://rjv.im/blog/solution/embed-x-post-in-fuma-docs

Documentation

You can also embed Facebook, LinkedIn etc., too. Refer to react-social-media-embed for more details.