Tables

| Framework    | Adapter          | Output |
| ------------ | ---------------- | ------ |
| React Router | `@heyo-sh/heyo-docs/vite`  | Server |
| Astro        | `@heyo-sh/heyo-docs/astro` | Static |

Tables are for comparison, not for prose. Use one when every item has the same fields and readers need to compare values across rows: supported frameworks, plan limits, configuration defaults, or a short compatibility matrix. The theme allows a table to scroll horizontally on small screens, giving wide comparisons more room without shrinking their content.

Start with a clear comparison

Write a short, specific header for every column, then keep each column's values consistent. A reader should be able to scan down a column without interpreting a different kind of information in each row.

| Option    | Default | Use when                         |
| --------- | ------- | -------------------------------- |
| `content` | —       | Choosing the directory for MDX   |
| `siteUrl` | —       | Publishing canonical URLs        |
| `title`   | —       | Naming the documentation website |

This is a good fit for a configuration reference, where the table exposes the facts and the prose immediately after it can recommend a choice. If one cell needs a paragraph of explanation, move that explanation below the table or into a dedicated section.

Use alignment to make values easier to scan

Markdown supports left, centre, and right alignment with colons in the separator row. Right-align numbers, centre short status values, and leave descriptive text left-aligned. Alignment is a small cue, but it makes a pricing, limits, or support matrix much easier to read.

| Plan       | Projects | Support |
| :--------- | -------: | :-----: |
| Starter    |        3 | Email   |
| Team       |       20 | Priority |
| Enterprise | Unlimited | Dedicated |

Use this for plan limits, response times, and other values readers compare vertically. Avoid more columns than a reader needs to make the decision; even though the table can scroll on mobile, a smaller comparison is always easier to understand.

Give wide tables room to breathe

For a wide compatibility matrix, reduce the content to the fields that affect the decision and move detailed notes underneath. A mobile reader can scroll the table horizontally, but they should not need to decode dense abbreviations or five-line cells to understand it.

Properties