Metrics & Status

MetricGrid

Responsive grid of MetricCards, typically the summary strip at the top of a dashboard. Auto-fits by default.

Props

MetricGrid extends HTMLAttributes<HTMLDivElement>.

MetricGridProps props

Prop	Type	Default	Description
`metrics`	`MetricDatum[]`	—	Array of metric data objects.
`columns`	`number`	—	Fixed column count. Omit to auto-fit.
`minColumnWidth`	`number`	`150`	Minimum tile width when auto-fitting.
`variant`	`"bordered" \| "plain"`	—	Forwarded to each MetricCard.
`connected`	`boolean`	—	Removes gaps and adds borders between metrics.

Revenue

$45.2K+13%

vs last month

Users

12.1K+3.2%

vs last week

Errors

0.4%-1.2%

vs last deploy

Uptime

99.98%0.0%

last 30d

MetricGrid with 4 metrics

Deployments

142+8.0%

CPU

64%avg-3.0%

Memory

78%avg+2.0%

MetricGrid connected

ImportTSX

import { MetricGrid } from "@solarius/onset";
import type { MetricDatum, MetricGridProps } from "@solarius/onset";