# Grid pattern

> A technical grid background where a few cells gently light up.

Component · Pro · https://lodeui.com/components/grid-pattern

## When to use

- Section and hero backgrounds with a technical, precise feel.

## When not to use

- Behind busy imagery.

## Installation

```bash
npx shadcn@latest add @lode/grid-pattern
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { GridPattern } from "@/components/ui/grid-pattern";

<section className="relative overflow-hidden">
  <GridPattern size={40} flicker={10} />
  <h2 className="relative">Precise by default</h2>
</section>
```

## API reference

### GridPattern

An SVG grid that fills its parent, with a few softly glowing cells.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| size | `number` | `40` | Cell size in px. |
| flicker | `number` | `10` | Glowing cells. |
| fade | `"radial" \| "bottom" \| "none"` | `"radial"` | Edge fade. |
| color | `string` | `var(--brand)` | Glow color. |

## Accessibility

- Decorative and aria-hidden; no glow under reduced motion.

## Motion

- Cells fade in and out on staggered timers.

## Responsive behavior

- Fills any size; the grid stays crisp.

## Performance

- A single SVG pattern plus a handful of animated rects.

## Notes for AI

- Uses var(--grid-line) for lines when your theme defines it.

## Related

- [Particles](https://lodeui.com/components/particles) — A drifting constellation of dots on canvas that moves away from the pointer.
- [Hero section](https://lodeui.com/blocks/hero-section) — Launch hero with badge, flowing gradient headline, two actions and a live product preview on a glowing grid.
- [Aurora background](https://lodeui.com/components/aurora-background) — Slow drifting northern-lights glow behind any section.