X GridA canvas-based interactive background of × marks that illuminate and connect to neighbours with constellation lines on hover.

Add to your project

One command adds this component to your project.

Install with AI Canvas MCP

With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.

About X Grid

X Grid is a canvas of small × marks arranged on a regular lattice. On hover, the ones nearest your cursor brighten and reach toward each other with thin constellation lines, briefly stitching the grid into a network. Everything is drawn into a single 2D canvas with Tailwind controlling layout, so the GPU and DOM both stay quiet. It is a strong hero backdrop or marketing-page filler when you want geometric texture that responds to attention without overwhelming foreground content.

Built with

Frequently asked questions

Is X Grid free to use?

Yes. X Grid is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.

How do I install X Grid?

One command: npx shadcn@latest add https://aicanvas.me/r/x-grid.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install X Grid for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.

What is X Grid built with?

X Grid is built with React and TypeScript, using Canvas and Tailwind CSS. It ships with both light and dark styling.

Where would I use X Grid?

Common uses include Hero section, Marketing site, and Empty state. Like every AI Canvas component, it is self-contained and drops into any React project.

Can I remix X Grid with AI?

Yes. X Grid ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.

Featured in collections