Components
Loading preview...
This Wheel Pagination component provides a modern, interactive way to navigate through multiple pages. Unlike traditional numeric pagination, it shows a range of page numbers at once, highlighting the active page with scale and color, making it immediately recognizable. Users can scroll over the pagination area with the mouse wheel to move between pages, while previous/next arrows offer an alternative click-based navigation. The component intelligently keeps the active page centered within the visible range and supports a customizable number of visible pages, ensuring usability even with dozens or hundreds of pages. Fully compatible with light and dark themes, it also includes an onChange callback, allowing parent components to track the active page, making it ideal for dashboards, data-heavy applications, and modern UI interfaces that require a tactile, visually engaging pagination experience.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/wheel-paginationimport WheelPagination from "@/components/ui/wheel-pagination";
export default function DemoOne() {
const handlePageChange = (page: number) => {
console.log("Active Page:", page + 1);
};
return (
<WheelPagination
totalPages={50} // Total number of pages
visibleCount={7} // Number of pages visible at once
className="bg-white dark:bg-gray-800"
onChange={handlePageChange} // Callback when page changes
/>
);
}