Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Image Galleries, animated React component

Three image-first galleries in one install. Column Drift is an editorial wall whose columns drift up and down at their own pace, holds on hover and opens any frame in a lightbox. Reflow Mosaic puts five frames in one grid: pick any frame, or its number, and it springs into the lead spot while the others glide to new places without stretching. Focus Rail opens the focused panel wide while the rest fold in, moving on by itself with a progress line, holding on hover and taking the arrow keys.

  • Pro
  • Cards
  • Hover
  • Scroll

Reflow Mosaic

Props

PropTypeDefaultWhat it does
images{ src; alt; title; meta? }[]—The pictures. Reflow Mosaic uses the first five; Focus Rail works best with four to eight.
eyebrow / title / descriptionstring—The heading above the gallery (description on Column Drift and Focus Rail).
autoplaybooleantrueDrift, step or advance on its own. Off under reduced motion.
columns3 | 4 | 54Column Drift only: columns on wide screens. Phones show two.
speednumber44Column Drift only: seconds per loop.
intervalnumber—Reflow Mosaic and Focus Rail: milliseconds between autoplay steps.
onSelect / onChange(index) => void—Reflow Mosaic reports the picked frame; Focus Rail reports the open panel.
classNamestring—Classes for the section.

Add it to your project

  1. 1

    Set up your project once

    You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:

    npx shadcn@latest init -d

    Starting from nothing? The Quick Start walks through the whole thing.

  2. 2

    Connect the registry with your API key

    Image Galleries is a Pro item, so the CLI has to send your API key. Do this once per project:

    1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
    2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
      NEXUS_API_KEY=nxs_your_key_here
    3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
      "registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}

How Image Galleries works

An editorial wall of images in columns that drift continuously, alternating up and down. Hover a column Escape or the close button puts it back. Under reduced motion the columns stand still.

The source, the install command and the build prompt come with Pro.

More cards