Table

Token Value Description

--source-color-text #1D1B1A Primary text

--source-color-text-secondary #686462 Supporting text

--source-color-border #E5DFD8 Dividers and outlines

.source-table Container and border shell
.source-table-head Header row and labels
.source-table-row Data rows
.source-table-cell-mono Token or code values
.source-table-cell-muted Supporting descriptions

States

State Appearance

Default Surface background, border separating each row.

Row hover Background shifts to --source-color-background on the hovered row.

Header Background background, uppercase label style, no hover state.

Design intent

Table presents structured data in a scannable grid. The component uses CSS grid, not an HTML table element, so column widths are fully flexible. Use it when rows share a fixed set of attributes and comparison across rows is the primary task.

Column layout

Set --table-cols on the container. It maps directly to grid-template-columns.

Use case --table-cols Result

Token and value 1fr 1fr Two equal columns

With visual preview 32px 1fr 120px Preview, name, value

Component props 160px 100px 1fr Prop, type, description

Usage guide 200px 1fr 1fr Term, do, avoid

Cell classes

Class Use for

.source-table-wrap Add on the root .source-table to wrap long value strings instead of clipping them on one line.

.source-table-cell Default: sans-serif, primary color.

.source-table-cell-mono Monospace. Token names, code values, type strings.

.source-table-cell-muted Secondary color. Descriptions, defaults, supporting text.

When to use

Use for token maps, prop references, and side-by-side guidance.

Use custom table columns when documentation needs flexible widths.

Combine labels, defaults, and examples in one readable grid.

Don't

Do not use this for sortable/exportable datasets. Use semantic HTML tables.

Avoid this component where assistive tech must parse true tabular relationships.

Designer checklist

Column headers are short and describe the data type, not the data value.
Sortable columns communicate the current sort direction visually and in text.
Numeric columns are right-aligned for scannable comparison.
Empty state is handled. Do not show an empty grid with only headers.

HTML structure

<div class="source-table source-table-wrap" style="--table-cols: 1fr 1fr">
  <div class="source-table-head">
    <span>Prop</span>
    <span>Default</span>
  </div>
  <div class="source-table-row">
    <span class="source-table-cell source-table-cell-mono">variant</span>
    <span class="source-table-cell source-table-cell-muted">primary</span>
  </div>
</div>

Component tokens

Property Token

Border color --source-color-border

Row background --source-color-surface

Header background --source-color-background

Row hover --source-color-background

Border radius --source-radius-lg (12px)

Row padding --source-spacing-3 / --source-spacing-4