Expand Gallery

Free

A row of tall panels where the hovered or focused one widens to show its title and caption.

Customize

Expanded ratio4×

Height340px

Installation

npx shadcn@latest add https://ui.mekaigames.com/r/expand-gallery.json

Works in any project set up with the shadcn CLI.

Install the dependency.
npm install motion
Copy the code from the Code tab into components/ui/expand-gallery.tsx.

Usage

import { ExpandGallery } from "@/components/ui/expand-gallery";

<ExpandGallery
  height={360}
  items={chapters.map((c) => ({ title: c.title, caption: c.blurb, src: c.art, alt: c.title }))}
/>

Props

7 properties

Property	Type	Default	Description
items	{ title, caption?, eyebrow?, src?, alt?, content? }[]	—	Panels. content is the background; pass src and alt for an image.
expandedRatio	number	4	How many times wider the open panel is than a closed one.
height	number	380	Row height in pixels. Narrow containers stack the panels and grow a little taller.
defaultIndex	number	0	Panel that stays open while nothing is hovered or focused.
onSelect	(index: number) => void	—	Called when a panel is clicked or chosen with Enter. The panel also stays open.
label	string	"Gallery"	Accessible name of the gallery.
className	string	—	Extra classes for the wrapper.

Dependencies: motion