Works natively with Cursor. Add npx -y bare-ui-mcp to your MCP settings.

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

PropTypeDefaultDescription
anglenumber60The angle of the grid perspective in degrees.
cellSizestring"40px"The size of each cell in the grid.