Does Gallery Masonry work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Gallery Masonry

Photo gallery with tag filters over a masonry grid and a dialog for the full-size image.

Type: Gallery section
Styles: Dark, Minimal
Licence: Charcoal UI Pro

About Gallery Masonry

Gallery Masonry shows a portfolio in columns of different heights, with tag filters above and a dialog that opens the full image when a photo is chosen.

It is a full-width gallery section for React and Tailwind CSS 4, in a dark and minimal style. Preview it at any width above, then install it with one command.

When to use Gallery Masonry

Photographers and studios.
Event photo galleries.
Community and AI image showcases.
Portfolio sites.

How it is built

Uses Masonry and Dialog. Photos take a source, height, title and tag, and counts per tag are calculated.

It is composed from Dialog, Masonry, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with Gallery Masonry

Gallery Masonry is part of 5 full templates, so you can see it in a finished page.

Lattice template: Generate, keep, sell.
Hartwell template: Let the pictures do the talking.
Parallel template: Movement is the message.
Signal template: Sell out a conference.
Gather template: Monthly meetups, sorted.
Gallery Accordion: A React image accordion gallery where slim panels open wide on hover
Gallery Filmstrip: A 35mm filmstrip React gallery with sprocket holes and a large frame view
Gallery Work Index: A React agency work index table with a cursor-following preview image
Dialog: An animated React dialog on the native dialog element, with blur and scale transitions
Masonry: An animated React masonry grid balanced by height with layout transitions

Install Gallery Masonry

npx shadcn@latest add @charcoal/gallery-masonry

Gallery Masonry is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does Gallery Masonry work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Built from

Dialog: Built on the native <dialog> element for focus trapping and Escape, with a blur-and-scale entrance and exit.
Masonry: A masonry grid balanced by height: each item goes into the shortest column, items rise in on first paint, and layout animation carries them to new places when the list or column count changes.

Gallery Masonry as Markdown