Table

Sizes — sm · md · lg

Three sizes scale cell padding and inherited cell text together. Use sm for dense tables (admin lists, comparison views), md as the default, and lg when the table is the page's centerpiece. For numeric columns use text-end on the head & cell so the alignment flips correctly in RTL.

Variant: ghost — borderless, no surface chrome

The ghost variant drops the outer border, rounded corner, and muted header background. Use when the table is already nested in a card or panel — keeps the visual weight low and the rhythm aligned with the surrounding content.

Selected & hover row states

Hover and selection states apply only to data rows — they're scoped to TableBody, so the header doesn't inherit them. Set data-state="selected" on a row to apply the selected background (pair with a leading Checkbox in the cell whose role="checkbox" drops the trailing padding via [&:has([role=checkbox])]:pe-0).