Hexagon Background for React

Q: How do I change the hexagon size?

size sets a hexagon's width in pixels (default 60). The height follows at about 1.155 times the width, the shape of a regular hexagon standing on a point.

Q: How do I change the gap between hexagons?

gap is the space between neighbouring outlines, in pixels (default 3), which draws each shared edge as a double line. gap={0} draws one line per edge, like a plain honeycomb.

Q: Can I change the colours?

glowColor and lineColor take any CSS colour, including theme variables; the defaults are your theme's --primary and --border. There's no fill between the outlines, so your background shows through, in light and dark.

A honeycomb of hexagon outlines behind your content where the hexagon under the pointer lights up and fades, leaving a trail. For React with Base UI, when a sci-fi, gaming or dashboard page should answer the pointer.

A honeycomb of hexagon outlines behind your content. The hexagon under the pointer lights up in your primary colour and fades out over a second, so moving across it leaves a short glowing trail, and two faint glows sit behind the honeycomb at rest. The outlines are one small SVG tile repeated across the box, and the trail reuses 16 hexagons, whatever the size of the page; nothing runs while the pointer rests.

Use it for a sci-fi, gaming or control-panel look. For the same trail on square cells, use Interactive Grid Pattern; on a tilted grid with pastel colours, Boxes. For hexagons that breathe colour on their own, use Honeycomb; for a still square grid, Grid Pattern. For more tech imagery with motion of its own, see Circuit and Laser Grid.

PreviewCode

Installation

Part of Pro

Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.

Get Pro Sign in

Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Usage

import { Hexagon } from "@/components/ui/hexagon";

Hexagon is a container: give it a size and put your content inside. The honeycomb sits behind the content, and the pointer lights hexagons under the content too.

<Hexagon className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Mission control, ready</h1>
</Hexagon>

For a backdrop behind the whole page, leave it empty and fix it under everything else:

<Hexagon className="fixed inset-0 -z-10" />

Demos

Size

size={36} and gap={2} make a denser honeycomb in a card-sized box, faded toward its bottom edge with fade="bottom". fade also takes top, none, and radial, the default, which fades the honeycomb toward every edge.

PreviewCode

Color

glowColor is the colour lit hexagons take and lineColor the outlines' colour, both any CSS colour. Here an amber glow with duration={2000}, so each hexagon takes two seconds to fade, on a scene that stays dark in both themes.

PreviewCode

Accessibility

The honeycomb is decoration: it's hidden from screen readers and never takes a click, so links and buttons on top keep working. Keep text on top in your foreground colour: a lit hexagon under muted text lowers its contrast for a moment. Nothing loops. Each lit hexagon rises over at least 100 ms instead of flashing on, its fill is capped (15% of the glow colour in light mode, 30% in dark), and it only lights where the pointer goes. With reduced motion the trail is off and the honeycomb stays still. On touch screens a tap lights the hexagon under the finger, and scrolling lights nothing.

FAQ

How do I change the hexagon size?

size sets a hexagon's width in pixels (default 60). The height follows at about 1.155 times the width, the shape of a regular hexagon standing on a point.

How do I change the gap between hexagons?

gap is the space between neighbouring outlines, in pixels (default 3), which draws each shared edge as a double line. gap={0} draws one line per edge, like a plain honeycomb.

How does the glow work?

The pointer's position is rounded to the nearest hexagon's centre, and one of 16 reusable hexagons moves there and replays its fade. duration sets how long it takes to fade, in milliseconds: 1000 by default, at least 700.

Can I change the colours?

glowColor and lineColor take any CSS colour, including theme variables; the defaults are your theme's --primary and --border. There's no fill between the outlines, so your background shows through, in light and dark.

Can I put content on top?

Yes, as children. Hexagons still light up under your content, and it stays clickable.

Is it heavy with so many hexagons?

No. The outlines aren't separate elements: one small SVG tile repeats as a mask over the line colour. Only the 16 trail hexagons are elements, and the pointer just moves one of them and restarts its fade, which the browser runs off the main thread.

API Reference

Hexagon

<div> data-slot="hexagon"

PropType

duration?number

How long a lit hexagon takes to fade out, in milliseconds. At least 700, so a hexagon always rises over 100 ms or more instead of flashing on.

Default: 1000

fade?"none" | "radial" | "top" | "bottom"

Where the honeycomb fades out: toward every edge from the centre (radial), toward the top, the bottom, or nowhere. It's a mask, so it fades into whatever is behind it.

Type: "none" | "radial" | "top" | "bottom"
Default: "radial"

gap?number

The space between neighbouring outlines, in pixels; 0 shares their edges. @default 3.