Animated Counter

Animates a number from a start value to a target value using a smooth ease-out curve. Triggered by IntersectionObserver — the animation fires once when the element enters the viewport. Add prefix, suffix, and separator for formatted output.

free

Basic Counter

48,295

Total Users

98.4%

Uptime

$3,200

Daily Revenue

HTML

Custom Duration

Control animation speed with [duration] in milliseconds. Defaults to 1500.

1,000

500ms

1,000

1500ms (default)

1,000

3000ms

Dashboard Stats Row

Combine with base-stat-card or any layout for live dashboard-style KPI bars.

12,400+

Downloads

4,800

Stars

100%

Uptime

350+

Components

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add animated-counter

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add animated-counter
// Paths are relative to aliases.components (default: src/app/components)
import { AnimatedCounterComponent } from './animated-counter/animated-counter.component';

@Component({
  selector: 'app-your-component',
  imports: [
    AnimatedCounterComponent
  ],
  template: `...`
})
export class YourComponent {}

API for animated-counter — generated from JSDoc in the library source.

API reference for animated-counter
API	Member	Type	Default	Description
`base-animated-counter`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`base-animated-counter`	`value`	`number`	`0`	—
`base-animated-counter`	`from`	`number`	`0`	—
`base-animated-counter`	`duration`	`number`	`1500`	—
`base-animated-counter`	`decimals`	`number`	`0`	—
`base-animated-counter`	`prefix`	`string`	`''`	—
`base-animated-counter`	`suffix`	`string`	`''`	—
`base-animated-counter`	`separator`	`unknown`	`','`	—