Logo marquee

Block

Customer logos in a slow scrolling row.

Installs components/ui/logo-marquee.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/logo-marquee.json

Trusted by teams at

Northwind
Kestrel Labs
Helio
Lumen & Co
Orchard
Parcel
Quillstack
Riverbank

When to use #

Use it for

Social proof near the top of a page.

Skip it when

Fewer than five logos.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/logo-marquee.json

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { LogoMarquee } from "@/components/ui/logo-marquee"

const names = ["Northwind", "Kestrel Labs", "Helio", "Lumen & Co", "Orchard", "Parcel", "Quillstack", "Riverbank"];

export function LogoMarqueeDemo() {
  return (
    <LogoMarquee logos={names.map((n, i) => ({ id: n, name: n, node: <span style={{ fontFamily: i % 2 ? "var(--font-mono)" : undefined, letterSpacing: i % 3 === 0 ? "0.04em" : undefined }}>{n}</span> }))} />
  );
}

API reference #

LogoMarquee

component

PropTypeDefault

logos *readonly Logo[]—

titlestring"Trusted by teams at"

labelstring"Customers"

classNamestring—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.