Data display

Descriptions and Statistic

Key and value pairs, and big numbers with their change.

Ant Design: Descriptions, Statistic

import { Descriptions, Statistic } from '@alea/ui';

Examples

Key and value pairs in columns.

Big numbers with their change, counted up when they appear.

Plugin users

+18%

Revenue

+7%

Refunds

+50%

Show 10 React Aria props

Key and value pairs: order details, profile facts, settings summaries (Ant's Descriptions).

Prop	Type	Default	Description
`items`required	`{ label: ReactNode; value: ReactNode; wide?: boolean \| undefined; }[]`	-	The pairs: label and value.
`bordered`	`boolean`	-	Draws lines between items.
`columns`	`2 \| 3 \| 1`	`2`	Columns on wide screens. Default 2.
`layout`	`"inline" \| "stacked"`	`'stacked'`	inline puts label and value side by side.

Show 10 React Aria props

A big number with its label and change (Ant's Statistic).

Prop	Type	Default	Description
`label`required	`ReactNode`	-	What the number is.
`value`required	`number`	-	The number.
`animate`	`boolean`	-	Counts up from 0 when it appears (skipped with reduced motion).
`delta`	`number`	-	Change versus before, e.g. 0.12 for +12%.
`formatOptions`	`NumberFormatOptions`	-	Intl number format (currency, percent, compact).
`higherIsBetter`	`boolean`	`true`	Is up good? Default true (turns green); false flips the colors (costs, errors).
`prefix`	`ReactNode`	-	Before the number, e.g. "quot;.
`suffix`	`ReactNode`	-	After the number, e.g. " ms".

Descriptions is a definition list.
Statistic says the change in words (up or down from before), not only with color.

Don't