Shadcn.io is not affiliated with official shadcn/ui
Logos Split Headline With Metric Chips
A split layout logo block for React and Next.js with a left-aligned hero-scale headline paired with a three-metric chip row, ShadcnioButton CTA pair, a six-cell bordered logo grid, and split directional entrance animations built with shadcn/ui and Tailwind CSS
Pair a conversion headline with hard-number proof in this split layout logo block for React and Next.js. Features a left-aligned hero-scale headline plus eyebrow and subtitle, a three-metric chip row with tabular-nums values separated by middle-dot dividers and rendered inline between the subtitle and the CTAs, a ShadcnioButton primary plus ghost pair, and a right-side two-by-three bordered logo grid of six cells with size-8 icon marks. Built with TypeScript, motion/react parent entrance paired with useReducedMotion split directional stagger, Lucide React icon marks, and Tailwind CSS theme variables. Perfect for pricing-adjacent trust bands, enterprise landing pages where scale numbers matter, and marketing sections where metrics and logos together do the selling.
Related Components
React Logos Split Headline Logo Grid Block
A split layout with six bordered logo cells
React Logos Split Headline Three Col Grid Block
A split layout with nine borderless cells
React Logos Split Headline Vertical Logo List Block
A split layout with a vertical logo row list
React Logos Split Headline Dark Grid Panel Block
A split layout with dark inset logo panel
React Logos Metric Hero Strip Block
A metric-led hero strip with logo row
React Logos Metric Trio With Logo Strip Block
A metric trio with a logo strip row
FAQ
Was this page helpful?
Sign in to leave feedback.
Split Headline Vertical Logo List
A split layout logo block for React and Next.js with a left-aligned hero-scale headline paired with a right-side vertical five-row logo list featuring dashed row dividers, industry tags, and split directional entrance animations built with shadcn/ui and Tailwind CSS
Split Logo Left Headline Right
A reversed split layout logo block for React and Next.js with a left-side six-cell bordered logo grid paired with a right-aligned hero-scale headline and ShadcnioButton CTA pair, split directional entrance animation, and monochrome-to-color hover states built with shadcn/ui and Tailwind CSS