Logo grid
The tools a product is built with, as a quiet logo grid under a short heading: two per row on mobile and four from the small breakpoint, split by hairlines.
Dependencies
Interaction Type
A labelled section landmark with the logos in a list. Every logo keeps its brand name as alt text and is shown unaltered; only black marks flip to white in dark mode. Linked logos open the brand site in a new tab, each a full cell target with the accent focus ring.
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().
Installation
How to use
import reactLogo from 'runeicons-brands/svg/react.svg'
import typescriptLogo from 'runeicons-brands/svg/typescript.svg'
<SocialProofLogos
title="Built on the tools you already ship"
logos={[
{ name: 'React', src: reactLogo, invert: 'dark', href: 'https://react.dev' },
{ name: 'TypeScript', src: typescriptLogo, href: 'https://www.typescriptlang.org' },
]}
/>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.
