Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
Retro Grid
"use client";
import { RetroGrid } from "@/registry/magicui/retro-grid";
export function RetroGridDemo() {
return (
<div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background">
<span className="pointer-events-none z-10 whitespace-pre-wrap bg-gradient-to-b from-[#ffd319] via-[#ff2975] to-[#8c1eff] bg-clip-text text-center text-7xl font-bold leading-none tracking-tighter text-transparent">
Retro Grid
</span>
<RetroGrid />
</div>
);
}
Installation
pnpm dlx shadcn@latest add @magicui/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 |
---|---|---|---|
className | 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 |
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development