Logo hover
The logo grid with one call to action: on hover or keyboard focus the logos step back and a link fades in over the middle of the grid.
Dependencies
Interaction Type
A labelled section landmark with the logos in a list, each with its brand name as alt text. Hovering the grid, or tabbing to its link, makes the logos recede slightly while a real link rises in over them, with the accent focus ring and a 44px target. On touch screens the link simply sits under the grid. Reduced motion swaps states without the movement.
Props
Options you can pass to customize this component.
titleSection heading. Defaults to "Built on the tools you already ship".
descriptionSupporting text under the heading.
logosLogos in order. name is the alt text, invert flips a one color mark in that theme: "dark" turns a black mark white in dark mode, "light" turns a white mark black in light mode, href links it in a new tab. Defaults to the eight tools Nexvyn UI is built with.
classNameMerged onto the section with cn().
linkLabelLink text. Defaults to "See the full stack". Empty hides the link and the recede.
linkHrefWhere the link points.
linkIconIcon after the label, mirrored in RTL. Pass null to hide it.
Installation
How to use
<SocialProofLogosHover linkLabel="Read how it is built" linkHref="/docs" />Source Code
Click the code icon in the top-right corner to view the source code.
License & Usage
- •Free for personal and commercial use
- •No attribution required
- •Cannot be resold as a standalone product
- •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.Built on the tools you already ship
Written in TypeScript for React and Next.js, animated with Motion, shaped by Radix patterns and installed through the shadcn CLI.
