Comparison Section
Compare options in a structured page section.
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 | — | Readable label for the component. |
title | string | — | Heading displayed in the component. |
description | string | — | Supporting text below the heading. |
usLabel | string | — | Us Label configuration. |
themLabel | string | — | Them Label configuration. |
features (required) | ComparisonFeature[] | — | Features configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-text | Text |
--s-success | Success |
--s-text-subtle | Text subtle |
--s-section-py | Section py |
--s-content-max-narrow | Content max narrow |
--s-page-margin | Page margin |
--s-border | Border |
--s-radius-card | Radius card |
--s-surface | Surface |
--s-text-muted | Text muted |
--s-border-muted | Border muted |
--s-background | Background |