Grid LinesA dot grid connected by thin lines.
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/grid-linesFor dark mode, add the dark class to your <html> element:
<html class="dark">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 Grid Lines
Grid Lines connects a dot grid with thin segments and waits for the cursor to enter. When it does, a radial pulse fires from your pointer and ripples outward, lighting both dots and connecting strokes as it spreads. The whole composition is drawn into a single 2D canvas with Tailwind providing layout for the container around it. It works well as a hero backdrop where a single interaction signals "this site is alive", or as a section break on a long marketing page.
Built with
Frequently asked questions
- Is Grid Lines free to use?
- Yes. Grid Lines 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 Grid Lines?
- One command: npx shadcn@latest add https://aicanvas.me/r/grid-lines.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Grid Lines 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 Grid Lines built with?
- Grid Lines is built with React and TypeScript, using Canvas and Tailwind CSS. It ships with both light and dark styling.
- Where would I use Grid Lines?
- 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 Grid Lines with AI?
- Yes. Grid Lines ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas