About
A number display that rolls to a new value when it changes, sliding up for increases and down for decreases so the direction is readable at a glance.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Number to your project and fits it to your theme.
Code
How Animated Number is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import * as React from "react";
import { MinusIcon, PlusIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import AnimatedNumber from "@/components/ui/animated-number";
export default function AnimatedNumberDemo() {
const [count, setCount] = React.useState(1208);
return (
<div className="flex items-center gap-4">
<Button
variant="outline"
size="icon"
aria-label="Decrease"
onClick={() => setCount((c) => c - 1)}
>
<MinusIcon />
</Button>
<div className="flex min-w-28 flex-col items-center">
<AnimatedNumber
value={count}
className="text-3xl font-semibold tracking-[-0.03em]"
/>
<span className="text-[13px] text-muted-foreground">orders</span>
</div>
<Button
variant="outline"
size="icon"
aria-label="Increase"
onClick={() => setCount((c) => c + 1)}
>
<PlusIcon />
</Button>
</div>
);
}
Dependencies
More by ikascom
View all
Launchpad Setup Checklist