MetricCard Composites

Prop	Type	Default	Description
`label`	`string`	Required	KPI label displayed in the card header
`value`	`number \| string \| null`	—	Primary metric value
`format`	`{ prefix?, suffix?, abbreviated? }`	—	Value formatting options
`trend`	`{ value, direction, label? } \| null`	—	Trend indicator (direction: up/down/flat)
`subtitle`	`string`	—	Secondary descriptive text
`loading`	`boolean`	—	Show skeleton loading state
`error`	`boolean`	—	Show error state
`empty`	`boolean`	—	Show empty/no-data state
`stale`	`boolean`	—	Mark data as stale (blur animation)
`onDetails`	`() => void`	—	Open detail graph view
`onRemove`	`() => void`	—	Remove card from grid
`onNavigate`	`() => void`	—	Navigate to source data

JSX

import { SimpleMetricCard } from '@so.boss/gloss-ui';

<SimpleMetricCard
  label="Active Users"
  value={1284}
  trend={{ value: 4.2, direction: 'up' }}
  subtitle="Currently online"
/>

TrendCard

Trend

Show a value with sparkline trend over time

Prop	Type	Default	Description
`trendData`	`number[]`	Required	Sparkline data points for trend visualization
`accentColor`	`string`	—	Accent color for sparkline

Also takes the 12 shared props

JSX

import { TrendCard } from '@so.boss/gloss-ui';

<TrendCard
  label="Daily Revenue"
  value={125430}
  format={{ prefix: '$', abbreviated: true }}
  trendData={[42, 38, 51, 47, 55, 60, 58, 63, 71, 68]}
  trend={{ value: 12.5, direction: 'up' }}
  subtitle="MTD"
  accentColor="#6366f1"
/>

BarChartCard

Distribution

Compare values across categories with bar visualization

Prop	Type	Default	Description
`barData`	`number[]`	Required	Bar chart data points
`accentColor`	`string`	—	Accent color for bars

Also takes the 12 shared props

JSX

import { BarChartCard } from '@so.boss/gloss-ui';

<BarChartCard
  label="Orders by Channel"
  value={2847}
  barData={[18, 32, 25, 41, 35, 28, 22]}
  trend={{ value: 8.3, direction: 'up' }}
  subtitle="Last 7 days"
  accentColor="#3b82f6"
/>

ComparisonCard

Comparison

Compare two related values side by side

Prop	Type	Default	Description
`comparison`	`{ current, prior, currentLabel?, priorLabel? }`	Required	Comparison data with current and prior period values

Also takes the 12 shared props

JSX

import { ComparisonCard } from '@so.boss/gloss-ui';

<ComparisonCard
  label="Revenue vs Target"
  comparison={{
    current: 125430,
    prior: 112800,
    currentLabel: 'This Month',
    priorLabel: 'Last Month',
  }}
  format={{ prefix: '$', abbreviated: true }}
  trend={{ value: 11.2, direction: 'up' }}
/>

DirectionCard

Direction

Show a value with directional indicator (up/down/flat)

Prop	Type	Default	Description
`direction`	`'up' \| 'down'`	Required	Arrow pointing direction
`shape`	`'chevron' \| 'triple' \| 'bars'`	—	Arrow visual shape

Also takes the 12 shared props

JSX

import { DirectionCard } from '@so.boss/gloss-ui';

<DirectionCard
  label="Growth Rate"
  value="18.4%"
  direction="up"
  shape="chevron"
  trend={{ value: 3.1, direction: 'up' }}
  subtitle="Quarter over quarter"
/>

DistributionCard

Distribution

Show percentage breakdown with a donut ring

Prop	Type	Default	Description
`donutValue`	`number`	Required	Current donut value
`donutMax`	`number`	—	Maximum donut value (default 100)
`accentColor`	`string`	—	Accent color for donut ring

Also takes the 12 shared props

JSX

import { DistributionCard } from '@so.boss/gloss-ui';

<DistributionCard
  label="Fill Rate"
  value={78}
  format={{ suffix: '%' }}
  donutValue={78}
  donutMax={100}
  trend={{ value: 2.4, direction: 'up' }}
  accentColor="#10b981"
/>

HighlightCard

Highlight

Feature a single important metric prominently

Prop	Type	Default	Description
`highlightColor`	`string`	Required	Semantic highlight color (hex or CSS variable)

Also takes the 12 shared props

JSX

import { HighlightCard } from '@so.boss/gloss-ui';

<HighlightCard
  label="Critical Alert"
  value={3}
  highlightColor="#ef4444"
  trend={{ value: -1, direction: 'down', label: 'vs yesterday' }}
  subtitle="Active incidents"
/>

ProgressCard

Progress

Show completion toward a goal or target

Prop	Type	Default	Description
`progressValue`	`number`	Required	Current progress value
`progressMax`	`number`	Required	Maximum progress value (100%)

Also takes the 12 shared props

JSX

import { ProgressCard } from '@so.boss/gloss-ui';

<ProgressCard
  label="Quarterly Goal"
  value="$842K"
  progressValue={842000}
  progressMax={1000000}
  trend={{ value: 5.6, direction: 'up' }}
  subtitle="84.2% complete"
/>

SegmentCard

Segment

Display segmented data with proportional visualization

Prop	Type	Default	Description
`segments`	`Array<{ value, color, label? }>`	Required	Segment data for segmented bar visualization

Also takes the 12 shared props

JSX

import { SegmentCard } from '@so.boss/gloss-ui';

<SegmentCard
  label="Revenue by Region"
  value="$2.4M"
  segments={[
    { value: 45, color: '#6366f1', label: 'North' },
    { value: 30, color: '#3b82f6', label: 'South' },
    { value: 15, color: '#10b981', label: 'East' },
    { value: 10, color: '#f59e0b', label: 'West' },
  ]}
  trend={{ value: 7.8, direction: 'up' }}
/>

Need more control? MetricCard primitive

Composites cover common use cases with minimal configuration. If your needs go beyond what a composite offers, drop down to the MetricCard primitive for full control over layout, zones, and visualization.