Todos os componentes

Logos Marquee

Logos Marquee é um componente de marquee para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

UI Layouts MIT marquee

O que é

Logos Marquee é um componente de marquee para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Não precisa de pacotes além do que o projeto já tem

Licença

Este componente vem de UI Layouts e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Logos Marquee

./registry/components/marquee/logos-marquee.tsx
import { Marquee } from '@/components/ui/marquee';
import { cn } from '@/lib/utils';

const logos = [
  {
    name: 'Apple',
    img: 'https://cdn.simpleicons.org/apple/000/fff',
  },
  {
    name: 'Google',
    img: 'https://cdn.simpleicons.org/google/000/fff',
  },
  {
    name: 'Facebook',
    img: 'https://cdn.simpleicons.org/facebook/000/fff',
  },
  {
    name: 'ChatGPT',
    img: 'https://upload.wikimedia.org/wikipedia/commons/6/66/OpenAI_logo_2025_%28symbol%29.svg',
  },
  {
    name: 'X',
    img: 'https://upload.wikimedia.org/wikipedia/commons/0/09/X_%28formerly_Twitter%29_logo_late_2025.svg',
  },
];

const Logo = ({ name, img }: { name: string; img: string }) => {
  return (
    <div className={cn('h-12 w-12 cursor-pointer')}>
      <img src={img} alt={name} />
    </div>
  );
};

const MarqueeLogos = () => {
  return (
    <div className='relative flex h-full w-full flex-col items-center justify-center gap-4 overflow-hidden rounded-lg dark:bg-neutral-800 bg-neutral-50 py-20 '>
      <Marquee className='[--gap:3rem]'>
        {logos.map((logo) => (
          <Logo key={logo.name} {...logo} />
        ))}
      </Marquee>
      <div className='pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-linear-to-r from-white dark:from-neutral-900'></div>
      <div className='pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-linear-to-l from-white dark:from-neutral-900'></div>
    </div>
  );
};

export default MarqueeLogos;
./components/ui/marquee.tsx
'use client';
import { cn } from '@/lib/utils';

interface MarqueeProps {
  className?: string;
  reverse?: boolean;
  pauseOnHover?: boolean;
  children?: React.ReactNode;
  vertical?: boolean;
  repeat?: number;
  [key: string]: any;
}

export function Marquee({
  className,
  reverse,
  pauseOnHover = false,
  children,
  vertical = false,
  repeat = 4,
  ...props
}: MarqueeProps) {
  return (
    <div
      {...props}
      className={cn(
        'group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] gap-(--gap)',
        {
          'flex-row': !vertical,
          'flex-col': vertical,
        },
        className
      )}
    >
      {Array(repeat)
        .fill(0)
        .map((_, i) => (
          <div
            key={i}
            className={cn('flex shrink-0 justify-around gap-(--gap)', {
              'animate-marquee flex-row': !vertical && !reverse,
              'animate-marquee-vertical flex-col': vertical && !reverse,
              'animate-marquee-reverse flex-row': !vertical && reverse,
              'animate-marquee-vertical-reverse flex-col': vertical && reverse,
              'group-hover:[animation-play-state:paused]': pauseOnHover,
            })}
          >
            {children}
          </div>
        ))}
    </div>
  );
}

Componentes parecidos