Logo marquee
A quiet, continuously moving row of brand marks with a pause control.
pnpm dlx shadcn@latest add @uiarc/logo-marqueeLive block · sample data
- A customer or integration logo strip on a landing page.
- Social proof sections with a heading and a short supporting line.
- Use integrations when each logo needs a description or a connect action.
- Use testimonial-stage when quotes matter more than logos.
- Use carousel when people should browse items by hand.
Installation
Add Logo marquee with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/logo-marqueeAdds the block and its local dependencies, and installs lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
Usage
Use this to show a collection of organizations or tools. Replace the sample marks with brands you have permission to represent.
example.tsx
import { LogoMarquee } from "@/registry/blocks/logo-marquee/logo-marquee"; export function Customers() { return ( <LogoMarquee title="Trusted by product teams" description="Teams of every size ship with us." brands={[{ name: "Acme", icon: "/logos/acme.svg" }, { name: "Globex", icon: "/logos/globex.svg" }]} /> );}Built fromMotionButtonBrand marks
Integration logos
example.tsx
<LogoMarquee title="Works with your stack" description="Connect the tools your team already uses." brands={[ { name: "Linear", icon: "/logos/linear.svg" }, { name: "Figma", icon: "/logos/figma.svg" }, { name: "Notion", icon: "/logos/notion.svg" }, ]}/>API reference
2 parts. The first is the root.
LogoMarquee
A heading, a looping row of brand marks, and a pause control.
PropTypeDefaultDescription
titlestring"Good work moves between tools"Section heading.descriptionstring"From the first idea to the final handoff, a familiar set of tools stays close to the work."Supporting line under the heading.brandsLogoMarqueeBrand[]exampleBrandsMarks to show. Defaults to seven sample tool logos.tone"color" | "mono""color"Color shows each mark in its official brand colors; mono draws every mark in the text color for a quieter row.LogoMarqueeBrand
One brand entry.
PropTypeDefaultDescription
nameRequiredstring–Visible brand name.iconRequiredstring–URL of a single-color SVG, applied as a CSS mask so it inherits the text color.colorstring–Official brand color for a single-color mark in color tone. Leave out for black or white marks such as GitHub, Notion, and Vercel so they follow the text.colorIconstring–URL of a full color SVG for multicolor marks such as Slack or Figma, used in color tone.- The duplicated loop copy is aria-hidden, so each brand is read once.
- The pause button uses aria-pressed and a live region announces the motion state.
- A CSS keyframe loop scrolls two copies of the list for a seamless track.
- Under prefers-reduced-motion the animation stops and the duplicate list is hidden.
- Below 700px the heading and description stack and the marks shrink.
- The track fades at both edges with a mask, so logos never hard-cut at narrow widths.
- The loop is a single CSS transform keyframe on one track, with no JavaScript animation.
- Two copies of the list are rendered for a seamless loop; under reduced motion the animation stops and the copy is hidden.
- Logos are CSS masks from SVG URLs, so use small single-color SVGs.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for a customer or integration logo strip on a landing page.
- Only pass brands you have permission to show; the defaults are illustrative.
- Composes Arc Button for the pause control.
The full library index for assistants is at /llms.txt.
