Copy
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>
  );
}

Copy
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>
  );
}