KpiStrip

Horizontal row of KPI cards.

Overview

KpiStrip is a lightweight block for displaying metrics in a grid layout. It's designed to be composable and reusable across different contexts. Use it in dashboards, reports, or any place where you need to display key metrics.

1
2
3
4
5
6
7
8

Install

1

Code Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Props

• metrics - Array of KPI metrics to display (required)
• columns - Number of columns: 2 | 3 | 4 (default: 4)
• gap - Gap between cards: "sm" | "md" | "lg" (default: "md")
• className - Additional className for container (optional)

Metric Object

• id - Unique identifier (required)
• title - Metric title (required)
• value - Metric value as string or number (required)
• description - Optional description text
• trend - Trend direction: "up" | "down" | "neutral" (optional)
• trendValue - Trend value as string, e.g., "+12%" (optional)
• icon - Optional icon element (optional)
• onClick - Click handler for the metric card (optional)

Features

• Responsive grid layout (1 column on mobile, multiple on desktop)
• Configurable column count (2, 3, or 4)
• Customizable gap between cards
• Uses MetricCard component from @fragment_ui/ui
• Supports trend indicators and icons
• Clickable metrics with onClick handler
• Fully accessible

Related Blocks

• KPIDashboard - Full dashboard with title and description
• DashboardTemplate - Complete dashboard template using KpiStrip
• MetricCard - Individual metric card component

Accessibility

KpiStrip uses MetricCard components which are fully accessible with proper ARIA attributes. Clickable metrics support keyboard navigation.