Spec Table
A technical specification table for displaying key-value pairs with optional section grouping.
Preview
Import
import { SpecTable } from "@sigil-ui/components";Usage
<SpecTable
title="GPU Specifications"
groups={[
{ title: "Performance", rows: [
{ label: "TFLOPS", value: "312", unit: "FP16", highlight: true },
]},
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
rows | SpecRow[] | — | Ungrouped specification rows |
groups | SpecGroup[] | — | Grouped rows with section headings |
title | string | — | Optional header title |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary-muted | Highlighted row background |
--s-border | Table borders |
--s-surface | Background |
--s-surface-elevated | Group header background |
--s-text | Values |
--s-text-muted | Labels, units, group titles |
--s-font-mono | Value font family |
--s-radius-card | Container radius |
--s-shadow-sm | Container shadow |
--s-border-style | Border style |