Does Gallery Filmstrip 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 Filmstrip

A strip of 35mm film with sprocket holes and frame numbers, plus a large view of the chosen frame.

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

About Gallery Filmstrip

Gallery Filmstrip shows photos as a strip of film, sprocket holes and frame numbers included, with the chosen frame large above it and its caption and exposure in the corner.

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 Filmstrip

Film photographers.
Tour diaries and travel stories.
Bands and creators.
Brand campaigns with a retro feel.

How it is built

The strip scrolls sideways on small screens, frames are tabs with arrow buttons, and each frame takes an image, caption and meta line.

It is composed from Button, 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 Filmstrip

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

Hartwell template: Let the pictures do the talking.
Halden template: A band site: album, tour, merch.
Gallery Masonry: A React photo gallery with tag filters, masonry grid and a full-size dialog
Gallery Accordion: A React image accordion gallery where slim panels open wide on hover
Gallery Work Index: A React agency work index table with a cursor-following preview image
Button: An animated React button with six variants, spring press feedback and a width-stable loading state

Install Gallery Filmstrip

npx shadcn@latest add @charcoal/gallery-filmstrip

Gallery Filmstrip 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 Filmstrip 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

Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.

Gallery Filmstrip as Markdown