Spec Table
Present technical specifications as labeled values.
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 },
{ label: "Memory", value: "80", unit: "GB HBM3" },
{ label: "Bandwidth", value: "3.35", unit: "TB/s" },
],
},
{
title: "Physical",
rows: [
{ label: "TDP", value: "700", unit: "W" },
{ label: "Process", value: "4nm" },
],
},
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
rows | SpecRow[] | — | Ungrouped rows (use when no grouping needed). |
groups | SpecGroup[] | — | Grouped rows with section headings. |
title | string | — | Title shown at top. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border | Border |
--s-primary-muted | Primary muted |
--s-text-muted | Text muted |
--s-text | Text |
--s-font-mono | Font mono |
--s-radius-card | Radius card |
--s-border-style | Border style |
--s-surface | Surface |
--s-shadow-sm | Shadow sm |
--s-surface-elevated | Surface elevated |