# Flipbook Scroll Image Gallery – Page Flip Photo Book

> Flipbook Scroll Image Gallery for React and Tailwind CSS (shadcn/ui): a scroll-driven gallery shaped like an open photo book whose pages turn as you scroll. It is built to make scrolling feel like leafing through a real travel journal, so a portfolio is read page by page. Use it for photo portfolios, travel journals, lookbooks and story-driven hero sections. Every leaf follows the scroll on spring physics: a slow scroll is one page flip at a time, a fast one riffles several leaves through the air, and each page bends, shades and casts a shadow. Click a page to turn forward or back, drag a corner past 45 degrees or throw it, or use the arrow, Home, End and Page keys. Pass progress or page with onPageChange for controlled use; autoplay, interval and labels are props. A polite live caption, reduced motion, a one-page phone layout and light and dark themes are built in. The included demo is a fictional summer travel journal you page through as you scroll or flick the mouse wheel over the book, and makes no requests beyond image loads. Requires React only, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Gallery, Image Gallery, Scroll, Animation, 3D
- Live preview: https://21st.dev/@dhxwhy/components/flipbook-scroll-gallery

## Install

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