Shadcn Stats Block Six

Shadcn Stats Block Six mixes quantitative and qualitative proof. The left side carries the metrics: +1200 stars on GitHub and +500 powered apps. The right side carries a testimonial-style blockquote with a logo, avatar, and cite line.

All of that content is demo material. Before using this shadcn UI block on a SaaS landing page, replace the GitHub count, powered-app count, logo, testimonial, avatar, and cite with assets you are allowed to publish.

Proof Mix

The opening sentence frames the scope: products, APIs, and platforms helping developers and businesses innovate. Beneath it, a two-column metric row uses divide-x and gradient text to present adoption numbers without a heavy card container.

The blockquote uses a primary-colored vertical bar, an external logo image, and shadcn-style avatar primitives from @tailark/core/ui/avatar. The avatar is small, ringed, and paired with a cite, which makes the testimonial feel like part of the stats section rather than a separate wall of quotes.

Responsive Behavior

The outer layout uses grid gap-6 sm:grid-cols-2, with larger gaps at md and lg. On mobile, readers see the intro and metrics first, then the testimonial. On wider screens, the testimonial sits beside the metrics as corroborating proof.

That sequence matters. If your testimonial is stronger than the numeric proof, consider swapping the column order in the React component instead of trying to make both sides equally loud.

Implementation Notes

This stats section uses React and Tailwind CSS, plus Avatar, AvatarFallback, and AvatarImage. The source also includes a plain img for the logo, so review image handling if your Next.js app standardizes on next/image for remote assets.

Keep the two metrics related to the testimonial. If the quote is about developer velocity, the numbers should support adoption, usage, or delivery speed rather than an unrelated business KPI.

Best Fit

Use it when you want a metrics section that feels more human than a KPI grid. It is especially useful near customer proof, open-source adoption, marketplace traction, or developer platform messaging.

Related Shadcn UI blocks

• Stats Blocks

Start from Tailark

Preview Shadcn Stats Block Six