Componentdata-display

Hexagon Pattern

Stable

A background hexagon pattern made with SVGs, fully customizable using Tailwind CSS.

Instalação

npx up-web-ds add hexagon-pattern

Preview

Default

Vertical

Highlighted

Dashed

All states

Default

Vertical

Highlighted

Dashed

Usage

@/components/hexagon-pattern

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

Hexagon Pattern

<div className="relative h-72 w-full max-w-4xl overflow-hidden rounded-xl border bg-background">
  <HexagonPattern />
</div>

Props

Props de HexagonPattern
Prop	Type	Default	Description
className	`string`	sem valor padrão
direction	`"horizontal" \| "vertical"`	`"horizontal"`	Controls the orientation of the hexagons. - `"horizontal"` — flat-top hexagons tiled in a horizontal honeycomb grid. - `"vertical"` — pointy-top hexagons tiled in a vertical honeycomb grid.
gap	`number`	`0`	Spacing in pixels between adjacent hexagons. The tile grows by this amount while the visual radius stays fixed, so the gap is evenly distributed on all sides of each hexagon.
hexagons	`[col: number, row: number][]`	sem valor padrão	Array of [col, row] coordinates for hexagons that should be highlighted (filled) on top of the repeating pattern — mirrors the `squares` prop of GridPattern.
radius	`number`	`40`	The radius of each hexagon (center to vertex).
strokeDasharray	`string`	`"0"`	SVG stroke-dasharray applied to each hexagon outline.
x	`number`	`-1`	Offset applied to the pattern origin on the x-axis.
y	`number`	`-1`	Offset applied to the pattern origin on the y-axis.

Estende HexagonPatternProps. Aceita também os atributos padrão de um elemento React (482 não listados).

Metadata

Notas de acessibilidade

Verificado em hexagon-pattern.test.tsx e tests/e2e/hexagon-pattern.spec.ts no Chromium desktop e mobile, em light e dark. O padrão é estritamente decorativo: o SVG raiz é aria-hidden, pointer-events-none e não entra na sequência de tabulação, então leitor de tela, teclado e toque permanecem no conteúdo que a superfície acompanha. O componente não declara animação nem transição; sob prefers-reduced-motion: reduce a geometria e a aparência permanecem estáticas. As orientações horizontal e vertical, os destaques e o traço interrompido foram medidos no navegador sem overflow horizontal.

Classificação

Layer: Component
Domínio: Application
Categoria: data-display
Status: Stable

Origem e distribuição

Fonte: magic registry / hexagon-pattern
Licença: MIT
URL: https://magicui.design/r/hexagon-pattern.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Dependências

Pacotes: Nenhuma
Ícones: Nenhum
Construído sobre: Nenhum
Usado por: Nenhum ainda