shadcn.io is not affiliated with official shadcn/ui
Quote Driven Feature Cards Block for React
Three feature cards for a design-handoff tool, each with a small drawing of the feature, a customer quote about it, the speaker's initials, name and role, and a result badge.
Installation
Overview
A quote-driven feature section for React with Base UI. A centred header sits over three cells whose hairlines overshoot their corners. Each cell holds a small greyscale drawing of one feature (an inspect panel with its measurements, a redline overlay with the gaps measured, a token export in three formats), the feature's title, a quote from a customer about that feature and a result badge at the foot. The speaker has an initials avatar, a name and a role. From lg the three cells sit side by side; below it they become a scroller that snaps to one card at a time with the next peeking in. It's built from Avatar, Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. For products that sell on what customers say about one specific capability, one quote per feature.
FAQ
How do I change a quote?
Edit the props of each QuoteCard in the list at the bottom of the file: quote, name, job, initials and result. Each quote sits in a figure with a blockquote and a figcaption, so assistive technology reads it with its attribution. To show a photo, put an AvatarImage before the fallback.
Are the drawings real screenshots?
No. Each is built from tokens and is decoration: it is hidden from assistive technology, and the title and the quote beside it say what the feature does. Replace one by passing different children to its QuoteCard.
Does it follow my theme?
Yes. Cards, drawings and chips use card, muted and foreground tokens with no dark scope, so the block is light on a light page and dark on a dark one. The only filled elements are small foreground chips; the primary colour is not used.
How does it fit on a phone?
Below lg the cards sit in one row that scrolls sideways and snaps to each card. The scroller is focusable and named "Features, in customers' words", so a keyboard can scroll it with the arrow keys, and it shows a focus ring. Nothing scrolls the page sideways at 320 pixels.
Related
- Pro
Quote Reinforced Split Panel Features
Proof and comparisonsA feature split for a preview-environment tool: a headline and four ticks on one side, and on the other a framed drawing of the open previews with comment pins and the customer's quote in a cell of its own.
- “Pro
Testimonial Embedded Split Features
Proof and comparisonsA feature split that opens with a customer quote at display size, then three feature rows beside a framed drawing that sets a laptop's stack against production's, each layer marked as matching or not.
- Pro
Customer Quote Feature Split
Proof and comparisonsA split feature section for a contract-review tool: three feature ticks and a story link beside a framed drawing of a contract under review, with a customer quote card that overlaps the frame's corner.
- Pro
Framed Preview Card Trio Features
Card gridsThree tall cells, each opening with a framed greyscale drawing: a photo contact sheet, a shoot timeline and a comment thread.
- Pro
Bento Grid Testimonials
Quote gridsA quote-only bento drawn with hairlines: one large lead story beside four shorter quotes, in cells that share their lines, on the page's drafting lines.
- Pro
Before After Visual Features
Proof and comparisonsThree measured outcomes as ruled rows, each with its own Before and After control that swaps both the figure and the bar: page weight, load time and weekly support tickets.