# Logo Marquee
> A "Used by teams at" row of logos that scrolls slowly in a loop and stands still for reduced motion.
- Name: `logo-marquee`
- Status: beta
- Categories: logos, social proof, marketing
- Files: the install writes `logo-marquee.tsx`, and any part files named `logo-marquee-*.tsx`, to your `components` alias, `@/components` by default. Edit them freely. They are yours.
- Other registry items: `@arbokui/button`. The install adds them.
- Gallery: https://arbokui.com/website/logo-marquee
- Registry item: https://arbokui.com/r/logo-marquee.json
## Install
1. Add the registry to `components.json`. Do this first, once:
```bash
npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
```
The command writes this entry. You can also add it by hand:
```json
{
"registries": {
"@arbokui": "https://arbokui.com/r/{name}.json"
}
}
```
Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.
2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:
```bash
npx shadcn@latest add @arbokui/theme
```
3. Add the website component. It also adds every component it uses:
```bash
npx shadcn@latest add @arbokui/logo-marquee
```
## Use it for
- Under a Hero, to show who already uses the product.
- Six to twelve logos. Fewer than six leaves the loop looking thin.
- Draw each logo in currentColor, so they all take the same muted gray and follow the theme.
- Give each logo the company's \`name\`. Screen readers say it, and it is the key.
- Give a logo an \`href\` when you have a case study. Pass your router's link through \`renderLink\`.
- Slow it down or speed it up with className="\[--logo-marquee-duration:60s\]".
## Avoid it for
- Logos you have no right to show. Ask each customer first.
- Two marquees stacked on one page. One moving row is enough.
- Content people must read or press, like plans or news. Use a static grid, or Bento Grid.
- Fewer than four logos. Put them in a plain row instead.
## Props
- `logos`: `{ name: string; logo: ReactNode; href?: string }[]`. The logos, in order. Each name must be unique, since it is the key. An SVG or \![]()
as the direct child of \`logo\` fills its height: 28px, or 32px from 48rem.
- `label`: `ReactNode`. Default `"Used by teams at"`. The line above the logos.
- `pauseButton`: `boolean`. Default `true`. Shows a small button by the label that stops and starts the row. It hides when the row stands still.
- `renderLink`: `(props: LogoMarqueeLinkProps) => ReactNode`. Default `a plain `. Draws each logo's link. Spread the props onto your router's link: (props) => \.
- `className`: `string`. Extra classes on the root, which holds the container query. Set --logo-marquee-duration here to change the speed.
## Accessibility
- The logos are a list. Each one is named by its \`name\`, and the drawn logo is hidden from screen readers.
- The row repeats once to fill the loop. The copy is aria-hidden and inert, so screen readers and Tab meet each logo once.
- The row stops while the pointer is over it, or while focus is inside it. Tab to a linked logo and the row goes back to its start with no fade, then scrolls to show that logo whole.
- A pause button by the label stops it for good, on touch screens too. It says it is pressed with aria-pressed.
- With prefers-reduced-motion, or data-motion="off", the row stands still and wraps, so every logo shows. The pause button and the edge fade go away then.
- In forced colors the edge fade goes away, so a logo at either edge is cut off instead of faded.
## Examples
### Under a hero
```tsx
},
{ name: "Clinic", logo: 
},
{ name: "Library", logo: 
},
{ name: "Bakery", logo: 
},
{ name: "Agency", logo: 
},
{ name: "Workshop", logo: 
},
]}
/>
```
### Links to case studies, slower
```tsx
, href: "/customers/studio" },
{ name: "Clinic", logo: , href: "/customers/clinic" },
]}
renderLink={(props) => }
/>
```