Grid Pattern

Display

SVG background pattern (dots, lines, cross, grid) as decorative layer, with animated particle field mode.

UnificadosParticle Field

Particle Field

Unificado

Particle Field — canvas animation with floating connected particles

Instalação via CLI

$ npx kikitocn add grid-pattern

Exemplo de uso

Grid PatternExample.tsx

import { GridPattern } from "@/components/ui/cn/grid-pattern/GridPattern";

export function GridPatternExample() {
  return (
    <GridPattern />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`type`	`'dots' \| 'lines' \| 'cross' \| 'grid'`	`'dots'`	Estilo do padrão
`size`	`number`	`24`	Espaçamento do padrão (px)
`color`	`string`	—	Cor das linhas/pontos
`opacity`	`number`	`0.15`	Opacidade do padrão
`children`	`React.ReactNode`	—	Conteúdo sobreposto ao padrão
`className`	`string`	—	Classes CSS extras
`style`	`React.CSSProperties`	—	Estilos inline

Voltar para Display

Carregando…