MDX components

Doctrine registers its built-ins in every MDX page. Importing is unnecessary inside MDX; component values and prop types are also public from @amamo/doctrine/components for custom modules.

Built-in components

The sections below document each public component next to its example. An “other attributes” row means the component also accepts the listed native React attributes, including className, id, aria-*, and data-*.

Native writing elements

Doctrine also typesets semantic HTML directly, so common writing patterns do not need a React component. Markdown blockquotes and tables work as usual; MDX can use <details> and <summary> for disclosure, <kbd> for keyboard input, <mark> for highlights, <dl> for definitions, and <figure> with <figcaption> for captioned media. They share the theme, narrow-screen behavior, focus treatment, and print styles.

<details>  <summary>Why is the output static?</summary>Every route is prerendered during the build.</details>Press <kbd>Ctrl</kbd> + <kbd>K</kbd> to search.

Press Ctrl + K to search.

Headings and table of contents

@amamo/mdx assigns heading IDs and exports the table of contents while compiling each page. Doctrine renders that metadata into the initial HTML, including inline formatting in headings. Duplicate headings receive -1, -2, and later suffixes. Append [#custom-id] to choose an explicit anchor without rendering the suffix:

## Runtime lifecycle [#runtime]

Code blocks

Fenced code blocks use One Light and Andromeeda for light and dark mode. They show the detected language with its icon when available and include a copy action automatically. Add filename="..." to the fence metadata when a filename should appear:

```ts filename="doctrine.config.ts"export default {  title: 'Documentation',}```

export default {  title: 'Documentation',}

Code metadata and inline annotations are handled during compilation. Use {2,4-5} to highlight lines, /createApp/ to highlight matching words, or // [!code ...] with highlight, focus, ++, --, error, warning, info, or word:value. Annotation comments are omitted from the rendered and copied code.

```ts filename="app.ts" {1} /createApp/const app = createApp()app.mount('#root')app.start() // [!code ++]```

const app = createApp()app.mount('#root')app.start()

Callout

Use a callout to separate contextual notes, recommendations, warnings, and blocking problems from the surrounding content.

<Callout variant="tip" title="Ready to deploy">  Run the production build before uploading `dist`.</Callout>

Badge

Use a badge for a short status or label inside a sentence or heading.

<Badge>Stable</Badge> <Badge variant="outline">Preview</Badge>

Card and CardGrid

Card

Card is a presentation container, not a link. Put a Markdown link inside when the card should lead somewhere.

<Card title="Installation">Start with [Getting started](/getting-started/).</Card>

CardGrid

Use CardGrid to arrange cards in one column on narrow screens and two columns when space permits.

<CardGrid>  <Card title="Installation">Start with [Getting started](/getting-started/).</Card>  <Card title="Deployment">Copy the [GitHub Pages workflow](/deployment/).</Card></CardGrid>

Steps and Step

Steps

Steps renders an ordered sequence and numbers each direct Step child.

<Steps>  <Step title="Write">Create an MDX file.</Step>  <Step title="Preview">Run the development server.</Step>  <Step title="Build">Generate static files.</Step></Steps>

1. Write

   Create an MDX file.

2. Preview

   Run the development server.

3. Build

   Generate static files.

Step

Use Step only inside Steps. The parent list supplies its visible number.

LivePreview

LivePreview renders normal MDX children, so React event handlers hydrate with the page. Pass source to add an optional native source disclosure; Doctrine does not ship a browser compiler or editor.

<LivePreview source={`<PreviewCounter />`} title="Interactive counter">  <PreviewCounter /></LivePreview>

<PreviewCounter />

FileTree

FileTree provides the root container for a static semantic file list.

<FileTree>  <FileTreeFolder name="docs">    <FileTreeFile active name="index.mdx" />    <FileTreeFile name="getting-started.mdx" />  </FileTreeFolder>  <FileTreeFile name="doctrine.config.ts" />  <FileTreeFile name="package.json" /></FileTree>

FileTreeFolder

Use FileTreeFolder inside FileTree to group nested folders and files.

FileTreeFile

Use FileTreeFile inside FileTree or FileTreeFolder. Set active only on the file represented by the current example.

InstallTabs

InstallTabs renders the pnpm, npm, Yarn, and Bun install commands for one package.

<InstallTabs packageName="@amamo/doctrine" />

pnpm add @amamo/doctrine

npm install @amamo/doctrine

yarn add @amamo/doctrine

bun add @amamo/doctrine

Tabs and Tab

Tabs

Use Tabs to group related panels. It selects the first Tab when defaultValue is omitted.

<Tabs defaultValue="preview" variant="line">  <Tab label="Preview" value="preview">    Rendered output  </Tab>  <Tab label="Source" value="source">    MDX source  </Tab></Tabs>

Tab

Use Tab only inside Tabs; it declares one tab control and its matching panel.

To add project-specific names or override a built-in, continue with Customization.