BlocksBento Grids
Bento Grids
Asymmetric grid layouts for feature showcases and content organization.
Feature Bento
Block preview — compose from component imports
Feature Bento
4-6 cell bento grid with varying sizes for primary and secondary features.
IO Context
The asymmetric sizing creates visual hierarchy. Use larger cells for primary features and smaller for supporting ones.
Components used
Bento Grid
bash
// Install the components used in this block
npx shadcn@latest add @aceternity/bento-gridInteractive Bento
Block preview — compose from component imports
Interactive Bento
Bento grid with hover effects and spotlight cards for each cell.
IO Context
Each cell responds to hover, making the grid feel alive. Use for dashboards or feature overviews.
Components used
Bento GridCard SpotlightGlowing Effect
bash
// Install the components used in this block
npx shadcn@latest add @aceternity/bento-grid
npx shadcn@latest add @aceternity/card-spotlight
npx shadcn@latest add @aceternity/glowing-effect