Overlays

Stacked Logos

#logos#stack#brands

Trusted by the best

implementedInfinityUI component

This component is fully implemented in InfinityUI and wired into the docs and registry flow.

Installation

Use the registry command to add the component source, and install any package dependencies if needed.

Infinity Registry

Install the component source into your project with the shadcn CLI.

npx shadcn@latest add https://infinityui-pearl.vercel.app/r/stacked-logos

Package Dependencies

Install the npm packages used by this component source.

npm install @iconify/react framer-motion

Component Code

Copy and paste this code into your component file.

tsx

"use client";

import { motion } from "framer-motion";
import { Icon } from "@iconify/react";

interface StackedLogosProps {
    /** Brand icon keys from Iconify */
    logos?: string[];
    label?: string;
}

const DEFAULT_LOGOS = [
    "logos:react",
    "logos:nextjs-icon",
    "logos:tailwindcss-icon",
    "logos:framer",
    "logos:typescript-icon",
    "logos:vercel-icon",
];

export function StackedLogos({ logos = DEFAULT_LOGOS, label = "Trusted by the best" }: StackedLogosProps) {
    return (
        <div className="flex flex-col items-center gap-4">
            <p className="text-xs text-zinc-600 uppercase tracking-widest">{label}</p>
            <div className="flex items-center flex-wrap gap-6 justify-center">
                {logos.map((logo, i) => (
                    <motion.div
                        key={logo}
                        initial={{ opacity: 0, y: 16 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: i * 0.08, duration: 0.4, ease: "easeOut" }}
                        whileHover={{ scale: 1.2, y: -4 }}
                        className="w-10 h-10 flex items-center justify-center grayscale hover:grayscale-0 transition-all duration-300 opacity-60 hover:opacity-100"
                        title={logo.split(":")[1]}
                    >
                        <Icon icon={logo} width={36} height={36} />
                    </motion.div>
                ))}
            </div>
        </div>
    );
}