shadcn.io is not affiliated with official shadcn/ui
Inset Tray Strip Logos Block for React Aria
A tray strip for a paint-matching product: an outline badge and six linked customer wordmarks in two rows of three, inside a tinted shell that holds a lighter panel.
Installation
Overview
An inset logo strip for React with React Aria. A tinted shell holds a lighter panel (card in card), so the strip gains depth from its frame instead of a dark panel and follows your theme in light and dark. An outline badge labels the panel ("Matched in 1,400 paint shops") and six customer wordmarks sit under it in two rows of three. Each wordmark is a link to that customer's story: muted at rest, and on hover or keyboard focus it turns to full strength with an underline under the name. Two across on a phone. The tray is built from the catalog's Frame and Badge.
FAQ
Where do the links go?
Each href="#" in LinkedWordmark is a placeholder for the customer's story or case study. Replace it per customer: add an href field to CUSTOMERS and pass it through. If a customer has no page, render that one as a plain span instead of a link.
Why is it called dark inset if it follows the theme?
The slug keeps the name of shadcn.io's black tray, but the block follows your theme instead of forcing a dark panel: depth comes from the nested Frame and FramePanel (a tinted shell around a bg-card panel), which reads as a raised tray in light and dark.
How do I change the logos?
Edit CUSTOMERS: each entry is a name, an icon and a lettering. Six fills two rows in three columns; on a phone they are three rows of two.
How does keyboard focus look?
Each link has a visible focus ring and the same underline as the hover state, drawn with group-focus-visible, and the colour turns to full strength for the focused item. The six links are six tab stops, in reading order.