# Number flow: Only changed digits move

> Each digit is its own column. Going from 22 to 23 spins only the ones digit; the tens digit stays still. Digits that appear or disappear, like the third digit in 99 → 100, slide their width in or out.

Example: https://hextaui.com/docs/number-flow/examples/changed-digits
Component docs: https://hextaui.com/docs/number-flow.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/number-flow-changed-digits.json
```

This adds `components/examples/number-flow/changed-digits.tsx` with the Number flow component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/number-flow/changed-digits.tsx"
"use client"

import * as React from "react"

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

const pairs = [
  [22, 23],
  [14, 19],
  [99, 100],
  [19, 21],
]

export function NumberFlowChangedDigits() {
  const [value, setValue] = React.useState(22)

  return (
    <div className="flex flex-col items-center gap-6">
      <NumberFlow value={value} className="text-5xl font-semibold" />
      <div className="flex flex-wrap justify-center gap-2">
        {pairs.map(([from, to]) => (
          <Button
            key={`${from}-${to}`}
            variant="outline"
            size="sm"
            onClick={() => setValue(value === from ? to : from)}
          >
            {from} ↔ {to}
          </Button>
        ))}
      </div>
    </div>
  )
}
```

## Props in this example

### NumberFlow

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number` | – | Required. |

## More Number flow examples

- [Trend](https://hextaui.com/docs/number-flow/examples/trend.md)
- [Formats](https://hextaui.com/docs/number-flow/examples/formats.md)
- [Timing](https://hextaui.com/docs/number-flow/examples/timing.md)
- [Interruptions and events](https://hextaui.com/docs/number-flow/examples/events.md)
- [Inline and in badges](https://hextaui.com/docs/number-flow/examples/inline.md)
- [Right to left](https://hextaui.com/docs/number-flow/examples/rtl.md)