Bento 29 - Light asymmetric feature bento grid

Pro

White four-tile bento on a nine-seven column split with wide and narrow animated previews plus icon captions for modular grids, drag control, and responsive scaling.

Shadcn Bento 29 block

Component data

ID
bento29
Access
pro
Created
Jul 13, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Bento 29 block design & features

Bento29 is a four-tile bento on a white section, built with shadcn/ui cards on a nine-seven asymmetric grid. Wide tiles span nine columns with cinematic preview frames for modular grid-based UI blocks and pre-styled visual variants. Narrow seven-column tiles hold squarer previews with captions for drag-and-drop layout control and auto-responsive scaling screens.

Each card repeats the preview-then-icon-headline-paragraph pattern from the bento26 family. Borders stay light, spacing generous, and headlines large with medium weight. Animated panels include grid module demos, a drag placement interface borrowed from another bento cell, responsive scaling mockups, and variant-picker UI. Icons reuse the shared four-color SVG strip.

A moderate feature grid that adds column-span contrast to the otherwise uniform caption template. The alternating wide-narrow rhythm creates a bento mosaic feel without dark backgrounds or photography. Complexity is fully code-driven across four animated interface scenes.

On smaller screens all tiles stack full width in source order with captions remaining under each preview.