How do I install Background Grid with Dots?

Run npx shadcn@latest add @aceternity/background-grid-with-dots in your terminal. Before installing, add the Aceternity Pro registry to your components.json and set your API token as the ACETERNITY_PRO_TOKEN environment variable. The CLI automatically installs all required dependencies including Tailwind CSS plugins and Framer Motion.

Is Background Grid with Dots responsive and accessible?

Yes. The component is fully responsive across mobile, tablet, and desktop breakpoints. It uses semantic HTML elements, proper heading hierarchy, and accessible color contrast ratios. Touch targets are appropriately sized for mobile interactions, and all interactive elements are keyboard-navigable.

Can I customize the colors, fonts, and layout?

Everything is built with Tailwind CSS utility classes and Framer Motion animations. You can change colors, spacing, typography, border radius, shadows, and animation timing directly in the JSX — no separate CSS files to manage. The component uses your project's Tailwind theme, so it automatically adapts to your design system.

What frameworks does this work with?

Background Grid with Dots is built for React and Next.js (App Router and Pages Router). It requires Tailwind CSS v4 and Framer Motion. It works with any React-based framework including Remix, Gatsby, and Vite — just ensure Tailwind CSS and Framer Motion are configured in your project.

Backgrounds

2 / 11

Background Grid with Dots

An SVG-based grid pattern with dots at intersections. Features customizable grid size, dot radius, and colors with automatic dark mode support and radial fade effect.

Build faster with our component library

Production-ready components designed to accelerate your development workflow.

The grid pattern renders using an SVG pattern element that creates a repeating grid with dots at each intersection point. The pattern supports customizable grid size (default 80px), dot radius (default 3px), and colors for both lines and dots.

The GridWithDots component can be used standalone as a background layer. It accepts props for gridSize, dotSize, lineColor, and dotColor to customize the appearance. Dark mode automatically inverts the colors through Tailwind's dark mode classes.

Ideal for hero sections, landing pages, feature sections, and any layout where you want a subtle grid texture with intersection markers.

More from Backgrounds

Included with All-Access

One payment unlocks the code for this block and every other block, template and page.

Get All-Access

Explore more

Background Dots Background Dots Masked Background Lines Backgrounds Hero Sections

About this block

Ideal for hero sections, landing pages, feature sections, and any layout where you want a subtle grid texture with intersection markers.