Components
Loading preview...
This Sliding Pagination component provides a modern, interactive way to navigate through large sets of pages. Instead of instantly switching between page numbers, it features a smooth, spring-animated sliding underline that moves fluidly to the currently active page, giving a responsive and natural feel. For datasets with hundreds of pages, it automatically condenses the pagination using ellipsis/dots in the middle, ensuring the layout remains compact while still showing nearby pages for context. Built with Shadcn UI and Framer Motion, it is fully responsive, works seamlessly with both dark and light themes, and allows users to quickly and visually understand their current position in a multi-page interface. The component is also highly customizable, making it ideal for dashboards, blogs, or any application that requires elegant pagination.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/sliding-pagination"use client";
import SlidingPagination from "@/components/ui/sliding-pagination";
import { useState } from "react"
export default function DemoPagination() {
const [page, setPage] = useState(1)
return (
<div className="mt-10">
<SlidingPagination
totalPages={120}
currentPage={page}
onPageChange={setPage}
maxVisiblePages={9} // optional, number of visible buttons
/>
</div>
)
}