Stats Section
Present a group of metrics with labels and context.
Preview
Import
import { StatsSection } from "@sigil-ui/components";Usage
<StatsSection
label="By the numbers"
title="Sigil at a glance"
stats={[
{ value: "350+", label: "Components" },
{ value: "519", label: "Design tokens" },
{ value: "46", label: "Presets" },
{ value: "33", label: "Token categories" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Readable label for the component. |
title | ReactNode | — | Heading displayed in the component. |
description | string | — | Supporting text below the heading. |
stats (required) | StatItem[] | — | Stats configuration. |
variant | "inline" | "cards" | "bordered" | — | Selects a supported visual treatment. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-section-py | Section py |
--s-content-max | Content max |
--s-page-margin | Page margin |
--s-radius-card | Radius card |
--s-border-muted | Border muted |
--s-surface | Surface |
--s-border | Border |
--s-font-display | Font display |
--s-text | Text |
--s-success | Success |
--s-text-muted | Text muted |
--s-text-subtle | Text subtle |