# GooeyPagination

> This Liquid Gooey Smart Pagination component elevates traditional pagination into an interactive, visually engaging experience. Each page is represented by a dot, with the active dot morphing into a gooey blob that smoothly connects to its neighboring dots, creating an organic, fluid motion as users navigate. When the total number of pages is large, the component intelligently inserts ellipsis (...) to indicate skipped pages, keeping the pagination compact and readable. Navigation arrows allow quick movement between pages, while the component remains fully light and dark theme compatible. Built with ShadCN UI and Framer Motion, this pagination transforms a simple UI element into a playful, futuristic interface element, perfect for dashboards, creative apps, or any modern web experience where micro-interactions matter.

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

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/gooey-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