Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Max-Samson/magicui/llms.txt

Use this file to discover all available pages before exploring further.

A nostalgic retro-style grid background with animated scrolling effect and 3D perspective.

​
Installation

    ​
    Usage

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

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <RetroGrid />
    </div>
  )
}

    ​
    Custom Styling

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

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <RetroGrid 
        angle={45}
        cellSize={80}
        opacity={0.7}
        lightLineColor="blue"
      />
    </div>
  )
}

    ​
    Props

    PropTypeDefaultDescription
    classNamestring-Additional CSS classes for the grid container
    anglenumber65Rotation angle of the grid in degrees
    cellSizenumber60Grid cell size in pixels
    opacitynumber0.5Grid opacity value between 0 and 1
    lightLineColorstring"gray"Grid line color in light mode
    darkLineColorstring"gray"Grid line color in dark mode
    The grid automatically animates with a scrolling effect using CSS animations and includes a gradient fade at the bottom.
    Adjust the angle prop to change the perspective of the grid. Lower angles create a more dramatic 3D effect.

    Build docs developers (and LLMs) love

    Get started for freeTalk to us