# Sliding Puzzle Image Gallery

> Sliding puzzle image gallery for React and Tailwind CSS (shadcn/ui): each photo arrives shuffled into a 15-puzzle and solves itself one sliding tile at a time, then the last piece drops in, the seams close and a sheen sweeps across the finished picture. It is built to hold attention: an unfinished picture keeps the eye on it until the last tile clicks into place, and every new photo shows up as scrambled pieces first, so visitors stay to see what it becomes. Visitors can take over: click a tile in line with the gap or use the arrow keys, and the board solves itself again once they stop. Thumbnails, prev and next, a move counter, 3x3 to 6x6 grids, optional tile numbers, details beside the board on wide screens and folded into a compact bar under it on narrow ones, and a reduced-motion fallback. Use it where one image should hold attention: hero sections, product reveals and portfolio highlights.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Gallery, Image Gallery, Game, Interactive
- Live preview: https://21st.dev/@dhxwhy/components/sliding-puzzle-gallery

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/sliding-puzzle-gallery?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 · More like this: https://21st.dev/community/components/s/gallery.md