Components
ComparisonSection
Feature comparison table with check/cross icons or custom text per cell.
Import
import { ComparisonSection } from "@sigil-ui/components";Preview
Usage
<ComparisonSection
label="Comparison"
title="How we compare"
usLabel="Sigil"
themLabel="Others"
features={[
{ name: "Token system", us: true, them: false },
{ name: "Preset switching", us: true, them: false },
{ name: "Components", us: "350+ token-driven components", them: "40+" },
{ name: "Bundle size", us: "12kb", them: "48kb" },
]}
/>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.