# Number flow: Right to left

> Numbers always read left to right, even inside a right-to-left layout, matching how browsers render them.

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

## Add this example

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

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

## Source

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

import * as React from "react"

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

export function NumberFlowRtl() {
  const [value, setValue] = React.useState(1250)

  return (
    <div dir="rtl" className="flex flex-col items-center gap-4">
      <NumberFlow
        value={value}
        locales="ar-EG"
        className="text-3xl font-semibold"
      />
      <Button variant="outline" size="sm" onClick={() => setValue(value + 17)}>
        ١٧+
      </Button>
    </div>
  )
}
```

## Props in this example

### NumberFlow

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number` | – | Required. |
| `locales` | `Intl.LocalesArgument` | `"en-US"` |  |

## More Number flow examples

- [Only changed digits move](https://hextaui.com/docs/number-flow/examples/changed-digits.md)
- [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)