Comparison Section
Feature comparison table with check/cross icons or custom text per cell.
Preview
Import
import { ComparisonSection } from "@sigil-ui/components";Usage
<ComparisonSection title="One system, fewer overrides" usLabel="Sigil" themLabel="Manual styling" features={[{ name: "Shared design tokens", us: true, them: false }, { name: "Theme switching", us: "One preset", them: "Per component" }, { name: "Accessible primitives", us: true, them: "Add separately" }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Uppercase mono label |
title | string | "How we compare" | Section heading |
description | string | — | Supporting text |
usLabel | string | "Us" | Column header for your product |
themLabel | string | "Others" | Column header for competitors |
features | ComparisonFeature[] | required | Array of { name, us, them } — boolean shows check/cross, string shows text |
className | string | — | Additional CSS classes |
Plus all standard <section> HTML attributes.