sheengemologic ui
All components

StatGroup

Groups related tabular metrics under one accessible label.@gemologic/sheen-charts · data

Playground

This example has no scalar controls. Its validated source remains interactive below.
Requests
18.2k
8 percent higher
p99
43 ms
unchanged
<StatGroup label="Service health" stats={health} />

Variant matrix

Service health
Requests
18.2k
8 percent higher
p99
43 ms
unchanged

Anatomy

Package
@gemologic/sheen-charts
Source
packages/charts/src/Stat.tsx
Tokens
  • --sheen-color-border
  • --sheen-color-bg-raised
  • --sheen-color-fg
  • --sheen-color-fg-muted

Accessibility

Role: group containing term and definition pairsKeyboard: No component-owned keys

Do

  • Group metrics that users compare together.

Do not

  • Do not put unrelated dashboard values under a vague label.

Generated props

NameTypeDefaultDescription
label *stringRequired accessible label for the related metric set.
stats *readonly StatProps[]One or more stat records rendered with the same validation as Stat.
classstringOptional class appended to the component root.
Native Solid/HTML attributes remain available and are omitted from this authored-prop view.