MDX components

Customize Markdown elements rendered inside MDX pages.

Overview

Configure shared MDX components in vite.config.ts.

import { defineConfig } from "vite-plus"
import { sitex } from "@fulldotdev/sitex/plugin"
import react from "@vitejs/plugin-react"

export default defineConfig({
  appType: "custom",
  plugins: [
    react(),
    sitex({
      mdx: {
        components: {
          pre: "@/components/mdx/pre",
          a: "@/components/mdx/link",
        },
      },
    }),
  ],
})

Each key is an MDX element name. Each value is an import path to a default-exported React component.

Component Example

import type { ComponentProps } from "react"

export default function MdxLink(props: ComponentProps<"a">) {
  return <a {...props} className="underline underline-offset-4" />
}

import type { ComponentProps } from "react"

export default function MdxPre(props: ComponentProps<"pre">) {
  return <pre {...props} className="overflow-x-auto rounded-md p-4" />
}

Layout Overrides

A layout can override components for its MDX pages.

import MdxPre from "@/components/mdx/pre"

export const mdxComponents = {
  pre: MdxPre,
}

export default function DocsLayout({ children }) {
  return <main>{children}</main>
}

Layout components override shared components from vite.config.ts.

Component Names

Use normal MDX tag names such as pre, code, a, h2, table, img, or a custom component name like Callout.

Component names must start with a letter and may contain letters, numbers, and dashes.