NewAI SDK Agents

Grid Beam

PreviousNext

Animated canvas beams on a grid with palette presets, optional SVG dividers, and a headless useGridBeam hook for custom layouts.

GridBeam

Soft glowing beams along grid dividers

Composed GridBeam

Project
Status
Lead
Progress
Quantum Core
Active
Aria Chen
78%
Nebula API
Review
Kai Tanaka
92%
Void Engine
Active
Zara Osei
45%
Pulse Sync
Paused
Lev Petrov
61%

Headless useGridBeam + Dividers / Canvas / Content

Latency12ms-3ms
Throughput2.4k+180
Uptime99.97%+0.02%
Requests847k+12k
Errors0.03%-0.01%
Cache Hit94.2%+1.8%

Installation

pnpm dlx shadcn@latest add https://cult-ui.com/r/grid-beam.json

Usage

Use GridBeam for the full stack (dividers, animated canvas, content slot). For custom markup, call useGridBeam and place GridBeamDividers, GridBeamCanvas, and GridBeamContent yourself.

import {
  GridBeam,
  GridBeamCanvas,
  GridBeamContent,
  GridBeamDividers,
  useGridBeam,
} from "@/components/ui/grid-beam"
 
export function BeamTable() {
  return (
    <GridBeam
      rows={4}
      cols={4}
      colorVariant="colorful"
      theme="dark"
      active
      borderRadius={12}
      className="min-h-[280px] rounded-xl border border-border bg-card/40"
    >
      <div className="grid h-full grid-cols-4 grid-rows-4 p-4 text-sm">
        {/* Your cells */}
      </div>
    </GridBeam>
  )
}
function HeadlessExample() {
  const { canvasRef, rows, cols } = useGridBeam({
    rows: 2,
    cols: 3,
    colorVariant: "ocean",
    theme: "light",
    active: true,
  })
 
  return (
    <div className="relative overflow-hidden rounded-xl border">
      <GridBeamDividers cols={cols} rows={rows} />
      <GridBeamCanvas borderRadius={12} ref={canvasRef} />
      <GridBeamContent>
        {/* Your layout */}
      </GridBeamContent>
    </div>
  )
}

colorVariant accepts colorful, mono, ocean, or sunset. Pass theme as "light" or "dark" (often from your app theme). Toggle active to run or pause the beam; optional breathe, duration, and strength tune the motion.