Hexagon Grid

An interlocking hexagon grid gallery built with CSS clip-path, precise math using CSS variables, and interactive hover effects. Perfect for portfolios and photo galleries.

Showcase

River Canyon

Nature Photography

Mountain Peak

Expedition 2026

Alpine Fog

Winter Series

Coastal Waves

Ocean View

Wilderness

Wildlife Reserve

Deep Forest

Canopy Exploration

Aurora

Night Sky

The Journey

Urban Transit

Flight

Aerial Photography

Cozy Mornings

Portrait Series

Barren Lands

Desert Textures

Winter Solstice

Fashion Editorial

Undergrowth

Macro Nature

Concrete Oasis

Cityscapes

Installation

npx shadcn-extras@latest add hexagon-grid

Usage


import { HexGrid, Hexagon } from '@/components/core/hexagon-grid';
export function Example() {
  return (
    <HexGrid size={220} gap={16}>
      <Hexagon imageSrc='/example.jpg' title='Title' subtitle='Subtitle' />
      {/* ... */}
    </HexGrid>
  );
}

Props

HexGrid Props

Prop	Type	Default	Description
`size`	`number`	`220`	The width of the individual hexagon elements in pixels.
`gap`	`number`	`16`	The spacing gap between the hexagon elements in pixels.

Hexagon Props

Accepts standard HTML div props plus:

Prop	Type	Default	Description
`imageSrc`	`string`	required	The source URL of the image.
`imageAlt`	`string`	`'Hexagon image'`	The alt text of the image.
`title`	`React.ReactNode`	`undefined`	Optional title to display inside the hexagon caption overlay.
`subtitle`	`React.ReactNode`	`undefined`	Optional subtitle to display inside the hexagon caption overlay.