ComparisonTable

Compare approaches in responsive columns, each with its own heading, summary and feature list.

ComparisonTable

View source · API reference

Compare two workflows

A visual comparison uses cards, not a semantic HTML table. Use parallel headings and concrete statements.

CHOOSE YOUR STARTING POINT

Two ways to compose

Use the approach that fits the interaction.

Content page

Mostly static information.

  • MDX authoring
  • Server-rendered components
Reactive

Interactive view

Local application state.

  • Regor refs
  • Focused browser entry point 
<ComparisonTable
  eyebrow="CHOOSE YOUR STARTING POINT"
  title="Two ways to compose"
  subtitle="Use the approach that fits the interaction."
  columnsLg="2"
>
  <ComparisonColumn
    title="Content page"
    summary="Mostly static information."
    tone="neutral"
  >
    <ul class="pl-0">
      <ComparisonFeature>MDX authoring</ComparisonFeature>
      <ComparisonFeature>Server-rendered components</ComparisonFeature>
    </ul>
  </ComparisonColumn>
  <ComparisonColumn
    title="Interactive view"
    summary="Local application state."
    badge="Reactive"
    tone="accent"
  >
    <ul class="pl-0">
      <ComparisonFeature>Regor refs</ComparisonFeature>
      <ComparisonFeature>Focused browser entry point</ComparisonFeature>
    </ul>
  </ComparisonColumn>
</ComparisonTable>

A compact comparison

Use the same composition for a small pair of options.

Fixed layout

Known dimensions.

Responsive layout

Adapts to available space.

<ComparisonTable columns="1" columnsLg="2" variant="outline">
  <ComparisonColumn title="Fixed layout" summary="Known dimensions." />
  <ComparisonColumn
    title="Responsive layout"
    summary="Adapts to available space."
    tone="info"
  />
</ComparisonTable>

Behavior and accessibility

The component renders a section with a grid. If readers need row-by-row relationships across many values, use an HTML table instead. Column titles are h3 beneath the optional h2 section title.

API reference

ComparisonTable contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

eyebrow

RefOrValue<string>
Default
not set

Short context above the heading, such as a category or release label.

title

RefOrValue<string>
Default
not set

Visible heading. Choose a short title that identifies the content or task.

subtitle

RefOrValue<string>
Default
not set

Supporting text beneath the title.

tone

RefOrValue<SemanticTone>
Default
inherited

Semantic intent: neutral, accent, secondary, info, success, warning, danger, feature, custom or ghost. The active skin supplies the colors.

variant

RefOrValue<ComponentVariant>
Default
surface

Visual treatment. Accepts solid, surface, surfaceAlt, spotlight, glass, flat, flatAlt, flatSolid, outlineFill, outline, subtle, subtleBtn, link, sheen, underline, rail, bracket or none.

columns

RefOrValue<number | string>
Default
1

Column count from 1 to 12, or a CSS track list such as minmax(0, 1fr) auto. Numeric counts are clamped.

columnsLg

RefOrValue<number | string>
Default
3

Column count or CSS track list at the theme’s lg breakpoint and above.

Composition

Default slot: ComparisonColumn elements. Register defineComparisonTableComponent with Panel, Flex, Grid and SectionHeader, plus the column and feature components you use.