ProseTable

MDX table override with explicit sections and bordered cells.

Typography

Default

Source

<ProseTable>
  <thead>
    <tr>
      <th class="font-semibold text-fg bg-surface text-left py-vsp-xs px-hsp-md border-b-2 border-b-border"
          style={{ "overflow-wrap": "anywhere" }}>Token</th>
      <th class="font-semibold text-fg bg-surface text-left py-vsp-xs px-hsp-md border-b-2 border-b-border"
          style={{ "overflow-wrap": "anywhere" }}>Purpose</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-left py-vsp-xs px-hsp-md border-b border-b-border"
          style={{ "overflow-wrap": "anywhere" }}>color-bg</td>
      <td class="text-left py-vsp-xs px-hsp-md border-b border-b-border"
          style={{ "overflow-wrap": "anywhere" }}>Page background</td>
    </tr>
    <tr>
      <td class="text-left py-vsp-xs px-hsp-md border-b border-b-border"
          style={{ "overflow-wrap": "anywhere" }}>color-accent</td>
      <td class="text-left py-vsp-xs px-hsp-md border-b border-b-border"
          style={{ "overflow-wrap": "anywhere" }}>Accent color</td>
    </tr>
  </tbody>
</ProseTable>

Live CSS

Injected into the previews above. ProseTable

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */