Gallery 58 - Elastic grid that grows the hovered cellPro

A three-by-three grid whose row and column tracks expand around the hovered or focused tile, pushing neighbours aside and revealing its caption.

About Gallery 58

A three-by-three grid whose row and column tracks expand around the hovered or focused tile, pushing neighbours aside and revealing its caption.

Gallery 58 is a gallery block for React and Tailwind CSS, included in Chocolate UI Pro. It ships as 99 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.

  • elastic
  • grid-tracks
  • expand
  • hover

Installation

  1. Set up your project with npx chocolateui init and npx chocolateui login (see the installation guide).
  2. Run the Chocolate UI CLI:
npx chocolateui add gallery-58

Uses: reveal, utils.

Usage

import Gallery58 from "@/components/blocks/gallery-58"

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

FAQ