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.

Callouts

<Callout> highlights important content with a tinted border block. Four variants cover the common intents — informational, positive, cautionary, and destructive.

<Callout variant="tip" title="Custom title">
  Body copy goes in the default slot — any MDX is fine.
</Callout>

variant accepts note · tip · warning · danger (default: note). title is optional — each variant has a built-in default.

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.

Callouts

<Callout variant="…"> ships six variants: note, info, tip, check, warning, and danger.

Tabs

The Tabs atom family is registered for MDX, so switchers work without imports. Arrow keys move between triggers.

Accordion

<Accordion> + <AccordionItem> — native <details name>, so single-open grouping needs no JS state.

Tooltip

Wrap any inline element with <Tooltip content="…"> to add a hover/focus hintLike this one..

Expandable

<Expandable> is an inline disclosure for nested object shapes — distinct from Accordion. Nest <ParamField> rows inside to document properties.

Fields

<ParamField> documents request parameters; <ResponseField> documents response fields. Both take type, required, default, and deprecated; ParamField adds a location pill (body, query, path, header).

Request parameters

Response fields

Icon

<Icon name="…" size={…} /> renders an inline lucide-style stroke icon in currentColor. Run ignite dev to start, then deploy with one command.

Sizes:

Run <Icon name="terminal" size={15} /> `ignite dev` to start.

Tree

<Tree items={…}> renders a file/folder tree. Connectors are box-drawing glyphs — copy/paste safe, no images. Icons derive from the structure (folder when an item has children, file-code for code extensions) and can be overridden per item.

Update

<Update> renders dated changelog entries on a timeline. The rail connecting consecutive entries draws itself — no last prop. Tags minor, patch, and breaking/major are color-coded.

Mermaid

<Mermaid code={…}> renders a diagram from mermaid source, themed by the design tokens. The library loads lazily — only when a diagram scrolls into view — so pages without diagrams ship zero extra JS.

graph TD
A[src/] --> B[parse MDX]
B --> C{budget ok?}
C -->|yes| D[emit static]
C -->|no| E[fail CI]

Columns

<Columns cols={2|3|4}> is the generic grid wrapper — unlike CardGroup it takes any content. Columns collapse to one per row below the md breakpoint.

Banner

<Banner> is a site-wide announcement strip. Drop the solid variant into a layout above the header, or use subtle inline. Dismissal persists per id in localStorage — bump the id to resurface a new announcement.

Tiles

<Tiles> + <Tile> build a compact navigation grid — lighter than cards. Each tile lifts on hover, the border darkens, and the arrow nudges right.