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

Destinations as an image accordion: hover a slim panel and it opens wide with its details.

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

About Gallery Accordion

Gallery Accordion lines up tall photo panels side by side. Hover or focus one and it opens wide with its title and details while the others narrow, which suits destinations, projects and rooms.

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

When to use Gallery Accordion

Travel and outdoor companies.
Architecture projects.
Restaurants, spas and coworking rooms.
Festival programmes.

How it is built

Built on Image Accordion, with each panel taking an image, title and body. On phones it stacks into cards.

It is composed from Image Accordion, 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 Accordion

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

Northlight template: Showreel first, everything else second.
Plinth template: Buildings, told like stories.
Juniper template: Wood fire, small plates, booked tables.
Timberline template: Cabins within three hours of the city.
Keyhaven template: Homes, neighbourhoods and the people who know them.
Stillwater template: Treatments, booked in a breath.
Reel template: Ten days, ninety films.
Trailhead template: Guided hikes, every weekend.
Hive template: Desks, rooms and people worth sitting near.
Gallery Masonry: A React photo gallery with tag filters, masonry grid and a full-size dialog
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
Image Accordion: A React image accordion: the hovered panel expands to reveal its caption

Install Gallery Accordion

npx shadcn@latest add @charcoal/gallery-accordion

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

Image Accordion: Image panels side by side; the hovered or focused one expands and reveals its caption.

Gallery Accordion as Markdown