shadcn.io is not affiliated with official shadcn/ui
Featured Focal With Quote Logos Block for React
A flagship customer's plate raised on the top edge of an inset frame that holds its quote and who said it, for a property-management tool.
Installation
Overview
A featured focal with a quote for React with Base UI. Under a centred header, the flagship customer's plate sits raised on the top edge of an inset frame, half over it: a plate with its mark, its wordmark in a serif and its tenure. The frame is a muted shell with + marks on its corners and holds one raised panel with the customer's quote at display size and who said it, an avatar with a name and role. The block follows your theme, the shell and the ring doing the work a dark panel would. The plate and the quote stay in one centred column on a phone. Built from Frame, Guides, Avatar and Lucide icons, with a CSS transition for the entrance and your theme's tokens for every colour. For a product whose proof is one customer saying it in their own words.
FAQ
How do I change the customer?
Edit FLAGSHIP for the plate, wordmark and tenure, and QUOTE for the quote and the person who said it (initials, name and role). The header's bold lead sentence names the customer too, so change it with them. Keep the quote to two sentences so the panel stays calm.
How does the plate sit on the frame?
The plate comes first in the markup, with a raised stacking order, and the frame under it takes a negative top margin of half the plate's height. The panel's top padding is large enough that the quote starts clear of the plate. If you make the plate taller, raise the frame's negative margin and the panel's top padding by the same amount.
How do I show a photo instead of initials?
Add an AvatarImage with the photo and its src, keeping the AvatarFallback: the initials show while it loads or if it fails. The avatar is decoration, since the name is written next to it.
Is the block accessible?
Yes. The header is an h2; the plate is a card with the customer's name as an h3; the quote is a blockquote in a figure whose figcaption names who said it and their role. The icon and the avatar are hidden from assistive technology.
Related
- Pro
Featured Focal Hub Logos
Flagship customerA flagship customer in a framed card with a hairline tree down to a bracket of six supporting wordmarks, the caption "Integrates with" sitting on the line, for a release-management tool.
- Pro
One flagship customer's wordmark plate beside a display-size quote and who said it, for a vet-clinic booking tool, split by a hairline divider.
- Pro
A school group's quote on a raised card, with the school's wordmark large in a framed figure with + marks on its corners, for a school administration tool.
- Pro
A library system's quote on a raised panel in a tinted shell, its key phrase marked with a highlighter stroke, beside the library's wordmark set as a poster.
- Pro
Featured Focal Diagram Logos
Flagship customerA hub-and-spokes diagram for a webhook-delivery tool: the flagship customer at the centre of an inset frame, three supporting customers on each side, and hairline curves running to each.
- Pro
Logo Bar Testimonials
Logos and facesA bar of six customer wordmarks as cells of one hairline band, each opening a single line from that team in a display-size quote below, with the speaker's name and role.