Retro Grid

PreviewCode

Retro Grid

@/demos/RetroGridDemo.tsx

import { RetroGrid } from '@/registry/magicui/retro-grid'

export function RetroGridDemo() {
  return (
    <div class="
      relative flex h-125 w-full flex-col items-center justify-center
      overflow-hidden rounded-lg border bg-background
    "
    >
      <span class="
        pointer-events-none z-10 bg-linear-to-b from-[#ffd319] via-[#ff2975]
        to-[#8c1eff] bg-clip-text text-center text-7xl leading-none font-bold
        tracking-tighter whitespace-pre-wrap text-transparent
      "
      >
        Retro Grid
      </span>

      <RetroGrid />
    </div>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/retro-grid

bun

bunx shadcn@latest add @magicui-solid/retro-grid

yarn

yarn dlx shadcn@latest add @magicui-solid/retro-grid

npm

npx shadcn@latest add @magicui-solid/retro-grid

Usage

import { RetroGrid } from '@/components/magicui/retro-grid'

<div className="relative h-[500px] w-full overflow-hidden">
  <RetroGrid />
</div>

Props

Prop	Type	Default	Description
class	string	-	Additional CSS classes for the grid container
angle	number	65	Rotation angle of the grid in degrees
cellSize	number	60	Grid cell size in pixels
opacity	number	0.5	Grid opacity value between 0 and 1
lightLineColor	string	"gray"	Grid line color in light mode
darkLineColor	string	"gray"	Grid line color in dark mode

Original:

magicui.design/docs/components/retro-grid