Background Grid

A static 3D background grid — a wireframe perspective grid that covers the full container, warped and bowed toward a vanishing point for depth. No animation, no layout shift.

Add to your project

1Connect the Uniquel MCP

Connect Uniquel to your coding agent before using the component ID.

Connect MCP

2Copy the component ID

MCP ID

component:backgrounds/background-grid

Works with your AI tools

Claude*

Codex*

Lovable

Base44

Figma Make

Replit*

Cursor*

* Compatible with most projects that use the default React/Next.js framework.

Built With

React

Tailwind CSSCanvas API

Props

Prop	Type	Description
`children`	`ReactNode`	Content layered above the grid (headline, CTA, etc.)
`className`	`string`	Styles for the content wrapper
`containerClassName`	`string`	Styles for the outer shell (size, layout)
`theme`	`'dark' \| 'light'`	Preset background and line colors
`backgroundFill`	`string`	Overrides the theme background color (hex)
`lineColor`	`string`	Overrides the theme grid line color (hex)
`cells`	`number`	Grid density (lines per axis)

More Backgrounds Components

Wavy Tide Background

Animated canvas waves that fill the container and drift with the pointer — a softer, SaaS-ready take on classic wavy backgrounds.

Meteor Shower Background

Subtle canvas meteors drifting across a dark sky — a quiet animated background for heroes and landing sections.

Neon Flow Background

Staggered neon trails that sweep across a dark field — colors are prop-driven for easy theming.

Desert Dune Background

Soft layered waves in parallax drift — cool indigo tones by default, colors via props.

Aurora Background

Northern lights as folding canvas curtains: irregular ribbons and faint rays drifting across a night sky.