104Get started
HextaUI

Number flow: Right to left

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

١٬٢٥٠
"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>
  )
}

Add this example

This adds the example as components/examples/number-flow/rtl.tsx, together with the Number flow component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/number-flow-rtl.json

To add only the component, follow the Number flow installation.

Props in this example

The Number flow props this example sets, from the API reference.

NumberFlow

PropTypeDefault
valueRequired.
number–
locales
Intl.LocalesArgument"en-US"

Every prop is in the Number flow API reference.

More Number flow examples

See them all, with keyboard support and accessibility notes, on the Number flow page.

Related components