Shadcn Bento Block Fourteen

Bento block fourteen is built for global and analytics-heavy products. It combines currency conversion, map-based reporting, performance monitoring, and document management in a four-part bordered grid.

The variant imports CurrencyIllustration, MapIllustration, MonitoringChart, and repeated DocumentIllustration components. The layout is simpler than the six-feature variants, but each card has a clearer job.

What makes this variant useful

The top row pairs a compact currency card with a wide global analytics card. That gives the section an immediate international or multi-region angle. The bottom row pairs a wide monitoring chart with a compact document card.

This is a good pattern when the product story has two large proof areas and two supporting details.

Best fit

Use this variant for finance products, analytics platforms, logistics tools, global operations software, dashboards, infrastructure reporting, and products that need to show regional data.

Implementation details

The grid uses @3xl:grid-cols-6. The currency and document cards span two columns, while the map and monitoring cards span four. That creates a clear 2/4 and 4/2 rhythm across the section.

The currency card includes a small +44 Currencies text line. That is useful for a compact data point, but it should be replaced with a real number before shipping.

What to customize first

• Replace +44 Currencies with a real supported count or remove it.
• Use the wide map card only if geography or segmentation matters.
• Put your most important chart in the monitoring slot.
• Keep the document card compact so it does not compete with the wide panels.

Frequently asked questions

Does Bento Block Fourteen support dark mode?

Yes. It uses background, foreground, muted foreground, and border tokens that respond to the active theme.

Is Bento Block Fourteen responsive?

Yes. The six-column layout collapses to a stacked bordered layout on smaller screens.

Can I customize the currency and map content?

Yes. The currency, map, chart, and document visuals are React components that can be replaced with product-specific assets.

When should I use this variant?

Use it when your product needs to show global coverage, reporting, and operational documents without a crowded grid.

Start from Tailark

Preview Bento Block Fourteen