Honeycomb Background for React

Q: How do I change the cell size?

Set cellSize, a cell's width from flat side to flat side in pixels (30 by default). 18 to 24 reads as a fine texture, 40 to 60 as a chunky comb.

Q: What does fade do?

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

A quiet honeycomb of hex cells in tones of your theme, clumped in patches that keep shifting, with a few cells glowing softly in your accent colour. For React with Base UI, when a product, developer-tool or SaaS hero wants a tactile texture that feels alive.

A honeycomb that breathes: thousands of hex cells in quiet tones of your theme, clumped in patches that shift slowly, outlined in your border colour, with a few cells that glow softly in your primary colour and fade again. It fades out toward the edges, tone on tone, so it reads as texture rather than pattern. The cells are static SVG tiles drawn when the page renders; the tone layers fade in and out at different speeds in CSS, so each cell changes on its own schedule while nothing runs in script.

Use it when a hero wants texture and a little life rather than motion. For an outlined hex lattice that glows under the pointer, use Hexagon; for square cells changing shade, Flickering Grid; for irregular cells, Voronoi; for a still lattice, Grid Pattern; for cells that react to the pointer, Interactive Grid Pattern.

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 { Honeycomb } from "@/components/ui/honeycomb";

Honeycomb is a container: give it a size and put your content inside. The comb fills the box behind the content and fades out toward the edges.

<Honeycomb className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Built cell by cell</h1>
</Honeycomb>

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

<Honeycomb className="fixed inset-0 -z-10" intensity="subtle" />

Demos

Honey

colors takes five CSS colours from dark to light, here a honey ramp from dark amber to cream; lineColor darkens the outlines and accentColor makes the glowing cells cream. fade="none" fills the whole box.

PreviewCode

Fine

cellSize={18} makes smaller cells and intensity="subtle" calms the patches, a texture for a card header.

PreviewCode

Accessibility

The comb is decoration: it's hidden from screen readers and lets every click through to the content. With reduced motion the tone layers stop where they are, so it stays a still, clumped comb with its glowing cells. Nothing flashes: each layer takes at least 7 seconds to fade in or out. By default the cells are faint tints of your foreground colour, so text on top keeps its contrast in light and dark; with strong colors such as the honey ramp, put text on a panel.

FAQ

How do I change the cell size?

Set cellSize, a cell's width from flat side to flat side in pixels (30 by default). 18 to 24 reads as a fine texture, 40 to 60 as a chunky comb.

Can it use my brand colours?

By default it already does: the cells are tints of your foreground and muted colours, the outlines your border colour, the glow your primary colour. colors takes five CSS colours from dark to light for a coloured comb (the middle one is the base, the others the patches), lineColor sets the outlines and accentColor the glow. You can also set --honeycomb-color-1 to --honeycomb-color-5, --honeycomb-line and --honeycomb-accent from CSS.

What does fade do?

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

How does it stay light with so many cells?

Nothing is drawn per frame. The cells are a few small tiles drawn once at render, repeated by the browser, and the layers only fade, on the GPU.

Does the pattern repeat?

The shade tiles are 5, 7 and 3 cells wide, so their mix lines up again only every 105 columns; the glowing cells sit on two much larger tiles of their own sizes, so they never form a grid. seed gives other patches.