Statistic

LhStatistic displays important numbers or statistics. Supports precision, thousand separators, prefix/suffix.

Basic Usage

Title + Value

Annual Visits

2,384,712

<script setup lang="ts">
</script>

<template>
  <LhStatistic title="Annual Visits" :value="2384712" />
</template>

<script>
export default {}
</script>

<template>
  <LhStatistic title="Annual Visits" :value="2384712" />
</template>

Precision & Separator

precision controls decimals, separator controls thousands grouping (empty string disables)

Rating

4.85

ID

8899001

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="Rating" :value="4.8471" :precision="2" />
    <LhStatistic title="ID" :value="8899001" separator="" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="Rating" :value="4.8471" :precision="2" />
    <LhStatistic title="ID" :value="8899001" separator="" />
  </div>
</template>

Prefix & Suffix

prefix / suffix props or named slots

Revenue

$128,600 USD

Growth

12.6%

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="Revenue" :value="128600" prefix="$" suffix=" USD" />
    <LhStatistic title="Growth" :value="12.6" :precision="1" suffix="%" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="Revenue" :value="128600" prefix="$" suffix=" USD" />
    <LhStatistic title="Growth" :value="12.6" :precision="1" suffix="%" />
  </div>
</template>

Non-numeric Text

When value contains a string that cannot be parsed as a number, it is displayed as-is. Useful for very large numbers or special text.

String value

Stars

Countless

<script setup lang="ts">
</script>

<template>
  <LhStatistic title="Stars" value="Countless" />
</template>

<script>
export default {}
</script>

<template>
  <LhStatistic title="Stars" value="Countless" />
</template>

API

Props

Prop	Description	Type	Default
title	Title text	string	—
value	Statistic value; as a string it can carry very large numbers or special text	string | number	0
precision	Decimal precision	number	0
separator	Thousand separator; an empty string disables grouping	string	','
prefix	Value prefix, e.g. a currency symbol	string	—
suffix	Value suffix, e.g. a unit	string	—
sx	Quick layout props	LhSxProps	—

Slots

Slot	Description
title	Custom title
prefix	Custom prefix
suffix	Custom suffix

Accessibility

• The value carries aria-live="polite", so screen readers announce the new value when it changes
• Title, prefix, and suffix are plain text and read as-is

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/statistic/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhStatisticProps

export interface LhStatisticProps {
  title?: string
  value: number | string
  precision?: number
  separator?: string
  prefix?: string
  suffix?: string
  sx?: LhSxProps
}