Stat Row

A compact KPI tile with optional trend indicator for dashboards and summary panels.

Active Users

12,480

+12.4%

Revenue

84.2K

+5.1%

Churn Rate

3.2%

-0.8%

Avg. Session

4m 32s

No change

Usage in Gaia

Used as the building block for analytics dashboards and AI-generated summaries — quick at-a-glance KPIs with optional up/down/neutral trend.

Features

Single KPI Display - Title, value, and optional unit at a glance
Trend Indicator - Up, down, and neutral states with color-coded icons
Trend Label - Custom text accompanying the trend (e.g. "+12.4%")
Compact Sizing - w-fit with sensible minimum width for grid layouts
Theme-Aware - Adapts to light and dark themes via design tokens
Flexible Value Type - Accepts string or number values

Installation

npx shadcn@latest add https://ui.heygaia.io/r/stat-row.json

Usage

import { StatRow } from "@/components/ui/stat-row";
 
export default function Example() {
  return (
    <StatRow
      title="Active Users"
      value="12,480"
      trend="up"
      trendLabel="+12.4%"
    />
  );
}

Props

StatRow

Prop	Type	Default	Description
title	string	-	Label for the KPI
value	string \| number	-	The primary value to display
unit	string	-	Optional unit suffix (e.g. "%", "K")
trend	"up" \| "down" \| "neutral"	-	Direction of the trend
trendLabel	string	-	Text shown next to the trend icon

Slash Command Dropdown Todo Item

On This Page

Meet GAIA

Your open-source, proactive personal AI assistant with 200+ integrations. GAIA combines todos, goals, calendar, and email into one system, turns tasks into automated workflows, and completes work instead of just tracking it. Open-source and self-hostable with support for custom automations and multi-step workflows.