Shadcn Stats Block Seven

A raised metrics card over a dotted map background, combining product copy with four compact stat tiles.

Shadcn Stats Block Seven turns the stats section into a foreground card over a map. The card starts with product copy about "AI-powered Marketing Tools" and visual processing, then uses four rounded metric tiles underneath.

The demo metrics are 99.9% uptime, 24/7 support, and two repeated 12X processing tiles. Treat those values as placeholders. The repeated fourth tile is a source issue to resolve when adapting the block.

Layered Layout

The section is relative and container-aware. On medium screens and larger, an absolutely positioned Map fills the background behind a radial mask. The foreground content sits inside a bg-card panel with rounded corners, ring, and shadow.

The card width changes with responsive max-width utilities: it can take the full width on mobile, then narrows to md:max-w-3/5 and lg:max-w-1/2. That keeps the map visible as the layout opens up.

Metric Tiles

The four stats use a grid grid-cols-2 layout. Each tile gets a muted background, rounded corners, padding, and centered text. This makes the section feel more like a dashboard card than a simple metrics row.

For a real SaaS landing page, use the four tiles for related metrics: uptime, response time, processing speed, support coverage, active teams, or workflow volume. Replace the duplicated 12X tile with a distinct metric or reduce the grid to three items.

Implementation Notes

The local Map component is client-side and builds an inline SVG with dotted-map. The map pins are decorative unless you connect them to real locations, so do not imply customer coverage or office footprint unless the data is true.

The rest of the section is React and Tailwind CSS. It follows shadcn visual conventions through theme tokens like bg-background, bg-card, ring-border, text-muted-foreground, and rounded surfaces.

Best Fit

Use it when the stats need to feel connected to a product surface or global system. It works well for infrastructure, AI tooling, logistics, support, and any metrics section where the visual background helps carry the story.

Related Shadcn UI blocks

Stats Blocks

Start from Tailark

Preview Shadcn Stats Block Seven