Logo Cloud

Shows the names or logos of customers in a slow moving band under a short line of text.

Teams that already run their money on Andromeda

  • Northwind
  • Lumen
  • Parallax
  • Vantage
  • Kestrel
  • Meridian

Configurations

Supported configurations for this component.

DefaultNo label

Default

Interaction states covered by the API and the style contract.

Hover

Configurations

2 examples
Default

Teams that already run their money on Andromeda

  • Northwind
  • Lumen
  • Parallax
  • Vantage
  • Kestrel
  • Meridian
No label
  • Northwind
  • Lumen
  • Parallax
  • Vantage
  • Kestrel
  • Meridian

Default

1 example
  • Northwind
  • Lumen
  • Parallax
  • Vantage
  • Kestrel
  • Meridian
Rest

Teams that already run their money on Andromeda

  • Northwind
  • Lumen
  • Parallax
  • Vantage
  • Kestrel
  • Meridian
Hover

Add to your project

One command adds this component to your project.

1

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

LogoCloudLogo

PropTypeDefaultDescription
namereqstring-The customer's name: set as type, or the accessible name of `logo`.
symbolReact.ReactNode-SVG content on a 20 x 20 grid in `currentColor`, drawn at 1em before the name. Defaults to the slot's built-in symbol (six, repeating).
logoReact.ReactNode-A real logo (an svg or img) shown in place of the symbol and the type treatment. Paint it in `currentColor` to keep the muted rest and the hover lift.

LogoCloud

PropTypeDefaultDescription
logosreqLogoCloudLogo[]-The marks, in order. Each takes its slot's symbol and treatment unless it brings its own.
labelReact.ReactNode-The centred line above the band; it also names the list.
durationnumber52Seconds for one full pass of the band.
aria-labelstring-Names the list when there is no `label`.

More Andromeda Pro components

Marquee

Loops a row of items slowly across its width, so a long list shows without taking room.

3 variants

Media Card

Presents an item on its own artwork, for content the image identifies.

6 variants

Message

Shows one turn of a conversation, from the user or from the assistant, with its actions.

3 variants1 states