Sections

LogoCloud

A horizontal row of company logos (or text placeholders) to build social proof

Quick Preview

Trusted by teams at

Next.js

React

TypeScript

Tailwind

App Router

Accessibility

Animation

Design Systems

Custom Title

As seen in

Next.js

React

TypeScript

Tailwind

App Router

Accessibility

Animation

Design Systems

Installation

// Add logo data to
src/lib/constants.ts  →  LOGO_CLOUD
src/types/index.ts    →  LogoItem

// Copy the component from
src/components/sections/LogoCloud.tsx

Usage

import { LogoCloud } from '@/components/sections/LogoCloud'

// Default — uses LOGO_CLOUD from constants
export default function HomePage() {
  return <LogoCloud />
}

// With real logo images
const logos = [
  { name: 'Vercel', src: '/logos/vercel.svg' },
  { name: 'Stripe', src: '/logos/stripe.svg' },
  { name: 'GitHub', placeholder: 'GH' }, // text fallback
]

export default function HomePage() {
  return <LogoCloud logos={logos} title="Trusted by" />
}

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a sections component named LogoCloud in React/Next.js.
Goal: recreate the same overall UI and behavior as the LogoCloud reference from a component gallery.
What it needs to communicate: A horizontal row of company logos (or text placeholders) to build social proof.

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Treat the result as a full-width section with strong layout rhythm and responsive spacing.
- Preserve headline hierarchy, supporting copy, and clear CTA emphasis.
- Existing documented dependencies: @/lib/constants (LOGO_CLOUD), @/types (LogoItem)
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- logos: LogoItem[] — Array of logo items (defaults to LOGO_CLOUD from constants)
- title: string — default "Trusted by teams at" — Label text above logos
- className: string — Additional CSS classes

Reference usage patterns:
- Default

```tsx
<LogoCloud />
```

- Custom title

```tsx
<LogoCloud title="As seen in" />
```

Feature expectations:
- Supports real <img> logos or emoji/text placeholders
- Grayscale hover-to-color effect for real images
- Responsive flex-wrap layout
- Data-driven: edit LOGO_CLOUD in constants.ts

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

Prop	Type	Default	Description
`logos`	`LogoItem[]`	-	Array of logo items (defaults to LOGO_CLOUD from constants)
`title`	`string`	`"Trusted by teams at"`	Label text above logos
`className`	`string`	-	Additional CSS classes

Features

✓Supports real <img> logos or emoji/text placeholders
✓Grayscale hover-to-color effect for real images
✓Responsive flex-wrap layout
✓Data-driven: edit LOGO_CLOUD in constants.ts