Components
Loading preview...
The Animated Number Flip component brings a sleek, odometer-like animation to number changes, making dashboards, reports, or pagination feel more dynamic and engaging. Instead of numbers simply updating, each value flips with a smooth slot-machine style motion that immediately draws attention to the change. Built with Framer Motion and styled using shadcn/ui, it integrates naturally into both dark and light themes while maintaining a professional look. Its responsive and reusable design makes it ideal for showing page numbers, key performance metrics, or live data updates in any modern web application.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/animated-number-flip"use client";
import { useState } from "react";
import AnimatedNumberFlip from "@/components/ui/animated-number-flip";
import { Button } from "@/components/ui/button"
export default function Demo() {
const [page, setPage] = useState(1);
return (
<div className="flex flex-col items-center gap-6 py-20">
<AnimatedNumberFlip value={page} />
<div className="flex gap-4">
<Button onClick={() => setPage((p) => Math.max(1, p - 1))}>Prev</Button>
<Button onClick={() => setPage((p) => p + 1)}>Next</Button>
</div>
</div>
)
}