Lucent UI
← ProfileCardStatsRowEmptyStateCard →
✦ LLM-ready

StatsRow

pattern

Stats row composed from Card, Row, Stack, Text, and Chip. Individual stat cards display a metric label, a 2xl display number, and a trend chip with comparison text. Revenue variant adds avatar headers for team attribution.

"Create a StatsRow using lucent-ui: Row of outline Cards, each with a label (xs secondary), a 2xl display number, and a trend Chip (success/danger) with comparison text."

Usage

React / JSX
import { Card, Row, Stack, Text, Chip } from 'lucent-ui'

<StatsRow Card variant="outline" Text font="display" />

Installation

pnpm add lucent-ui

API Reference

StatsRow props — * required

PropTypeDefaultDescription
Card variant"ghost" | "outline" | "filled" | "elevated""outline"Elevation level of each stat card.
Chip variant"success" | "danger" | "warning" | "info"—Semantic color for the trend indicator.
Text font"body" | "display""display"Use display for large metric numbers.