Skip to content
Pinky UI

collections

Accordion Gallery

Rows expand into a masked media gallery and caption layer while retaining the title row as the object identity.

  • collections
  • gallery
  • accordion
  • media
  • continuity
Related pattern

Media-led expansion with a gallery region; richer than a generic accordion row.

Live preview

  • Chapter one

    Chapter one

    Project chapter

    Caption

    Media and metadata remain one object.

    One active surface, no hidden second page.

  • Chapter two

    Chapter two

    Project chapter

    Caption

    Media and metadata remain one object.

    One active surface, no hidden second page.

  • Chapter three

    Chapter three

    Project chapter

    Caption

    Media and metadata remain one object.

    One active surface, no hidden second page.

Quick usage

usage
import { AccordionGallery } from "@pinky-ui/systems";

<AccordionGallery items={stories} label="Gallery stories" />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
itemsAccordionGalleryItem[]—Media-led rows with captions and optional supporting content.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • One media region mounts for the open row; closed rows remain compact.
  • Reduced motion resolves the gallery region without a travel dependency.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Editorial galleries where each title needs a larger media reading moment

When not to use

  • Generic FAQ disclosure or data tables

Skill

Purpose

Use a media-led accordion when each title row owns a larger masked gallery region and caption layer. It is more spatially intentional than generic FAQ disclosure.

Interaction anatomy

  • The title row remains the identity and control.
  • Opening inserts a media region in normal document flow.
  • Caption, metadata and supporting content stay attached to that media.

Good for

Editorial galleries, process studies, project chapters and article media collections.

Avoid

Generic settings, data tables or a gallery where every image must remain visible simultaneously.

Usage

tsx
<AccordionGallery
  label="Project chapters"
  items={chapters.map((chapter) => ({
    id: chapter.id,
    title: chapter.title,
    meta: chapter.year,
    description: chapter.summary,
    media: <ChapterMedia chapter={chapter} />,
    content: <ChapterCaption chapter={chapter} />,
  }))}
/>

Tune

Use one open row for a reading sequence and keep media geometry stable. The title should still make sense when the gallery is closed.

Accessibility and reduced motion

Use aria-expanded and aria-controls on each row button with a labelled region for the media. Reduced motion removes height and clip travel while preserving the same content.

Open this skill on its own page