StellarUI

<stellar-number>

Minimal localized number formatter for plain and compact values.

Formatted value

Copy

<stellar-number
  value="33751"
  mode="scaled"
  duration="1800"
  easing="outCirc"
  decimals="1"
>
</stellar-number>

Complete props, events, slots, and implementation notes for the shipped number formatter.

Prop	Type	Default
`value`	`number`	`0`
`mode`	`decimal \| scaled`	`decimal`
`tone`	`'' \| neutral \| primary \| secondary \| tertiary \| error`	`neutral`
`duration`	`number`	`0`
`easing`	`linear \| quadratic \| cubic \| elastic \| inQuad \| outQuad \| inOutQuad \| inCubic \| outCubic \| inOutCubic \| inQuart \| outQuart \| inOutQuart \| inQuint \| outQuint \| inOutQuint \| inSine \| outSine \| inOutSine \| inExpo \| outExpo \| inOutExpo \| inCirc \| outCirc \| inOutCirc \| inElastic \| outElastic \| inOutElastic \| inBack \| outBack \| inOutBack \| inBounce \| outBounce \| inOutBounce \| inGolden \| outGolden \| inOutGolden`	`outCirc`
`multiplier`	`number`	`1`
`prefix`	`string`	`''`
`suffix`	`string`	`''`
`decimals`	`number`	`0`

Event	Source	Notes

Slot	Notes

The public tag is `stellar-number`, and it is a display-only formatter rather than an input control.
`mode='decimal'` renders a localized plain number; `mode='scaled'` adds compact SI-style prefixes like `k`, `M`, and `G`.
`multiplier`, `prefix`, and `suffix` apply in both modes, so simple percent, money-like, and labeled metrics stay possible without extra formatter families.
`duration` animates from the previously rendered value to the next `value`; the first animated run starts from `0`, and `easing` defaults to Datastar's `outCirc`.
Keep it for simple cases. If you need more specialized Intl behavior, use Datastar `@intl` instead of growing this component surface.
`lang` on the host changes the formatter locale; otherwise the component falls back to the document language and then the browser locale.