Sections
Logo Cloud Sections
Logo clouds build trust by showing off the companies and partners who use your product. These components support grids, marquees, and bordered layouts for any brand's logo set.
Component Variants
Usage
import {
LogoCloudSimple,
LogoCloudWithHeading,
LogoCloudMarquee,
LogoCloudBordered,
type LogoItem,
} from '@/components/ui/logos';
const logos: LogoItem[] = [
{ name: 'Acme', href: '#', svg: <AcmeLogo /> },
{ name: 'Globex', href: '#', src: '/logos/globex.svg' },
];
// Grayscale grid that colorizes on hover
<LogoCloudSimple logos={logos} />
// "Trusted by" heading above the logos
<LogoCloudWithHeading heading="Trusted by teams at" logos={logos} />
// Infinite horizontal scroll, pauses on hover
<LogoCloudMarquee logos={logos} speedSeconds={30} />
// Logos in bordered grid cells
<LogoCloudBordered logos={logos} columns={4} /> // 3 | 4 | 5
Props Reference
LogoItem
| Prop | Type | Description |
|---|---|---|
name | string | Logo/company name, used for accessible labeling |
src | string | Optional image URL for the logo |
svg | ReactNode | Optional inline SVG mark, takes priority over src |
href | string | Optional link destination; renders the logo as a link |
LogoCloudSimple
| Prop | Type | Default | Description |
|---|---|---|---|
logos | LogoItem[] | Required | Logos to display |
LogoCloudWithHeading
| Prop | Type | Default | Description |
|---|---|---|---|
heading | string | 'Trusted by teams at' | Heading text above the logos |
logos | LogoItem[] | Required | Logos to display |
LogoCloudMarquee
| Prop | Type | Default | Description |
|---|---|---|---|
logos | LogoItem[] | Required | Logos to display, duplicated internally for a seamless loop |
speedSeconds | number | 30 | Duration of one full scroll cycle |
LogoCloudBordered
| Prop | Type | Default | Description |
|---|---|---|---|
logos | LogoItem[] | Required | Logos to display |
columns | 3 | 4 | 5 | 4 | Number of grid columns |
Motion and accessibility
LogoCloudMarquee pauses on hover and respects prefers-reduced-motion, disabling the scroll animation entirely for users who prefer less motion. The duplicated set used to create the seamless loop is hidden from assistive technology.