Data Display

StatisticGroup

Grid container that arranges a set of statistic tiles into a responsive multi-column layout with shared labelling.

import { StatisticGroup } from '@lostgradient/cinder/statistic-group';
data-displaydashboard
01

Overview

Grid container that lays out multiple stat tiles with consistent spacing and alignment.

Usage

StatisticGroup is a compound component. Import the parent and compose StatisticGroup.Statistic via the namespace API.

svelte 
<script lang="ts">
  import { StatisticGroup } from '@lostgradient/cinder/statistic-group';
</script>

<StatisticGroup label="This quarter" columns={3}>
  <StatisticGroup.Statistic label="Monthly revenue" value="$48,250" />
  <StatisticGroup.Statistic label="Active users" value={1289} />
  <StatisticGroup.Statistic label="Churn" value="2.1%" />
</StatisticGroup>

The leaf remains importable individually for à-la-carte builds — see @lostgradient/cinder/statistic.

Live preview
02

When to use

Use when
  • Showing a row of related statistic tiles such as the top metrics of a dashboard.
  • Giving a cluster of statistic entries a single accessible group label.
Avoid when
  • Rendering exactly one metric — use statistic on its own.
  • Building a freeform card grid unrelated to numeric metrics — compose surface or grid-list directly.
03

Examples

Responsive auto columns

Setting `columns` to `auto` switches the grid to CSS auto-fit with minmax, so tiles reflow to fit the available width instead of locking to a fixed column count.

Basic stat group

A row of summary metrics. Uses the StatisticGroup namespace API: StatisticGroup.Statistic renders each metric inside the parent StatisticGroup grid.

Cards variant

The `cards` variant renders each metric as a discrete bordered card, separating the tiles instead of laying them out edge-to-edge in a shared grid.

Compact summary strip

Dense summaries can tune StatisticGroup spacing and Statistic typography through public CSS variables.

Shared-borders variant

The `shared-borders` variant wraps the whole set in a single outer border and divides the tiles with 1px gap rules, keeping the grid visually unified.

04

Props

Props for statistic-group
Name Type Default Required Bindable Description
columns 1234'auto' 'auto' Grid column count. 'auto' uses auto-fit with minmax for responsive layout.
variant 'default' | 'cards' | 'shared-borders' 'default' Visual variant; surfaced as data-cinder-variant for CSS styling. - 'default' — plain grid, no borders or backgrounds. - 'cards' — each stat gets a card-style border and shadow. - 'shared-borders' — single outer border with 1px gap dividers between stats.
children snippet req Statistic children, typically one or more <Statistic> components.
label text Optional accessible label for the whole stat set. When provided, the container becomes role="group" and uses this value as its accessible name.
role unknown req