Command Palette

Search for a command to run...

Upstash/Upstash Counter

Upstash Counter

Animated counter display for Redis INCR patterns with optional increment/decrement controls.

Open in v0Open in
1,234
Page Views
15.8K
Users
2.5M
Requests

Overview

Animated counter with smooth number transitions. Perfect for displaying Redis counters with optional increment/decrement controls.

Installation

npx shadcn@latest add @elements/upstash-counter

Usage

import { UpstashCounter } from "@/components/elements/upstash/upstash-counter";

export function PageViews() {
  const [count, setCount] = useState(1234);

  return (
    <UpstashCounter
      value={count}
      label="Page Views"
      format="compact"
      showControls
      onIncrement={() => setCount(c => c + 1)}
      onDecrement={() => setCount(c => c - 1)}
    />
  );
}

Props

PropTypeDefaultDescription
valuenumber-Current counter value
labelstring-Label below the counter
format"full" | "compact""full"Number format (1,234 vs 1.2K)
showControlsbooleanfalseShow +/- buttons
onIncrement() => void-Increment callback
onDecrement() => void-Decrement callback
animatedbooleantrueAnimate value changes
size"sm" | "md" | "lg""md"Component size
classNamestring-Additional CSS classes

Features

  • Smooth number animation on change
  • Compact formatting (1.2K, 1.5M, 2.3B)
  • Optional increment/decrement controls
  • Pulse effect on value change