ProseTable

MDX `table`/`th`/`td` element overrides — a compact bordered table.

Typography

Usage

import { ProseTable, ProseTh, ProseTd } from "@zudo-sg/ui/src/content/prose-table/prose-table";

<ProseTable>
  <thead>
    <tr><ProseTh>Token</ProseTh><ProseTh>Value</ProseTh></tr>
  </thead>
  <tbody>
    <tr><ProseTd>color-bg</ProseTd><ProseTd>white</ProseTd></tr>
  </tbody>
</ProseTable>

Default

Source

<ProseTable>
  <thead>
    <tr>
      <ProseTh>Token</ProseTh>
      <ProseTh>Purpose</ProseTh>
    </tr>
  </thead>
  <tbody>
    <tr>
      <ProseTd>color-bg</ProseTd>
      <ProseTd>Page background</ProseTd>
    </tr>
    <tr>
      <ProseTd>color-accent</ProseTd>
      <ProseTd>Accent color</ProseTd>
    </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; } */