Components / Data & content

Number

Component + manager

Displays and formats a numeric value with options for rounding, shorthand notation, separators, dynamic coloring based on value, and an optional progress bar.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentNumber

Managercreate_number_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Number, create_number_manager } from "sveltekit-ui"

  const manager = create_number_manager({
    val: 12500,
    separators: "thousands_commas_period",
  })
</script>

<p>Monthly visitors: <Number {manager} /></p>

API reference

Configure the manager, call its methods, and read its reactive state.

15 entries in configuration

Property	Type	Default	Description
`val`	`number or null`	`null`	Initial numeric value to display. If null, displays as empty or default.
`round`	`string`	`null`	Determines the rounding method applied to the value.
`round_by`	`number`	`null`	Value to round to when `round` is 'nearest', 'floor', or 'ceil'.
`precision`	`number`	`null`	Number of significant digits when `round` is 'precision'.
`shorthand`	`string`	`null`	Applies shorthand notation to the number, adding suffixes like K, M, B, etc.
`separators`	`string`	`null`	Formats the number with thousands and decimal separators based on locale.
`is_percentage`	`boolean`	`false`	If true, appends a '%' sign to the displayed number.
`is_dynamic_color`	`boolean`	`false`	If true, changes the color of the number based on its value relative to start and end values.
`start_value`	`number`	`null`	Starting value for dynamic color calculations.
`end_value`	`number`	`null`	Ending value for dynamic color calculations.
`start_color`	`object`	`null`	Starting color in Hue-Chroma format for dynamic color calculations (e.g., { h: 10, c: 10 }).
`end_color`	`object`	`null`	Ending color in Hue-Chroma format for dynamic color calculations (e.g., { h: 350, c: 10 }).
`base_color`	`object`	`null`	Base color used when dynamic color is not enabled (e.g., { h: 10, c: 10 }).
`is_progress_bar`	`boolean`	`false`	If true, displays the number as part of a progress bar.
`is_hide_number`	`boolean`	`false`	If true, hides the numeric text display.