Glin UI
Radix UIBase UI
Primitive / Atombeta

Count Up

Counts a number up on scroll with the active animation engine, jumping to the end value when motion is off.

Edit on GitHub

Downloads this week

84,200

Satisfaction

98.6%

Revenue

$48,920

Installation

Install from
pnpm dlx @glinui/cli@latest add count-up

Prefer the package?

Usage

Motion engine

12,480+
// pnpm add motion (separate dependency, optional)
// Once at your app entry:
import "@glinui/motion/register/motion"



import { CountUp } from "@glinui/ui"



export function Demo() {
  return <CountUp engine="motion" value={12480} suffix="+" className="text-3xl font-semibold" />
}

GSAP engine

12,480+
// pnpm add gsap (separate dependency under GreenSock's own license, not bundled by GLINUI)
// Once at your app entry:
import "@glinui/motion/register/gsap"



import { CountUp } from "@glinui/ui"



export function Demo() {
  return <CountUp engine="gsap" value={12480} suffix="+" className="text-3xl font-semibold" />
}

Static (animations off)

12,480+
import { CountUp } from "@glinui/ui"



export function Demo() {
  return <CountUp motion="none" value={12480} suffix="+" className="text-3xl font-semibold" />
}

Accessibility

  • Assistive tech always reads the final value: the accessible copy is rendered once and never changes.
  • The animating digits are aria-hidden, so there are no repeated announcements.
  • The invisible final value reserves the width, so the layout never shifts while counting.

Reduced Motion

Reduced motion and motion="subtle" jump straight to the final number.

Affected properties

number tween

API Reference

PropTypeRequiredDefaultDescription
valuenumberYes-Final value.
fromnumberNo0Start value.
decimalsnumberNo-Fraction digits. Defaults to the digits of value.
localestringNo-Intl.NumberFormat locale.
prefix / suffixstring--Text around the number, for example $ or +.
format(value: number) => stringNo-Custom formatter. Overrides decimals and locale.
duration / delay / spring / once / threshold / immediatesee Reveal--Same behavior as Reveal.
engineEngineNameNo"css"Animation engine. css is built in with zero dependencies; motion and gsap are opt-in (import "@glinui/motion/register/<name>" and install the package). Falls back to MotionEngineProvider, then data-glin-engine on <html>, then css.
motionMotionLevelNo"system"none renders the final state with no animation, subtle animates opacity only, system follows prefers-reduced-motion.
delaynumberNo-Auto-generated from TypeScript source.
durationnumberNo-Duration in ms.
immediatebooleanNofalseAuto-generated from TypeScript source.
oncebooleanNotrueAuto-generated from TypeScript source.
prefixstringNo""Auto-generated from TypeScript source.
springSpringInputNo-Auto-generated from TypeScript source.
suffixstringNo""Auto-generated from TypeScript source.
thresholdnumberNo-Auto-generated from TypeScript source.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { CountUp } from "@glinui/ui"

Source Files

Dependencies

@glinui/ui@glinui/motion

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/count-up.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

CountUpProps

CountUpProps

PropTypeRequiredDefaultDescription
decimalsnumberNo--
delaynumberNo--
durationnumberNo-Duration in ms.
engineEngineNameNo-Engine override: `css` (default), `motion`, `gsap` or a registered custom engine.
format(value: number) => stringNo-Custom formatter. Receives the raw value. Overrides decimals and locale.
fromnumberNo0Start value. Default 0.
immediatebooleanNofalse-
localestringNo--
motionMotionLevelNo-Motion override. `none` renders the static final state, `subtle` is opacity only.
oncebooleanNotrue-
prefixstringNo""-
springSpringInputNo--
suffixstringNo""-
thresholdnumberNo--
valuenumberYes-Final value.