Number displays statistical data in a variety of layout patterns including pairs, splits, comparisons, and highlighted panels.
Loading demo: number-real-world
npx sdaia-ui@latest add number
import { Number } from "@/components/ui/number"<Number type="stat-pair" />Two statistics displayed side by side as a pair.
Loading demo: number-stat-pair
Statistics arranged in a side-by-side list layout.
Loading demo: number-stat-side-list
Statistics with a split header layout.
Loading demo: number-stat-header-split
Statistics stacked in a vertical list.
Loading demo: number-stat-list-stack
Props for the Number component.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'StatPair' | 'StatHighlight' | 'StatSplit' | 'StatComparisonBlock' | 'StatSideList' | 'StatExtendedPanel' | 'StatMixedStack' | 'StatOptionBlock' | 'StatDetailPair' | 'StatInlineGroup' | 'StatHeaderSplit' | 'StatListStack' | — | optional |
label | string | 'Indicator Name' | optional |
value | string | '422.61' | optional |
trend | 'positive' | 'negative' | 'positive' | optional |
trendValue | string | '12%' | optional |
label2 | string | 'Indicator Name' | optional |
value2 | string | '422.61' | optional |
trend2 | 'positive' | 'negative' | 'negative' | optional |
trendValue2 | string | '12%' | optional |
title | string | 'Title' | optional |
rows | NumberRow[] | [ { label: 'Indicator Name', value: '422.61' }, { label: 'Indicator Name', value: '422.61' }, ] | optional |
menuLabel | string | 'Options' | optional |
onMenuClick | () => void | - | optional |
onMoreClick | () => void | - | optional |
className | string | - | optional |