React Logos Metric Dark Variant Block

A dark-inset metric logo strip for React and Next.js with an inverted palette, a hero-scale tabular-num count headline, a secondary metric chip row, and a logo strip with inverted hover states built with shadcn/ui and Tailwind CSS

Drop a dark inset into your page flow with this metric logo strip dark variant block for React and Next.js. Features a rounded-2xl bg-foreground panel, an oversized tabular-nums metric at text-6xl to text-7xl with inverted text-background colors, a secondary metric chip row with vertical dividers, an eight-logo horizontal strip with inverted hover states, and an inverted ShadcnioButton CTA pair. Built with TypeScript, motion/react parent entrance and useReducedMotion, Lucide React icon marks paired with invented placeholder wordmarks, and Tailwind CSS theme variables. Perfect for creating a visual break between light sections, adding a high-contrast proof band, and giving your scale claims maximum visual weight.

Logos Metric Dark Variant

React Logos Metric Hero Strip Block

React Logos Metric Trio With Logo Strip Block

React Logos Dark Inset Wall Block

React Logos Dark Inset Metric Hero Block

React Logos Metric Split With Logo Column Block

React Logos Metric Over Dual Row Logos Block

FAQ

Logos Metric Dark Variant

Related Components

React Logos Metric Hero Strip Block

React Logos Metric Trio With Logo Strip Block

React Logos Dark Inset Wall Block

React Logos Dark Inset Metric Hero Block

React Logos Metric Split With Logo Column Block

React Logos Metric Over Dual Row Logos Block

FAQ

How do I customize the hero metric and label?

How do I add or remove logos from the strip?

Is the dark variant accessible?

How does the dark variant adapt to mobile and tablet?

How do I replace the Lucide icon marks with real brand logos?

When should I use the dark variant versus the default metric hero?