Retro Grid: Free React + Tailwind Component

A synthwave-style perspective horizon grid built with pure CSS 3D transforms — scrolling infinitely, with light and dark mode support and reduce motion handling.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add retro-grid.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Perspective angleangle

Cell sizecellSize

Scroll cycle (s)speed

Grid opacityopacity

0.5

Light-mode lineslightLineColor

Dark-mode linesdarkLineColor

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<RetroGrid/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/retro-grid.en.json

Or, once registries are configured in components.json, install it as @webberui/retro-grid.

Usage

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

<RetroGrid className="flex h-[340px] items-center justify-center rounded-xl">
  <span className="text-5xl font-bold">Retro Grid</span>
</RetroGrid>

The component is itself a relatively positioned, bounded container: the grid fills the background and children layer above it. Set the height and layout through className, and avoid viewport height units like 100vh.

Props

Prop	Type	Default	Description
`angle`	`number`	`65`	Perspective angle of the grid's tilt (degrees) — higher lies closer to the ground plane
`cellSize`	`number`	`60`	Edge length of a single cell (px)
`speed`	`number`	`12`	Seconds for one scroll cycle — lower is faster
`opacity`	`number`	`0.5`	Opacity of the grid lines and the layer overall (`0` ~ `1`)
`lightLineColor`	`string`	`"#6b7280"`	Grid line color in light mode
`darkLineColor`	`string`	`"#9ca3af"`	Grid line color in dark mode
`children`	`ReactNode`	—	Foreground content layered above the grid

Accessibility

When the user has "reduce motion" enabled at the system level, the grid stands still instead of scrolling, while the perspective background is kept
The grid layer carries aria-hidden and pointer-events-none, so it affects neither assistive technology nor interaction

Retro Grid