# Stack Pagination

> 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.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@ruixen.ui/components/stack-pagination

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/stack-pagination?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt