Accordion Gallery

New

Image panels that open wide under the pointer

$ npx @hritik-sharmaa/repeat-ui add grid-accordion-gallery
Category
Grid
Added
Nov 1, 2026
Version
1.0.0
Packages
None
Flavors
TS · JS · Tailwind · CSS
Live preview
01

Mountain Vista

Above the clouds

Customize
380px
8px
20px
4×
import GridAccordionGallery from "@/components/repeat-ui/grid-accordion-gallery/preview";

<GridAccordionGallery items={items} />

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add grid-accordion-gallery --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/grid-accordion-gallery/.

    import GridAccordionGallery from "@/components/repeat-ui/grid-accordion-gallery/preview";

export default function Page() {
  return <GridAccordionGallery />;
}

Props

PropTypeDefaultDescription
itemsGalleryItem[]-{ image, title, subtitle? }.
heightnumber380Height in pixels.
gapnumber8Space between panels, in pixels.
radiusnumber20Panel corner radius in pixels.
expandRationumber4How much wider the open panel is than the others.
defaultIndexnumber0The panel open at first.
classNamestring""Extra classes for the root element.

More grid

See all
2 Column Bento GridDynamic grid layout with animated items
3 Column Bento GridMasonry style grid with variable item heights
Pinterest GridPhoto gallery grid with lightbox effect