Hexagon Pattern

Open in

"use client"

import { cn } from "@/lib/utils"
import { HexagonPattern } from "@/registry/magicui/hexagon-pattern"

export function HexagonPatternDemo() {
  return (
    <div className="bg-background relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border">
      <HexagonPattern
        hexagons={[
          [1, 1],
          [4, 4],
          [2, 2],
          [3, 4],
          [5, 4],
          [8, 2],
          [6, 3],
          [8, 5],
          [10, 10],
        ]}
        className={cn(
          "mask-[radial-gradient(420px_circle_at_center,white,transparent)]",
          "inset-0 skew-y-6"
        )}
      />
    </div>
  )
}

Open in

"use client"

import { cn } from "@/lib/utils"
import { HexagonPattern } from "@/registry/magicui/hexagon-pattern"

export function HexagonPatternLinearGradient() {
  return (
    <div className="bg-background relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border p-20">
      <HexagonPattern
        radius={40}
        x={-1}
        y={-1}
        className={cn(
          "[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)]"
        )}
      />
    </div>
  )
}

Open in

"use client"

import { HexagonPattern } from "@/registry/magicui/hexagon-pattern"

export function HexagonPatternDashed() {
  return (
    <div className="bg-background relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border p-20">
      <HexagonPattern radius={40} x={-1} y={-1} strokeDasharray="4 2" />
    </div>
  )
}

Open in

"use client"

import { HexagonPattern } from "@/registry/magicui/hexagon-pattern"

export function HexagonPatternSpacing() {
  return (
    <div className="bg-background relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border p-20">
      <HexagonPattern gap={20} radius={40} x={-1} y={-1} />
    </div>
  )
}

Prop	Type	Default	Description
`radius`	`number`	`40`	Radius from center to vertex for each hexagon
`gap`	`number`	`0`	Extra spacing between adjacent hexagons (pixels)
`x`	`number`	`-1`	X offset of the pattern origin
`y`	`number`	`-1`	Y offset of the pattern origin
`direction`	`"horizontal" \| "vertical"`	`"horizontal"`	`horizontal` — flat-top honeycomb; `vertical` — pointy-top honeycomb
`hexagons`	`Array<[col, row]>`	—	Grid coordinates of highlighted (filled) hexagons
`strokeDasharray`	`string`	`"0"`	SVG `stroke-dasharray` for outline hexagons in the repeating pattern
`className`	`string`	—	Additional classes on the root SVG (for example Tailwind color utilities)

Prop	Type	Default	Description
`radius`	`number`	`40`	Radius from center to vertex for each hexagon
`gap`	`number`	`0`	Extra spacing between adjacent hexagons (pixels)
`x`	`number`	`-1`	X offset of the pattern origin
`y`	`number`	`-1`	Y offset of the pattern origin
`direction`	`"horizontal" \| "vertical"`	`"horizontal"`	`horizontal` — flat-top honeycomb; `vertical` — pointy-top honeycomb
`hexagons`	`Array<[col, row]>`	—	Grid coordinates of highlighted (filled) hexagons
`strokeDasharray`	`string`	`"0"`	SVG `stroke-dasharray` for outline hexagons in the repeating pattern
`className`	`string`	—	Additional classes on the root SVG (for example Tailwind color utilities)

Hexagon Pattern

Installation

Examples

Linear Gradient

Dashed Stroke

Spacing

Usage

Props

HexagonPattern

Hexagon Pattern

Installation

Examples

Linear Gradient

Dashed Stroke

Spacing

Usage

Props

HexagonPattern