Stats Group Component

Category: Data Display

The StatsGroup component is used to display grouped statistics in a consistent, accessible layout. It provides a flexible composite component API that allows for customizable stat items with labels, values, and optional secondary stats.

When to Use

• Dashboard metrics: Display key performance indicators, statistics, or analytics
• Summary statistics: Show aggregated data in a scannable format
• Comparison views: Display multiple related metrics side-by-side

General Structure

The component follows this structure:

1. StatsGroup - Main container with grid layout
2. StatsGroup.Item - Individual stat item container
3. StatsGroup.Label - Label text with optional tooltip
4. StatsGroup.Value - Main metric value with variable font sizes
5. StatsGroup.SecondaryStat - Optional secondary stat below the main metric

Layout Props (Opinionated)

• StatsGroup uses a responsive grid that stacks vertically on mobile and horizontally on larger screens
• StatsGroup.Item provides consistent padding and layout
• Subcomponents have opinionated layout classes that cannot be overridden

Styling Props (Flexible)

• StatsGroup.Value accepts a size prop ("sm", "md", "lg", "xl", "2xl", "3xl") for font size control
• StatsGroup.Label accepts tooltip prop for additional context

Usage

Basic Stats Group

Show Editor

With Tooltips

Show Editor

Custom Font Sizes

Show Editor

Custom Styling

Apply custom styling to the elements passed as children:

Show Editor

With Secondary Stat

Show Editor

Complete Example

Show Editor