ComparisonTable
Markdown for agentsMarketing comparison table with check/dash boolean cells, a highlighted column and responsive overflow.
npx @slipstream-ui/cli@latest add comparison-tableWith an advisor vs. on your own
| Feature | With an advisor | On your own |
|---|---|---|
| Accurate valuationMarket-tested range | Included | Not included |
| Buyer targeting | Curated | Limited |
| Negotiation support | Included | Not included |
| Confidentiality | Included | Not included |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | ComparisonColumn[] | required | Comparison columns, excluding the feature column. Each column has a label and optional highlight. |
| rows | ComparisonRow[] | required | Feature rows with one value per column. Booleans render check/dash; strings render as text. |
| caption | string | 'Comparison' | Accessible table caption. |
| featureLabel | string | 'Feature' | Heading for the feature column. |
| valueLabels | { yes?: string; no?: string } | — | Screen-reader labels for boolean cells. |
Accessibility
- Renders a real table with caption, scope=col and scope=row.
- Boolean cells pair the visual check/dash with screen-reader Included/Not included text.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.