Reference
MDX components
Add cards, steps, tabs and callouts with the components included in current Docsio sites.
Current Docsio pages include components for useful page structure. The examples below work in MDX without adding framework imports.
Cards
Use cards to link to related tasks. Every destination must exist in your site.
<Cards>
<Card title="Quickstart" href="/docs/quickstart">
Set up your first project.
</Card>
</Cards>Steps
<Steps>
<Step>
### Create a project
Add your product URL or source files.
</Step>
<Step>
### Review the draft
Check the instructions before publishing.
</Step>
</Steps>Tabs
<Tabs items={['npm', 'pnpm']}>
<Tab value="npm">Use your npm installation command.</Tab>
<Tab value="pnpm">Use your pnpm installation command.</Tab>
</Tabs>Callouts and summaries
<Callout type="info" title="Before you publish">
Review the preview and test your links.
</Callout>
<Summary>
Saving updates the draft. Publishing updates the live site.
</Summary>Keep blank lines around Markdown inside JSX. Prefer ordinary paragraphs for explanations that do not need a component. Older projects may have different components; ask the agent to inspect what the project supports before copying examples.
Need a hand? Talk to the Docsio teamClear docs. Happier readers.