Does Gallery Work Index 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 Work Index

Agency work index as a table, with a preview image that follows the cursor over each row.

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

About Gallery Work Index

Gallery Work Index lists projects as a clean table of client, project, discipline and year. Hovering a row dims the others and floats a preview image that follows the cursor.

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

When to use Gallery Work Index

Design and branding studios.
Product and development agencies.
Freelance portfolios.
Architecture practices.

How it is built

The preview uses spring-smoothed motion values, rows work with keyboard focus, and reduced motion keeps the preview fixed.

It has no component dependencies beyond the shared utilities, so it is one file to read and change.

Goes well with Gallery Work Index

Gallery Work Index is part of 3 full templates, so you can see it in a finished page.

Northlane template: A studio site that reads like a manifesto.
Monograph template: A one-person portfolio that books calls.
Fieldwork template: Senior engineers, on retainer.
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 Filmstrip: A 35mm filmstrip React gallery with sprocket holes and a large frame view

Install Gallery Work Index

npx shadcn@latest add @charcoal/gallery-work-index

Gallery Work Index 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 Work Index 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 Work Index as Markdown