saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Animated Number

Animated Number

Animates a number value with smooth transitions.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/animated-number

Usage

import { AnimatedNumber } from "@/components/ui/animated-number"
<AnimatedNumber value={1234} />

Examples

Currency

Loading...
Currency display with $ prefix.

Large Numbers

Loading...
Large numbers with locale formatting.

Custom Spring

Loading...
Custom spring physics animation.

Fade In Effect

Load Budget

980,100

Loads from 99% of target with a gradual animation

Gradual fade-in animation from near-target value.

API Reference

PropTypeDefaultDescription
value*number—The target number to animate toward.
classNamestring—Additional CSS classes.
springOptionsSpringOptions—Motion spring configuration for the animation.
asReact.ElementTypespanThe HTML element type to render.

On This Page

  • Installation
  • Usage
  • Examples
  • Currency
  • Large Numbers
  • Custom Spring
  • Fade In Effect
  • API Reference
1,000

Total Amount

$1,234

Total Views

1,234,000

Score

0