Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Featured Focal With Quote Logos Block for React Aria

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A featured focal with a quote for React with React Aria. 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.

Does it follow my theme?

Yes. Nothing is dark by itself: the plate and the panel are the card colour with a ring and a shadow, over a shell that is a tint of the muted colour, so both light and dark presets keep them lifted.

What moves?

The header and the frame fade up once when the page loads, with CSS transitions. With reduced motion the transitions are off.

All 100 logos blocks