vibecodng.com

Free MCP betaIndex and tools live

Measured entry

tripled-native-counter-up-carbon

statsminimal-flatmotion on file

A client-side React counter that animates from zero to a formatted target and supports prefixes, suffixes, decimals, labels, and reduced-motion preferences. It ships as a shadcn registry TSX file, uses Framer Motion, and expects a local cn utility backed by clsx and tailwind-merge plus Tailwind utility classes.

Specimen
Motion capture of the mounted demo, recorded by the harness. No audio track.
Harness screenshot of tripled-native-counter-up-carbon at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of tripled-native-counter-up-carbon at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of tripled-native-counter-up-carbon at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for tripled-native-counter-up-carbon
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious1
Axe moderate0
Axe minor0
Gzip marginal72.2 KB (137.7 KB build, 65.5 KB baseline)
Bare modeOK
Provider requiredNO
Demo usedwritten from the component source API

Verdict

A focused counter with useful formatting, clean standalone mounting, and no responsive overflow in the tested demo. It is a reasonable fit when Framer Motion is already present, but the contrast failure, incomplete reduced-motion behavior, and lack of a manual trigger keep it from being a drop-in default.

Use it if

  • You need an on-mount count-up for dashboard totals, revenue, rates, or other compact statistics.
  • Your React app already uses Framer Motion and can absorb another client component without adding a new animation stack.
  • You want locale-aware number grouping with configurable prefix, suffix, decimal precision, and an optional accessible label.

Skip it if

  • You need the animation to begin on viewport entry or from an external trigger; disabling auto-start leaves the display at zero and exposes no start control.
  • You are minimizing client-side JavaScript or do not otherwise use Framer Motion, since the animation dependency adds substantial bundle weight.
  • You need reduced-motion handling to suppress every transition; the number jump is bypassed, but the wrapper still receives an entrance animation.
  • You cannot adjust the surrounding theme styles, because the tested presentation has a serious text contrast issue.

Install

Installation record for tripled-native-counter-up-carbon
Declared dependenciesframer-motion, react, clsx, tailwind-merge
Missing on installnone
Bare installbuilds and mounts without the shadcn-style helpers
Providerno provider required in the harness

In a non-shadcn project, add React, Framer Motion, clsx, and tailwind-merge; provide the aliased cn utility or replace it with your own class combiner. Configure Tailwind for tabular numerals, bold text, and visually hidden labels, preserve client-component handling, and review theme contrast before shipping.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/moumen-soliman/uitripled
License
MIT
Record published
2026-08-18

Alternatives

Other published entries for the stats pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.