# Number flow: Inline and in badges

> It renders an inline `<span>` that sits on the text baseline, and tabular digits keep its width steady while digits spin. `BadgeCount` uses it for counts that cap at a maximum.

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

## Add this example

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

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

## Source

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

import * as React from "react"
import { IconInbox } from "@tabler/icons-react"

import { Badge, BadgeCount } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { NumberFlow } from "@/components/ui/number-flow"

export function NumberFlowInline() {
  const [value, setValue] = React.useState(8)

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <p className="text-sm">
        You have <NumberFlow value={value} className="font-semibold" /> new
        messages and the baseline stays aligned with the text.
      </p>
      <div className="flex flex-wrap items-center gap-2">
        <Button variant="outline">
          <IconInbox />
          Inbox
          <Badge size="sm" appearance="solid" variant="destructive">
            <BadgeCount value={value} />
          </Badge>
        </Button>
        <Badge>
          <BadgeCount value={value * 7} max={999} />
          unread
        </Badge>
        <Button variant="outline" size="sm" onClick={() => setValue(value + 1)}>
          +1
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => setValue(value + 50)}
        >
          +50
        </Button>
      </div>
    </div>
  )
}
```

## Props in this example

### NumberFlow

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

## 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)
- [Right to left](https://hextaui.com/docs/number-flow/examples/rtl.md)