Hexagon Pattern

PreviewCode

@/demos/HexagonPatternDemo.tsx

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

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

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/hexagon-pattern

bun

bunx shadcn@latest add @magicui-solid/hexagon-pattern

yarn

yarn dlx shadcn@latest add @magicui-solid/hexagon-pattern

npm

npx shadcn@latest add @magicui-solid/hexagon-pattern

Examples

Linear Gradient

PreviewCode

@/demos/HexagonPatternLinearGradient.tsx

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

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

Dashed Stroke

PreviewCode

@/demos/HexagonPatternDashed.tsx

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

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

Spacing

PreviewCode

@/demos/HexagonPatternSpacing.tsx

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

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

Usage

import { HexagonPattern } from '@/components/magicui/hexagon-pattern'

<div className="relative h-[500px] w-full overflow-hidden">
  <HexagonPattern />
</div>

Props

HexagonPattern

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
class	string	—	Additional classes on the root SVG (for example Tailwind color utilities)

Also accepts standard SVG attributes on the root <svg> (for example aria-hidden, role) where applicable.

Credits

• Credit to @chishiyac

Original:

magicui.design/docs/components/hexagon-pattern