Dot GridA canvas-based dot grid background where hovering illuminates nearby dots with a smooth radial glow and organic fade.

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 Dot Grid

Dot Grid lays down a regular field of points across a 2D canvas. Hovering it lifts the dots inside a soft radial pool around your cursor, with a smooth fade in and out so movement always feels gentle. Because the whole grid lives in one canvas, the cost stays flat no matter how dense the field is. Use it behind a hero, behind a pricing table, or wherever you want a structured pattern that politely tracks the cursor.

Built with

Frequently asked questions

Is Dot Grid free to use?

Yes. Dot 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 Dot Grid?

One command: npx shadcn@latest add https://aicanvas.me/r/dot-grid.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Dot 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 Dot Grid built with?

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

Where would I use Dot Grid?

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

Can I remix Dot Grid with AI?

Yes. Dot 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