Boxes

Interactive isometric grid with vibrant hover effects. This React component creates stunning 3D-perspective layouts perfect for Next.js applications requiring dynamic visual engagement and professional depth.

Framer Motion

Loading component...

'use client';import React from "react";import { motion } from "framer-motion";import { cn } from "@/lib/utils";export interface BoxesProps {  className?: string;}export const Boxes = ({ className, ...rest }: BoxesProps) => {  const rows = new Array(150).fill(1);  const cols = new Array(100).fill(1);    // Using direct color values instead of CSS variables  const colors = [    "rgb(125 211 252)", // sky-300    "rgb(249 168 212)", // pink-300    "rgb(134 239 172)", // green-300    "rgb(253 224 71)",  // yellow-300    "rgb(252 165 165)", // red-300    "rgb(216 180 254)", // purple-300    "rgb(147 197 253)", // blue-300    "rgb(165 180 252)", // indigo-300    "rgb(196 181 253)", // violet-300  ];  const getRandomColor = () => {    return colors[Math.floor(Math.random() * colors.length)];  };  return (    <div      style={{        transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`,      }}      className={cn(        "absolute left-1/4 p-4 -top-1/4 flex -translate-x-1/2 -translate-y-1/2 w-full h-full z-0",        className      )}      {...rest}    >      {rows.map((_, i) => (        <motion.div          key={`row` + i}          className="w-16 h-8 border-l border-slate-700 relative"        >          {cols.map((_, j) => (            <motion.div              whileHover={{                backgroundColor: getRandomColor(),                transition: { duration: 0 },              }}              animate={{                transition: { duration: 2 },              }}              key={`col` + j}              className="w-16 h-8 border-r border-t border-slate-700 relative"            >              {j % 2 === 0 && i % 2 === 0 ? (                <svg                  xmlns="http://www.w3.org/2000/svg"                  fill="none"                  viewBox="0 0 24 24"                  strokeWidth="1.5"                  stroke="currentColor"                  className="absolute h-6 w-10 -top-[14px] -left-[22px] text-slate-700 stroke-[1px] pointer-events-none"                >                  <path                    strokeLinecap="round"                    strokeLinejoin="round"                    d="M12 6v12m6-6H6"                  />                </svg>              ) : null}            </motion.div>          ))}        </motion.div>      ))}    </div>  );};

Installation

npx shadcn@latest add https://www.shadcn.io/registry/background-boxes.json

npx shadcn@latest add https://www.shadcn.io/registry/background-boxes.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/background-boxes.json

bunx shadcn@latest add https://www.shadcn.io/registry/background-boxes.json

Features

3D isometric grid with CSS transforms creating depth perspective
Interactive hover effects with instant color changes on 15,000+ cells
Nine color palette including sky, pink, green, yellow, red, purple, blue, indigo, violet
Performance optimized using Framer Motion with zero-duration transitions
Plus icon markers on alternating grid positions for visual structure
TypeScript support with complete interface definitions
Overlay compatible designed to work with content layered on top
Responsive scaling adapts to different container sizes

Examples

Dark Variant

Loading component...

'use client';import React from "react";import { motion } from "framer-motion";import { cn } from "@/lib/utils";export interface BoxesProps {  className?: string;}export const Boxes = ({ className, ...rest }: BoxesProps) => {  const rows = new Array(150).fill(1);  const cols = new Array(100).fill(1);    // Using direct color values instead of CSS variables  const colors = [    "rgb(125 211 252)", // sky-300    "rgb(249 168 212)", // pink-300    "rgb(134 239 172)", // green-300    "rgb(253 224 71)",  // yellow-300    "rgb(252 165 165)", // red-300    "rgb(216 180 254)", // purple-300    "rgb(147 197 253)", // blue-300    "rgb(165 180 252)", // indigo-300    "rgb(196 181 253)", // violet-300  ];  const getRandomColor = () => {    return colors[Math.floor(Math.random() * colors.length)];  };  return (    <div      style={{        transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`,      }}      className={cn(        "absolute left-1/4 p-4 -top-1/4 flex -translate-x-1/2 -translate-y-1/2 w-full h-full z-0",        className      )}      {...rest}    >      {rows.map((_, i) => (        <motion.div          key={`row` + i}          className="w-16 h-8 border-l border-slate-700 relative"        >          {cols.map((_, j) => (            <motion.div              whileHover={{                backgroundColor: getRandomColor(),                transition: { duration: 0 },              }}              animate={{                transition: { duration: 2 },              }}              key={`col` + j}              className="w-16 h-8 border-r border-t border-slate-700 relative"            >              {j % 2 === 0 && i % 2 === 0 ? (                <svg                  xmlns="http://www.w3.org/2000/svg"                  fill="none"                  viewBox="0 0 24 24"                  strokeWidth="1.5"                  stroke="currentColor"                  className="absolute h-6 w-10 -top-[14px] -left-[22px] text-slate-700 stroke-[1px] pointer-events-none"                >                  <path                    strokeLinecap="round"                    strokeLinejoin="round"                    d="M12 6v12m6-6H6"                  />                </svg>              ) : null}            </motion.div>          ))}        </motion.div>      ))}    </div>  );};

Use Cases

This free open source React component works well for:

Hero sections - Interactive backgrounds for landing pages built with Next.js
Portfolio sites - 3D grid aesthetics for creative showcases
Tech presentations - Professional backgrounds for demos and conferences
Gaming interfaces - Grid-based themes for strategy games and tools
Data dashboards - Structured backgrounds that support chart overlays
Developer documentation - Technical grid patterns for coding resources

Implementation Notes

Component uses absolute positioning within a relative container
Grid consists of 150×100 cells (15,000 total interactive elements)
3D effect created with skewX(-48deg), skewY(14deg), and scale(0.675)
Hover colors are randomly selected from the nine-color palette
Plus icons appear on even row/column intersections only
Compatible with shadcn/ui and Tailwind CSS
Requires content to have higher z-index to appear above grid

Reactbackground-boxes