React Hexagon Background

Hexagons tessellating across the screen with a cyan glow on hover—it's got that sci-fi dashboard vibe you see in games and tech interfaces. The hexagon shape is done with CSS clip-path, which is pretty efficient. When you hover over a cell, it glows instantly but fades out slowly, so you get this nice trailing effect as you move your cursor around. The whole grid scales responsively with the viewport. Good for anything that needs that futuristic, technical feel.

React Hexagon Background preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/hexagon.json

npx shadcn@latest add https://www.shadcn.io/r/hexagon.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/hexagon.json

bunx shadcn@latest add https://www.shadcn.io/r/hexagon.json

Related Components

FAQ