Components / Data

StatBand

A hairline band of console stats. Each Stat has a label, a value with optional unit, a sub line and a tone.

Extracted fromExplorer

Import

tsx
import { StatBand, Stat } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { StatBand, Stat } from "@somnia-chain/ui/next"

Examples

Five stats

Questions71,365
Upcoming649
Resolved66,585
Voided4,131
Median resolution3.2minlast 24 hours
examples/stat-band/default.tsxShow code
tsx
import { StatBand } from "@somnia-chain/ui"

export default function StatBandExample() {
  return (
    <StatBand
      stats={[
        { label: "Questions", value: "71,365" },
        { label: "Upcoming", value: "649", tone: "accent" },
        { label: "Resolved", value: "66,585", tone: "up" },
        { label: "Voided", value: "4,131", tone: "down" },
        { label: "Median resolution", value: "3.2", unit: "min", sub: "last 24 hours" },
      ]}
    />
  )
}

Props

Stat

PropTypeDefaultDescription
labelReactNode—Eyebrow label.
valueReactNode—Big number.
unitReactNode—Small mono unit after the value.
subReactNode—Line under the value.
tone"default" | "up" | "down" | "warn" | "accent""default"Value color.
...props<div> attributes—Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <div>. In StatBand, each entry of stats can carry its own.

StatBand

PropTypeDefaultDescription
statsStatProps[]—Up to six stats; the band's columns follow the count.
...props<div> attributes—Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <div>.