Custom MDX layouts

Two-column editorial layout

Use Grid and GridCell to combine narrative text and supporting media. This template includes a custom grid component registered in src/components/mdx.tsx so you can drop it into any MDX file.

Layout tip

Keep your main text in the first column and use the second column for supporting visuals, stats, or checklists.

Registering custom components

src/components/mdx.tsx

import { createMdxComponents } from "@prose-ui/react";
import { SafeMdxRenderer } from "safe-mdx";
import { Grid, GridCell } from "@/components/grid";

export const mdxComponents = {
  ...createMdxComponents(),
  Grid,
  GridCell,
};