Reference for all extended markdown components — callouts, steps, tabs, cards.
Runir extends standard markdown with custom components. Write them directly in your .md files using HTML-like syntax.
Use callouts to highlight important information.
<Tip>
Helpful advice or best practice.
</Tip>
Helpful advice or best practice.
<Note>
Additional context or clarification.
</Note>
Additional context or clarification.
<Warning>
Something that could cause problems if ignored.
</Warning>
Something that could cause problems if ignored.
<Info>
Background information or reference material.
</Info>
Background information or reference material.
Render numbered step-by-step instructions.
<Steps>
<Step title="First step">
Do this thing first.
</Step>
<Step title="Second step">
Then do this.
</Step>
</Steps>
Do this thing first.
Then do this.
Finally, do this.
Show content in switchable tabs.
<Tabs>
<Tab title="JavaScript">
Your JS content here.
</Tab>
<Tab title="Python">
Your Python content here.
</Tab>
</Tabs>
console.log("Hello from JavaScript");
print("Hello from Python")
echo "Hello from Bash"
Display linked cards in a grid.
<CardGroup cols={2}>
<Card title="First Card" href="/quick-start">
Description of the first card.
</Card>
<Card title="Second Card" href="/configuration">
Description of the second card.
</Card>
</CardGroup>
Use cols={2} for two-column layouts and cols={3} for three-column layouts. Cards automatically stack on mobile.