Shadcn Bento Block Twelve

A bordered product grid with a full-width AI chat row between feature pairs.

Bento block twelve is built for product breadth. It includes financial analytics, file sharing, AI-powered chat support, team collaboration, and smart scheduling.

The code imports CurrencyIllustration, FileUploadIllustration, ScheduleIllustration, ChatIllustration, and ReplyIllustration. The center row spans both columns, giving the AI chat feature more room than the surrounding cards.

What makes this variant useful

The block has a clear structure: two top features, one wide middle feature, two bottom features. That makes it easier to tell a platform story without making every capability fight for attention.

The middle AI chat panel is the natural centerpiece. Use it for the feature that connects the rest of the product or answers the strongest buyer question.

Best fit

Use this variant for workspace products, client portals, AI support tools, finance platforms, collaboration software, and multi-module SaaS products. It works well when one feature deserves a full-width explanation.

Implementation details

The layout uses @3xl:grid, @3xl:grid-cols-2, and grid-rows-subgrid. The AI chat row uses @3xl:col-span-2 and a two-column internal layout at larger sizes.

The file upload illustration uses variant="mixed", giving the card a richer visual state than a single static file icon.

What to customize first

Make the center row your strongest feature.
Replace AI chat if your product's central feature is not support.
Keep top and bottom feature pairs balanced in copy length.
Use the file upload card for permissions, sharing, or workspace proof.

Frequently asked questions

Does Bento Block Twelve support dark mode?

Yes. It uses Tailwind and Shadcn theme tokens for background, text, borders, and muted copy.

Is Bento Block Twelve responsive?

Yes. It stacks on small screens and becomes a bordered two-column grid with a full-width middle row on larger containers.

Can I customize the AI chat row?

Yes. Replace the chat illustration and copy with any centerpiece feature.

When should I use this variant?

Use it when one feature is important enough to span the section, with four supporting capabilities around it.

Start from Tailark

Preview Bento Block Twelve