Number Flow

Smooth animated number transitions for React dashboards, counters, and KPIs. Features rolling digit animations, locale formatting, and customizable easing.

~8.5 kB

Last updated: June 1, 2026

Installation

npx smoothui-cli add number-flow

Features

Smooth counting animations
Locale-aware formatting
Easing and duration controls
Accessible labels

Accessibility

Reduced Motion

This component does not currently support the prefers-reduced-motion media query. Digit slide animations will play regardless of user preference.

The increment and decrement buttons include descriptive aria-label attributes ("Increase number" and "Decrease number"). Buttons are properly disabled at the min and max boundaries via the disabled attribute.

Keyboard

The controls use native <button> elements with type="button", so they are focusable and operable via keyboard (Enter and Space) without additional handling.

Props

Job Listing Component

Animated React job listing cards with filter tags, smooth entrance animations, and accessible focus states for career pages.

Photo Stack

A draggable deck of photo cards. Drag or tap the top card to flick it to the back and reveal the next — with spring motion and reduced-motion support.