Add Structured Content

The remaining components accept constrained data rather than arbitrary scripts. This keeps contributed MDX reviewable, accessible, and safe to build.

Tabs for equivalent alternatives

Use tabs when readers need one of several equivalent commands. Keep labels short and do not hide required sequential instructions inside tabs.

<Tabs
  items={[
    { label: 'pnpm', content: 'pnpm content:validate', language: 'bash' },
    { label: 'npm', content: 'npm run content:validate', language: 'bash' },
  ]}
/>

pnpm content:validate

Card grid for related choices

Use cards for a small set of peer destinations or choices. Do not use them for a sequence.

<CardGrid
  items={[
    {
      title: 'Contribution guide',
      description: 'Review the full workflow.',
      href: '/contribute',
    },
    {
      title: 'Guide catalogue',
      description: 'Inspect published examples.',
      href: '/guides',
    },
  ]}
/>

Metadata panel for source context

Use this panel for version scope, source provenance, compatibility, or other reference details that should remain visible but separate from the main instruction.

<MetadataPanel>
  **Verification scope:** tested with Node.js 22 on macOS and Linux. Last
  verified on 2026-08-31.
</MetadataPanel>

Protocol diagram for a simple flow

Use the diagram component for a short labelled flow. The label is the accessible text equivalent, so it must communicate the same relationship as the visual.

<ProtocolDiagram
  label="A contributor plans, writes, validates, and submits a Guide for review."
  nodes={['Plan', 'Write', 'Validate', 'Review']}
/>