Components

Hexagons

Flat-top hexagon grid with customizable fill, border colors, hover highlight, ambient glow, and animated beam lines flowing along hex edges.

npx neonblade add hexagons

HEX GRID

Hover a cell. Watch the beams flow along the edges.

Props Configuration

Prop	Type	Default	Description
`hexColor`	`string`	`"transparent"`	Fill color of each hexagon cell.
`hexBorderColor`	`string`	`"rgba(0,243,255,0.25)"`	Stroke color for hexagon borders.
`hexSize`	`number`	`40`	Circumradius of each hexagon in pixels.
`borderWidth`	`number`	`1`	Stroke width of hexagon borders in pixels.
`hoverEffect`	`boolean`	`true`	Enable hover effects. Controls both fill and border hover reactivity.
`hoverColor`	`string`	`"rgba(0,243,255,0.15)"`	Fill color applied to the hovered hexagon. Set same as hexColor to disable fill change.
`hoverBorderColor`	`string`	`"#00f3ff"`	Border stroke color on the hovered hexagon. Set to "" to keep border unchanged on hover.
`borderGlowEffect`	`boolean`	`false`	Enable a neon shadow glow rendered around every hex border. Color can differ from hexBorderColor.
`borderGlowColor`	`string`	`"#00f3ff"`	Shadow/glow color for hex borders. Independent of the border stroke color.
`borderGlowRadius`	`number`	`10`	Blur radius (px) of the neon border glow.
`beamEffect`	`boolean`	`false`	Enable animated beams that travel along hex edges from top to bottom.
`beamColor`	`string`	`"#00f3ff"`	Color of the beam gradient body.
`beamGlowColor`	`string`	`"#00f3ff"`	Shadow glow color of the bright beam head.
`maxBeams`	`number`	`20`	Maximum number of concurrent beams on screen.
`beamSpeed`	`number`	`2`	Base travel speed of beams in px per frame.
`beamLength`	`number`	`80`	Tail length of each beam in pixels.
`beamSpawnProbability`	`number`	`0.08`	Probability per frame of spawning a new beam (0–1).
`overlay`	`boolean`	`false`	Add a radial-gradient dark vignette overlay on top of the grid.
`className`	`string`	`""`	Additional CSS class names for the root container.