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.

Symmetric Bento Grid

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.

Explore more

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

Part of Bento Grids · All blocks

Build websites faster and 10x better than your competitors with
Aceternity UI Pro

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

100+ templates and blocks combined

Ready to copy paste component blocks, save days of development time

Get lifetime access