Pinned Horizontal Gallery
NewPro
A section that pins while vertical scrolling slides a row of panels sideways, with a progress bar. Small screens and reduced motion get native sideways scrolling.
Customize
440px
1×
Progress bar
Mode
#ff784f
When to use it
- Story chapters or roadmap steps on a game or product page
- Case studies that people read one panel at a time
- Feature tours between two regular sections of a landing page
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 333
Installation
Pinned Horizontal Gallery is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy pinned-horizontal-gallery.tsx into components/ui and run npm install motion.
Usage
import { PinnedHorizontalGallery } from "@/components/ui/pinned-horizontal-gallery";
<PinnedHorizontalGallery
label="Chapters"
header={<h2 className="p-6 text-3xl font-black">Five chapters</h2>}
items={chapters.map((c) => ({ id: c.id, title: c.title, caption: c.blurb, src: c.art, alt: c.title }))}
/>Props
17 properties| Property | Type | Default | Description |
|---|---|---|---|
| items | { id?, title?, eyebrow?, caption?, src?, alt?, content? }[] | — | Panels. content is the background; pass src and alt for an image. |
| header | ReactNode | — | Anything that should stay put above the row, such as a heading. |
| panelWidth | number | 560 | Panel width in pixels. A panel never takes more than 85% of the section. |
| gap | number | 20 | Space between panels in pixels. |
| padding | number | 24 | Space before the first panel and after the last, in pixels. |
| height | number | string | "100svh" | Height of the pinned area: pixels or any CSS length. |
| nativeHeight | number | 420 | Panel height in the native scroll fallback, in pixels. |
| top | number | 0 | Distance from the top of the scroll area where the section pins, in pixels. Use it to clear a fixed header. |
| speed | number | 1 | Vertical scroll per pixel of sideways travel. 2 takes twice the scrolling. |
| parallax | number | 0.08 | How far the art drifts inside its panel, 0 to 0.3. |
| minWidth | number | 720 | Section width in pixels below which it uses native sideways scrolling. |
| mode | "auto" | "native" | "auto" | auto pins when there is room and motion is allowed. native always scrolls sideways. |
| showProgress | boolean | true | Progress bar and panel counter. |
| color | string | "#ff784f" | Color of the progress bar. |
| scrollContainerRef | RefObject<HTMLElement | null> | — | The element that scrolls. Defaults to the page. No element between it and the section may hide overflow, or pinning stops working. |
| label | string | "Gallery" | Accessible name of the section. |
| className | string | — | Extra classes for the section. |
Dependencies: motion