Todos os componentes

Logo Marquee

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

Magic UI MIT marquee

O que é

Logo Marquee é um componente de marquee para React e Tailwind CSS, da biblioteca Magic UI, 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 Magic UI e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Logo Marquee

registry/example/marquee-logos.tsx
import { cn } from "@/lib/utils"
import { Marquee } from "@/registry/magicui/marquee"

const logos = [
  {
    name: "Microsoft",
    img: "https://cdn.simpleicons.org/microsoft/000/fff",
  },
  {
    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: "LinkedIn",
    img: "https://cdn.simpleicons.org/linkedin/000/fff",
  },
  {
    name: "Twitter",
    img: "https://cdn.simpleicons.org/twitter/000/fff",
  },
]

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

export default function MarqueeLogos() {
  return (
    <div className="bg-background relative flex size-full flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border py-20 md:shadow-xl">
      <Marquee className="[--gap:3rem]">
        {logos.map((logo, idx) => (
          <Logo key={idx} {...logo} />
        ))}
      </Marquee>
      <div className="dark:from-background pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white"></div>
      <div className="dark:from-background pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white"></div>
    </div>
  )
}

Componentes parecidos