UIPackage
Menu

Framework

VueReact

Change language

Boilerplate repo

Logo Clouds

blockmarketing
Boilerplate repo

Logo-cloud section set: a static trusted-by grid, single- and tri-row infinite marquees, a categorized filter grid with testimonial modal, a grayscale-hover wall, and a ticker with sector filters and telemetry hover cards.

Also available for Vue ->

Installation

$npx shadcn@latest add https://uipkge.dev/r/react/logos.json
Named registry:npx shadcn@latest add @uipkge-react/logosInstalls to:components/blocks/logos/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

Logo
type Logo { label: string; d: string }

function MarqueeRow({ logos, trackClass, prefix }: { logos: Logo[]; trackClass: string; prefix: string }) {
  return (
    <div data-slot="logos-03" className={`logos03-track ${trackClass} flex w-max gap-12 will-change-transform`}>
      {[...logos, ...logos].map((logo, i) => (
        <div
          key={`${prefix}-${i}`}
          className="text-foreground/55 hover:text-foreground inline-flex shrink-0 items-center gap-2 transition-colors"
        >
          <svg viewBox="0 0 24 24" className="size-5 shrink-0" fill="currentColor" role="img" aria-label={logo.label}>
            <title>{logo.label}</title>
            <path d={logo.d} />
          </svg>
          <span className="text-base font-semibold tracking-tight">{logo.label}</span>
        </div>
      ))}
    </div>
  )
}
CustomerEntity
interface CustomerEntity {
  id: string
  name: string
  category: 'cloud' | 'devtools' | 'fintech' | 'ai'
  tier: string
  scale: string
  quote: string
  author: string
  title: string
}
BrandPartner
interface BrandPartner {
  id: string
  name: string
  category: 'devtools' | 'fintech' | 'enterprise'
  role: string
  metric: string
  region: string
}

npm dependencies

lucide-react

Files installed (6)

  • components/blocks/logos/Logos01.tsx4.5 kB
    // Sample logo set sourced from simpleicons.org (MIT). Swap these paths and
// labels for your own customer logos before shipping.
const LOGOS = [
  {
    label: 'Vercel',
    d: 'm12 1.608 12 20.784H0Z',
  },
  {
    label: 'Stripe',
    d: 'M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z',
  },
  {
    label: 'Linear',
    d: 'M2.886 4.18A11.982 11.982 0 0 1 11.99 0C18.624 0 24 5.376 24 12.009c0 3.64-1.62 6.903-4.18 9.105L2.887 4.18ZM1.817 5.626l16.556 16.556c-.524.33-1.075.62-1.65.866L.951 7.277c.247-.575.537-1.126.866-1.65ZM.322 9.163l14.515 14.515c-.71.172-1.443.282-2.195.322L0 11.358a12 12 0 0 1 .322-2.195Zm-.17 4.862 9.823 9.824a12.02 12.02 0 0 1-9.824-9.824Z',
  },
  {
    label: 'Notion',
    d: 'M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z',
  },
  {
    label: 'Figma',
    d: 'M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491zM12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117V7.51zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471H8.148zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981H8.148zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539zm-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019 1.705 0 3.093-1.376 3.093-3.068v-2.97H8.148zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49zm-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-.098z',
  },
  {
    label: 'Loom',
    d: 'M24 10.665h-7.018l6.078-3.509-1.335-2.312-6.078 3.509 3.508-6.077L16.843.94l-3.508 6.077V0h-2.67v7.018L7.156.94 4.844 2.275l3.509 6.077-6.078-3.508L.94 7.156l6.078 3.509H0v2.67h7.017L.94 16.844l1.335 2.313 6.077-3.508-3.509 6.077 2.312 1.335 3.509-6.078V24h2.67v-7.017l3.508 6.077 2.312-1.335-3.509-6.078 6.078 3.509 1.335-2.313-6.077-3.508h7.017v-2.67H24zm-12 4.966a3.645 3.645 0 1 1 0-7.29 3.645 3.645 0 0 1 0 7.29z',
  },
]

export function Logos01() {
  return (
    <section data-slot="logos-01" className="bg-muted/30 border-y">
      <div className="mx-auto max-w-6xl px-6 py-14">
        <p className="text-muted-foreground text-center text-xs font-medium tracking-widest uppercase">
          Trusted by teams at
        </p>
        <div className="mt-10 grid grid-cols-2 items-center justify-items-center gap-x-10 gap-y-8 sm:grid-cols-3 lg:grid-cols-6">
          {LOGOS.map((logo) => (
            <div
              key={logo.label}
              className="text-foreground/55 hover:text-foreground inline-flex items-center gap-2 transition-colors"
            >
              <svg
                viewBox="0 0 24 24"
                className="size-5 shrink-0"
                fill="currentColor"
                role="img"
                aria-label={logo.label}
              >
                <title>{logo.label}</title>
                <path d={logo.d} />
              </svg>
              <span className="text-base font-semibold tracking-tight">{logo.label}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
  • components/blocks/logos/Logos02.tsx5.5 kB
  • components/blocks/logos/Logos03.tsx13.3 kB
  • components/blocks/logos/LogoCloudCategorizedGrid.tsx11.7 kB
  • components/blocks/logos/LogoCloudGrayscale.tsx1.8 kB
  • components/blocks/logos/LogoTickerInfinite.tsx8.5 kB

Raw manifest:https://uipkge.dev/r/react/logos.json