Writing content

Every component below is wired into the docs renderer in src/components/docs/mdx-components.ts — import it at the top of any .mdx file and use it inline. They are plain Astro + vanilla JS, token-resolved, and yours to edit.

Steps

Use <Steps> with nested <Step title="…"> for ordered walkthroughs. Numbers and the connecting rail are drawn with a CSS counter, so reordering renumbers automatically.

1. Add the import
   Import Steps and Step at the top of your MDX file.
2. Wrap your actions
   Each <Step> becomes a numbered item.
3. Ship
   No client JS, no configuration.

<Steps>
  <Step title="Add the import">…</Step>
  <Step title="Wrap your actions">…</Step>
</Steps>

Card groups

<CardGroup cols={2|3|4}> lays cards out in a responsive grid that collapses to one column on mobile. Pair it with the Card atom.

Tabbed code

<CodeGroup> combines several <CodeBlock> children into one tabbed panel. Each child’s filename becomes a tab — the npm/pnpm/yarn pattern, or curl/python/node for an API.

npm i astro-ignite

pnpm add astro-ignite

yarn add astro-ignite

Highlighted code

Fenced code blocks support line highlighting and diff markers at build time (Shiki transformers — zero client cost). Add {1,3-5} after the language, or annotate lines inline.

const config = {
  primary: 'var(--color-primary)', // highlighted
  border: 'var(--color-border)',
};

const before = 1; 
const after = 2; 

Frames

<Frame caption="…"> centers and frames media so screenshots and diagrams look intentional. Drop an Image atom or a plain <img> inside.