NexoreUIv1.8.6
InstallationComponents61IconsTemplatesNEWNexore MakeAI
Create ProjectSTUDIOGitHub
NexoreUI
61 comps
Create Project
Studio
Installation
Components Overview
60+
Icons
300+
Categories6 groups
Button
Input
Checkbox
AI
Select
AI
Switch
Slider
Rating
File Upload
Card
Accordion
Tabs
Table
Stepper
Scroll Area
Navigation
Dock
Data Display
Aurora Border Card
AI
Aurora Search Pill
AI
AI Prompt Input
AI
Command
Interactive Code Block
AI
Pro AI
AI
Theme: cyan
Studio
DocsAnimated Number

Animated Number

Smooth number transition animations.

NextTyping Animation
On This Page
Quick Actions
Project Studio
New
Nexore Make (AI)Source on GitHub

Animated Number

Smoothly animates a numeric value whenever it changes, using Framer Motion springs.

Interactive Playground

Live CanvasInteractive
450
Controls(1)
value
number

Target number value to animate to

Generated JSX
Source
import { AnimatedNumber } from "nexoreui"

<AnimatedNumber />

Interactive Counter

100
component.tsx
1

Currency Formatting

$12,450.75
component.tsx
1

Percentage Value

87.4%
component.tsx
1

Temperature Reading

36.6°C
component.tsx
1

Large Integer Display

999,999
component.tsx
1

API Reference

PropertyTypeDefaultDescription
valuenumber-The numeric target value. Changing this triggers transition.
durationnumber-Optional duration config (translated to spring dynamics).
formatFn(value: number) => stringMath.round(v).toLocaleString()Formatting function for rendering the numeric value to string.