Retro Grid

The Bare UI Retro Grid component is a zero-dependency, CSS-animated 3D grid that adds a nostalgic, high-performance aesthetic to your backgrounds using pure HTML and CSS perspective.

Preview

Bare UI

Usage

tsx
import { RetroGrid } from "@repo/ui/retro-grid";

export default function App() {
  return (
    <div className="relative h-screen w-full overflow-hidden">
      <RetroGrid />
      <div className="relative z-10 flex h-full items-center justify-center">
        <h1>Your Content</h1>
      </div>
    </div>
  );
}

Props

Prop	Type	Default	Description
angle	number	60	The angle of the grid perspective in degrees.
cellSize	string	"40px"	The size of each cell in the grid.