# CountUp

> A number that counts to `value` over 1.5 `--motion-duration`s with `--motion-ease`, on a client mount and on every change.

Source: https://ui.jcsoftdev.com/docs/components/count-up

A number that counts to `value` over 1.5 `--motion-duration`s with `--motion-ease`, on a client
mount and on every change. Server HTML, hydration and reduced motion show the final value at
once. While it counts, assistive tech reads only the final value and the final text reserves
its width, so the line does not grow digit by digit. Works as the `value` of a `Kpi`.

## Import

```ts
import { CountUp } from "@jcsoftdev/ui/motion";
```

## Usage

```tsx
export const RevealOnMount: Story = {
  render: () => (
    <Replay>
      {() => (
        <Reveal>
          <Card className="max-w-sm p-card">Welcome back. Three tasks are waiting for you.</Card>
        </Reveal>
      )}
    </Replay>
  ),
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` * | `number` |  |  |
| `formatter` | `NumberFormatter` |  | Formats every shown value. Defaults to `Intl.NumberFormat` in the UI strings locale. |
| `from` | `number` | `0` | Where a client-side mount starts counting from. Default 0. |
| `ref` | `Ref<HTMLSpanElement>` |  |  |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Reveal On Mount](/storybook/?path=/story/motion-motion--reveal-on-mount)
- [Staggered Cards](/storybook/?path=/story/motion-motion--staggered-cards)
- [Cross Fade List Detail](/storybook/?path=/story/motion-motion--cross-fade-list-detail)
- [Count Up In AK Pi](/storybook/?path=/story/motion-motion--count-up-in-ak-pi)
- [Highlight Rows](/storybook/?path=/story/motion-motion--highlight-rows)
- [Cross Fade Swaps Keyed Content](/storybook/?path=/story/tests-motion--cross-fade-swaps-keyed-content)
- [Cross Fade Reduced Motion Swaps At Once](/storybook/?path=/story/tests-motion--cross-fade-reduced-motion-swaps-at-once)
- [Count Up Lands On The Formatted Value](/storybook/?path=/story/tests-motion--count-up-lands-on-the-formatted-value)
- [Count Up Reduced Motion Shows The Final Value](/storybook/?path=/story/tests-motion--count-up-reduced-motion-shows-the-final-value)
- [Reveal And Stagger Reduced Motion Are Static](/storybook/?path=/story/tests-motion--reveal-and-stagger-reduced-motion-are-static)
- [Stagger Keeps Children In The Accessibility Tree](/storybook/?path=/story/tests-motion--stagger-keeps-children-in-the-accessibility-tree)
- [Highlight Row Pulses Only New Rows](/storybook/?path=/story/tests-motion--highlight-row-pulses-only-new-rows)

## Source

`packages/ui/src/motion/count-up.tsx`