Components
Loading preview...
This 3D Stack Pagination component transforms traditional page navigation into a visually engaging, interactive experience. Each page number is represented as a 3D card in a stacked layout, creating a sense of depth and hierarchy. Hovering over a card lifts it forward, while clicking flips it to reveal the page’s content. For large numbers of pages, the component intelligently displays a limited visible stack with dots, mimicking standard pagination and preventing visual clutter. Prev/Next buttons allow seamless navigation through ranges, while the 3D hover and flip effects remain active for visible cards. Designed with shadcn UI components, it supports both dark and light themes, providing a sleek, modern, and highly interactive way to navigate content.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/stack-paginationimport StackPagination from "@/components/ui/stack-pagination";
export default function DemoOne() {
return <StackPagination />;
}