mdx-components Registry #
File: components/mdx-components.js
This registry maps imported React components to MDX tags.
Responsibilities #
- Exposes components like
Alert,Card,Infobox, andWikiTableprimitives. - Exposes components like
Alert,Card,Infobox,BarChart,MathEquation,PeriodicTable,Quiz,Poll, andFlashcards. - Overrides markdown element renderers (
pre,table,thead,tbody,tr,th,td,caption). - Defines what can be used directly inside
.mdxcontent.
When to update #
- After adding a new component intended for MDX pages.
- When changing global markdown element rendering behavior.
Live examples of registry mappings #
The examples below are rendered through the registry:
Mapped component
Alert is available directly in MDX without manual import.
Callout and Icon are also mapped globally.
| Mapping | Result |
|---|---|
pre | Uses CodeBlock |
table | Uses WikiTable.Table |
th / td | Uses WikiTable.TH / WikiTable.TD |
BarChart / SparklineChart / DonutChart / AreaChart / StackedBarChart | Uses chart components from components/charts/ |
HeatmapChart / ProgressRingChart | Additional chart components from components/charts/ |
MathEquation / FormulaList / MathSteps / UnitConverter | Uses math components from components/math/ |
PeriodicTable / ElementCard / CompoundBreakdown | Uses science components from components/science/ |
Quiz / Poll / Flashcards | Uses interactive components from components/interactive/ |