Number
Number displays statistical data in a variety of layout patterns including pairs, splits, comparisons, and highlighted panels.
'use client'; import { Number } from 'sdaia-ui'; export default function NumberRealWorld() {Installation
npx sdaia-ui@latest add number
Usage
import { Number } from "@/components/ui/number"<Number type="stat-pair" />Examples
StatPair
Two statistics displayed side by side as a pair.
<Number type="StatPair" label="Indicator Name" value="422.61" />StatSideList
Statistics arranged in a side-by-side list layout.
<Number type="StatSideList" label="Indicator Name" value="422.61" trend="positive" trendValue="12%" rows={[{ label: 'Indicator Name', value: '422.61' }, { label: 'Indicator Name', value: '422.61' }]}/>StatHeaderSplit
Statistics with a split header layout.
<Number type="StatHeaderSplit" label="Indicator Name" value="422.61" trend="positive" trendValue="12%" label2="Indicator Name" value2="422.61" trend2="negative" trendValue2="12%"/>StatListStack
Statistics stacked in a vertical list.
<Number type="StatListStack" rows={[{ label: 'Text', value: '422.61' }, { label: 'Text', value: '422.61' }, { label: 'Text', value: '422.61' }]}/>API Reference
NumberProps
Props for the Number component.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'StatPair' | 'StatHighlight' | 'StatSplit' | 'StatComparisonBlock' | 'StatSid... | 'StatPair' | 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 |