# Morphing Page Dots

> The Morphing Page Dots component is a sleek, interactive pagination indicator that replaces traditional numbers with animated dots. Instead of static circles, the active dot dynamically morphs into a pill shape, creating a smooth, modern transition that clearly highlights the current page. A subtle ripple effect enhances the interaction whenever the page changes, adding polish without overwhelming the UI. All inactive dots remain visible in a muted tone, ensuring clarity and accessibility across light and dark themes. Navigation is handled through clean Lucide arrow icons, giving users intuitive control without bulky buttons. This component is especially well-suited for carousels, sliders, or any multi-page content where a minimal yet visually engaging pagination experience is desired.

- 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/morphing-page-dots

## Install

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