Skip to content
UI Kit
Accent color

Logo clouds for customers and partners

Customers and partners at a glance, in eight layouts from a quiet row to a running marquee and a dark band.

8 variants
Switch category

Trusted by, shown calmly

A logo cloud shows at a glance who already works with you. The eight variants here take your logos as inline SVG or image, and SVG logos take on one calm text color, so twenty different brand colors do not compete with your own page.

Row fits five to seven logos right under the hero. Hairline grid holds a dozen or more in tidy cells. Marquee runs a long list endlessly and stops on hover and focus. With quote and With number add one sentence or one figure next to the logos, Rotating swaps sets in place, and On a dark band gives the row its own surface between two light sections.

Ask for permission before you show a customer logo. Use the same height for every logo, not the same width, so wide and square marks look balanced. Every logo carries the company name for screen readers, pass it as name with each entry.

Logo cloud

Row

One quiet line of logos under a short note.

Open in Studio

Hairline grid

Twelve cells that close without gaps, each lights up on hover.

Open in Studio

Marquee

Two rows running in opposite directions, paused on hover, still for reduced motion.

Open in Studio

Cards

Each logo on its own card with the industry and a link to the story.

Open in Studio

With quote

A customer voice on the left, the logos in a framed grid on the right.

Open in Studio

With number

A large figure leads, the logos follow in a row with hairlines between them.

Open in Studio

Rotating

Six places swap their logo one after another, eighteen logos in the space of six.

Open in Studio

On a dark band

A dark band with a soft accent light, dark in both themes.

Open in Studio

Details

What Logo cloud brings along, read from the registry and the source.

Area
Marketing
Variants
8
Version
1.0.0 · since 1.0.0
File
components/ui/logos.tsx
Brings along
utilskiticonsectionrevealnumber-tickermotion
npm packages
None
Languages
English and German, 2 texts of its own
Studio
All 8 variants editable
In collections
SaaS landing page
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The LogosProps interface from components/ui/logos.tsx, with the comments from the code.

  • variantoptional
    LogosVariant

    rowgridmarqueecardswith-quotewith-numberrotatingon-dark-band

  • titleoptional
    React.ReactNode

    Short line above the logos, e.g. "Trusted by teams at"

  • descriptionoptional
    React.ReactNode
  • logosrequired
    LogoItem[]
  • quoteoptional
    LogosQuote

    with-quote

  • numberoptional
    { value: string; label: React.ReactNode }

    with-number: a big figure and what it counts

  • actionoptional
    { label: string; href: string }

    A link under or next to the logos

Built-in texts

Logo cloud writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 2 texts
customersEnglish CustomersGerman Kunden
storyEnglish Read the storyGerman Zur Geschichte

Accessibility

Read from the source of the component.

  • Sets aria-label, so screen readers announce purpose and state.
  • Uses the role group.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 11 places in the code switch motion off then.

Frequent questions

How do I install Logo cloud?

With aiw add @ai-website/logos. The command puts components/ui/logos.tsx into your project, the code is yours from then on. It brings along icon, section, reveal, number-ticker and motion. It needs no further npm packages.

Which variants does Logo cloud have?

8 variants, Row, Hairline grid, Marquee, Cards, With quote, With number, Rotating and On a dark band. You pick one with the variant prop, for example variant="grid".

Can I translate the texts of Logo cloud?

Yes. Logo cloud carries 2 texts of its own in English and German, such as “Customers” and “Read the story”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Logo cloud?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Logo cloud with aiw_components and install it with aiw_add @ai-website/logos. Name the variant in your prompt, for example variant="row", and the assistant writes your content straight into the props.

Can I adjust Logo cloud without code?

Yes, in the Studio. All 8 variants are editable there, texts, lists and switches. The Studio writes the matching Logos code to copy.

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Logo clouds on a page.

Often searched

Jump to

Copied to the clipboard