Marketing

Logo Cloud

A partner or trusted-by logo grid with an optional headline and configurable greyscale filter. Logos can be images, custom icon nodes, or plain text names.

Trusted by teams at

Vercel

Stripe

Linear

Notion

Figma

Supabase

import { LogoCloud } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add logo-cloud

Import

import.tsx

import { LogoCloud } from "@aetherstack/blocks"

Usage

logo-cloud.tsx

import { LogoCloud } from "@aetherstack/blocks"

export default function TrustedBy() {
  return (
    <LogoCloud
      headline="Trusted by teams at"
      grayscale
      logos={[
        { name: "Vercel" },
        { name: "Stripe" },
        { name: "Linear" },
        { name: "Notion" },
        { name: "Figma" },
        { name: "Supabase" },
      ]}
    />
  )
}

Props

Prop	Type	Default	Description
logos*	{ name: string; src?: string; icon?: ReactNode; href?: string }[]	—	Logo items. Use src for images, icon for custom SVGs, or omit both for text-only display.
headline	string	—	Optional label above the logo grid.
grayscale	boolean	true	Apply greyscale filter with hover to full colour.
className	string	—	Additional classes on the section wrapper.

* Required

Accessibility

→Logo images include an alt attribute set to the logo name.
→Logo links include aria-label set to the logo name.
→Text-only logos are visible to all users without requiring image support.