# Number flow: Trend

> `trend` sets which way digits spin. `auto` spins up when the value grows and down when it shrinks, `up` and `down` force a direction, and `shortest` takes the nearest way round the wheel.

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

## Add this example

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

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

## Source

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

import * as React from "react"

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

const trends: NumberFlowTrend[] = ["auto", "up", "down", "shortest"]

export function NumberFlowTrendDemo() {
  const [value, setValue] = React.useState(19)

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
        {trends.map((trend) => (
          <div
            key={trend}
            className="flex flex-col gap-1 rounded-lg border p-3"
          >
            <span className="text-xs text-muted-foreground">{trend}</span>
            <NumberFlow
              value={value}
              trend={trend}
              className="text-2xl font-semibold"
            />
          </div>
        ))}
      </div>
      <div className="flex flex-wrap gap-2">
        <Button
          variant="outline"
          size="sm"
          onClick={() => setValue(value === 19 ? 21 : 19)}
        >
          19 ↔ 21
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => setValue(value === 19 ? 11 : 19)}
        >
          19 ↔ 11
        </Button>
      </div>
    </div>
  )
}
```

## Props in this example

### NumberFlow

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number` | – | Required. |
| `trend` | `"auto" \| "up" \| "down" \| "shortest"` | `"auto"` |  |

## More Number flow examples

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