Comparison Table
Compare features across products or plans in a table.
Preview
Import
import { ComparisonTable } from "@sigil-ui/components";Usage
<ComparisonTable
columns={["Sigil", "Typical UI kit"]}
features={[
{ name: "Token coverage", values: { Sigil: true, "Typical UI kit": false } },
{ name: "Live presets", values: { Sigil: true, "Typical UI kit": false } },
{ name: "Agent constraints", values: { Sigil: true, "Typical UI kit": false } },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
features | ComparisonFeature[] | — | Feature rows to compare. |
columns | string[] | — | Column names (keys matching the values in features). |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border-style | Border style |
--s-border | Border |
--s-radius-md | Radius md |
--s-shadow-sm | Shadow sm |
--s-text-muted | Text muted |
--s-text | Text |
--s-surface-elevated | Surface elevated |
--s-duration-fast | Duration fast |
--s-success | Success |