How do I install Three Column Bento Grid?

Run npx shadcn@latest add @aceternity/three-column-bento-grid 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 Three Column 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?

Three Column 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

7 / 7

Three Column Bento Grid

A responsive bento grid with animated skeletons including avatar scoring, progress tracking timelines, video interview previews, and drag-and-drop file upload.

The perfect ATS score platform

Get the most accurate details on your candidate with our state of the art, blazing fast, absolutely zero fact based ATS score generator.

Generate scores based on pictures

Rate your candidate's looks. As real as ATS scores.

score 98

Track progress

Track every step of the candidate's journey, from initial application to rejected appraisal.

Application Submitted

Interview started

Manu

Schedule interviews seamlessly

Ask about DSA or Dev, we don't care.

Hello, My name...

lol, invert a
binary tree

Easy upload resumes manually

One click OR drag and drop candidate's resumes.

The avatar scoring skeleton cycles through headshots with animated corner brackets highlighting the active selection. Each avatar fades to grayscale when inactive. The timeline skeleton renders vertical lines with circles at the top, overlaid with containers that animate on hover with a custom cursor.

Beam animations flow horizontally across the interview skeleton using animated SVG linear gradients. The file upload skeleton responds to clicks with a spring-based layout animation, displaying file metadata when files are added. A grid pattern background sits behind the upload zone with a gradient mask.

Useful for HR tech dashboards, applicant tracking systems, interview scheduling tools, and any product that needs to demonstrate a multi-step workflow visually.

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

Bento Grid With Skeletons Symmetric Bento Grid Features Grid With Large Skeletons Bento Grids Feature Sections

About this block

Useful for HR tech dashboards, applicant tracking systems, interview scheduling tools, and any product that needs to demonstrate a multi-step workflow visually.