Aki UI

Number Flow

ナンバーフロー

Digits that roll into place instead of swapping. Each column holds nought through nine stacked in a clipped window, and translating it by one digit's height brings the right one into view — so going from seven to two rolls through everything between. Group separators sit outside the columns and stay put. Formatting comes from Intl.NumberFormat↗↗. Built with Framer Motion and Tailwind CSS.

$0123456789,012345678901234567890123456789

Installation

Install the following dependencies:1

npm install framer-motion

Copy and paste the following code into a new component file:2

"use client"

import { motion } from "framer-motion"

type NumberFlowProps = {

value: number,

locale?: string,

prefix?: string,

suffix?: string,

height?: number,

How to use it3

"use client"

import { NumberFlow } from "@/components/ui/number-flow"

export default function Page() {

return <NumberFlow value={1234} prefix="$" locale="en-US" />

}

Props

NumberFlow

Name	Default	Description
value	—	number The number to display, truncated to an integer
locale	"en-US"	string Locale used for group separators
prefix	—	string Static text before the number, such as a currency symbol
suffix	—	string Static text after the number, such as a percent sign
height	40	number Height of one digit in pixels, which sets the roll distance
dark	false	boolean Render the dark palette