How do I install Symmetric Bento Grid?

Run npx shadcn@latest add @aceternity/bento-grid-example-three 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 Symmetric Bento Grid 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?

Symmetric Bento Grid 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.

Bento Grids

3 / 7

Symmetric Bento Grid

A five-card asymmetric bento layout with animated SVG connection paths, a rotating 3D globe using Cobe, and deployment workflow visualization.

Deployments made easy

Deploy with ease, leave complexities to us.

git add .

git commit -m "update"

git push

your site is live ✨

One click deploy

Deploy your app in seconds, with our one click deploy feature.

Intuitive workflow

With our intuitive workflow, you can easily manage your app without complex steps.

Hosting over the edge

With our edge network, we host your website by going into each city by ourselves.

Running out of copy

You are running out of copy for your website, we can generate copy for you.

The deployment skeleton shows three containers with git commands, GitHub logo, and AWS logo. Each container bounces and rotates on the X-axis in sequence. Curved SVG paths connect the containers with animated gradients that flow along the path using linearGradient animation.

A 3D globe renders in one card using the Cobe library. The globe rotates continuously with city markers at specific coordinates. The Header component animates a bordered rectangle expanding from zero dimensions with corner squares appearing after the animation completes.

Best for developer tool landing pages, CI/CD platform marketing, edge network services, and infrastructure product sites where showing the deployment flow builds credibility.

More from Bento Grids

Included with All-Access

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

Get All-Access

Explore more

Three Column Bento Grid Bento Grid With Skeletons Hero Section With Beams and Grid Bento Grids Feature Sections

About this block

Best for developer tool landing pages, CI/CD platform marketing, edge network services, and infrastructure product sites where showing the deployment flow builds credibility.