# Logo marquee
> A “Trusted by” line over a scrolling strip of grayscale logos that take their colour on hover.
A shadcn/ui block from the [@velora](https://velora.colorlib.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/velora/logos-marquee).
- Page, with a live preview: https://shadcn.exchange/r/velora/logos-marquee
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/velora/logos-marquee-light-0b55c3550b2b8287.png
- Registry item: https://velora.colorlib.com/r/logos-marquee.json
- Categories: logo-clouds
- Listed: 2026-10-13, source last changed 2026-10-13
## Install
```bash
npx shadcn@latest add https://velora.colorlib.com/r/logos-marquee.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: `utils`, `https://velora.colorlib.com/r/marquee.json`
## Files
### `src/components/blocks/logos-marquee.tsx`
```tsx
import { Marquee } from "@/components/velora/marquee";
import { cn } from "@/lib/utils";
/*
* Fictional brands drawn as simple geometric marks. Marks paint with the
* brand ramp, so they pick up your colours when a logo is hovered. Swap an
* entry's `mark` for an or your customer's SVG.
*/
const LOGOS: { name: string; wordmark: string; mark: React.ReactNode }[] = [
{
name: "Acme",
wordmark: "font-bold uppercase tracking-[0.2em] text-lg",
mark: (
<>
),
},
{
name: "Northwind",
wordmark: "font-semibold tracking-tight",
mark: (
<>
),
},
{
name: "Lumen",
wordmark: "font-medium lowercase tracking-tight",
mark: (
<>
),
},
{
name: "Orbit",
wordmark: "font-mono font-semibold lowercase",
mark: (
<>
),
},
{
name: "Halcyon",
wordmark: "font-serif italic tracking-tight text-xl",
mark: (
<>
),
},
{
name: "Kestrel",
wordmark: "font-extrabold tracking-tighter",
mark: (
<>
),
},
{
name: "Quartzite",
wordmark: "font-semibold uppercase tracking-widest text-sm",
mark: (
<>
),
},
{
name: "Tidewater",
wordmark: "font-semibold tracking-tight",
mark: (
),
},
{
name: "Foxglove",
wordmark: "font-serif font-medium text-xl",
mark: (
<>
),
},
{
name: "Meridian",
wordmark: "font-light uppercase tracking-[0.3em] text-sm",
mark: (
<>
),
},
];
/**
* Logo strip for under a hero: a short trust line over a slow marquee of
* customer logos. Logos rest in grayscale and take their colour on hover;
* the strip pauses on hover and focus, and becomes a static wrapped row
* under `prefers-reduced-motion`.
*/
export function LogosMarquee() {
return (
Trusted by product teams at{" "}
4,000+ companies, from
seed-stage startups to the Fortune 500