# Marquee Logos 1 - Logo marquee

> Marquee scrolling a row of company logo images.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/marquee-marquee-logos-1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/marquee-marquee-logos-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/marquee-marquee-logos-1-light-8b65a3145c9fc142.png
- Registry item: https://shadcnblocks.com/r/marquee-marquee-logos-1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/marquee-marquee-logos-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://www.kibo-ui.com/r/marquee.json`

## Files

### `example/marquee/marquee-logos-1.tsx`

```tsx
import {
  Marquee,
  MarqueeContent,
  MarqueeItem,
} from "@/components/kibo-ui/marquee";

export const title = "Logo marquee";

const logos = [
  {
    src: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/logos/fictional-company-logo-1.svg",
    alt: "Company logo 1",
  },
  {
    src: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/logos/fictional-company-logo-2.svg",
    alt: "Company logo 2",
  },
  {
    src: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/logos/fictional-company-logo-3.svg",
    alt: "Company logo 3",
  },
  {
    src: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/logos/fictional-company-logo-4.svg",
    alt: "Company logo 4",
  },
  {
    src: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/logos/fictional-company-logo-5.svg",
    alt: "Company logo 5",
  },
];

const Example = () => (
  <div className="w-full max-w-md">
    <Marquee>
      <MarqueeContent>
        {logos.map((logo) => (
          <MarqueeItem key={logo.alt}>
            <img
              alt={logo.alt}
              className="mx-4 h-6 max-w-24 object-contain opacity-80 grayscale dark:invert"
              src={logo.src}
            />
          </MarqueeItem>
        ))}
      </MarqueeContent>
    </Marquee>
  </div>
);

export default Example;
```