Shadcn.io is not affiliated with official shadcn/ui
Logos Featured Quote With Metric Card
A featured quote split logo block for React and Next.js with a flagship logo on the left, a customer testimonial with an inset prominent metric card on the right, and a semantic figcaption attribution built with shadcn/ui and Tailwind CSS
Reinforce a testimonial with a prominent metric card in this featured quote split logo block for React and Next.js. Features a left half containing a size-24 rounded-3xl bordered central mark with a text-3xl bold wordmark and a featured customer pill, a right half containing a semantic text-2xl blockquote followed by an inset rounded-xl muted metric card displaying a tabular-nums text-3xl bold headline number with a short label, and a figcaption attribution row with avatar initials and author role. Built with TypeScript, motion/react parent entrance with split directional stagger and delayed metric card reveal using useReducedMotion, Lucide React icon mark, and Tailwind CSS theme variables. Perfect for flagship customer callouts where a single metric quantifies the quote, case-study anchors between hero and pricing, and any section where quote-plus-number proof must ride together.
Related Components
React Logos Featured Quote Split Block
Single flagship logo paired with customer quote
React Logos Featured Quote Reverse Split Block
Quote on left, logo on right
React Logos Featured Quote Dark Variant Block
Dark inset logo plus quote split
React Logos Featured Quote With Rating Chip Block
Quote split with rating chip
React Logos Metric Hero Strip Block
Metric-led hero strip with logo row
React Logos Featured Focal With Metric Trio Block
Flagship with trio of metric chips
FAQ
Was this page helpful?
Sign in to leave feedback.
Featured Quote Stacked Layout
A vertically stacked featured quote logo block for React and Next.js with a centered flagship mark on top, a centered blockquote in the middle, and a centered attribution figcaption at the bottom built with shadcn/ui and Tailwind CSS
Featured Quote With Rating Chip
A featured quote split logo block for React and Next.js with a flagship mark on the left and a five-star rating credibility chip above a semantic blockquote on the right built with shadcn/ui and Tailwind CSS