` only. A capitalized `

` component is flattened later for markdown output, but it is not an include anchor. Relative paths resolve from the including file first. Nested includes are supported, so a shared partial can include files next to itself. See [Remark plugins](/docs/reference/remark#remarkinclude) for base paths and plugin details. ## Component reference Each section below shows the authored MDX and a live render. ### Callout Wraps supporting context, warnings, or tips. Variants change styling but flatten identically into a blockquote. ```tsx Body content goes here. ``` > ℹ️ **Info:** **Heads up** > Callouts wrap supporting context, warnings, or tips. The remark pipeline flattens them into blockquotes so agents still see the content. > > ⚠️ **Warning:** **Don't do this** > Variants like warning, success, error, and tip change the styling but flatten identically. ### Cards A grid of short, linked entry points. Flattens to a bullet list of links. ```tsx ``` * [Convert](/docs/reference/convert) * [Remark](/docs/reference/remark) * [Search](/docs/reference/search) ### Steps Numbered walkthroughs. Flattens to an ordered list with bold step titles. ```tsx Use the components in this list. `leadtype generate` writes flattened markdown. ``` 1. **Author docs in MDX** Use the components in this list as authoring affordances. 2. **Run the conversion** `leadtype generate` writes flattened markdown to `public/docs/`. 3. **Serve both formats** HTML for humans, `.md` for agents — same URL, content negotiated by the `Accept` header. ### Tabs Group equivalent content. Flattens to bold headings followed by content so agents do not need a JSX-aware renderer to read every variant. ```tsx … … … ``` **tanstack-start** Use a Vite middleware (dev/preview) and a Nitro middleware (prod) to negotiate the `Accept` header. **next-js** Wire content negotiation in middleware.ts and serve `.md` from a route handler. **vite** A `configureServer` middleware is enough for static deployments where `.md` files live in `public/`. ### CommandTabs Package-manager-aware install or run commands. Flattens to a markdown table with one row per manager. Use `mode="install"` when `command` is a package name, `mode="run"` when `command` is a CLI name, and `mode="create"` for starter commands. Use the `commands` prop for exact per-manager overrides. ```tsx ``` |Package manager|Command| |:--|:--| |npm|`npm install leadtype`| |pnpm|`pnpm add leadtype`| |yarn|`yarn add leadtype`| |bun|`bun add leadtype`| |Package manager|Command| |:--|:--| |npm|`npx leadtype lint`| |pnpm|`pnpm dlx leadtype lint`| |yarn|`yarn dlx leadtype lint`| |bun|`bunx leadtype lint`| ### Prompt Displays an agent-ready prompt with a copy action. Flattening preserves the prompt body as a fenced `prompt` block so copied instructions also survive in `.md`, root `llms-full.txt`, and bundled `AGENTS.md` output. ```tsx Inspect `public/docs/agent-readability.json`, then wire markdown responses before the HTML docs route. ``` **Copy prompt for your coding agent** Use this after generating artifacts. ```prompt Inspect `public/docs/agent-readability.json`, then wire markdown responses before the HTML docs route. ``` ### Audience Splits browser-only and agent-only guidance without forking the page. Human content renders in the docs UI and is omitted from markdown output; agent content is hidden in the browser and included in generated markdown. ```tsx Click the robot icon in the header. Read generated markdown before editing runtime routes. ``` This sentence appears only in generated markdown for agents. ### FileTree Shows project structure in guides and release instructions. Flattening emits a fenced text tree so agents can read the same hierarchy without JSX. ```tsx ``` ```text public/ ├── llms.txt └── docs/ └── index.md ``` ### Accordion Collapsible details for secondary content. Flattening ignores open/closed state and emits every item — accordions are not a place to hide content from agents. ```tsx Use them for supporting details and optional reference material. ``` **When should I use accordions?** Use them for supporting details, troubleshooting notes, and optional reference material. Closed content is still flattened by the remark pipeline. **Are accordions a good place to hide content from LLMs?** No. Conversion ignores the open/closed state and emits everything inside. ### TopicSwitcher Navigation across equivalent docs topics — frameworks, SDKs, runtimes, deployment targets, product areas. Reader-facing only; it does not automatically read LLM topic config. ```tsx ``` Framework * [React](/docs/writing/components) — React integration * [Vue](/docs/writing/components) — Vue integration * [Svelte](/docs/writing/components) — Svelte integration ### TypeTable and ExtractedTypeTable `TypeTable` is for explicit prop or type rows you already know. `ExtractedTypeTable` reads a TypeScript file at conversion time and extracts the table from a named type — keep its `path` stable. ```tsx ``` |Property|Type|Description|Default|Required| |:--|:--|:--|:--|:--:| |title|string|Heading rendered above the callout body.|-|✅ Required| |variant|CalloutVariant|Visual treatment for the callout.|info|Optional| |deprecated|\~\~boolean\~\~ (deprecated)|Marks the row as deprecated.|false|Optional| ### Example Data-driven preview and source examples. The host component receives code as data; add file loaders or dynamic imports outside leadtype when an example needs app-specific behavior. ```tsx The host app owns styling and runtime components while leadtype owns conversion. ``` ### Mermaid Diagrams authored as plain text. Renders client-side as interactive SVG. Flattening preserves the source as a fenced ` ```mermaid ` block so other tools can render the diagram from the markdown copy. ```tsx |remark| Markdown Markdown -->|llms.txt| Agents`} /> ``` ```mermaid graph LR MDX -->|remark| Markdown Markdown -->|search index| API Markdown -->|llms.txt| Agents ``` ## Guidelines * Keep runtime components in your docs app. Leadtype stays out of UI. * Keep component names stable. Renaming `` breaks the flattening contract until you remap it with [`defineComponentFlattener`](/docs/reference/remark#custom-component-flatteners). * For agent output quality, read the converted `.md` files first and only edit components or plugin order if the markdown actually looks wrong.