---
title: Logos
description: Logo rows, grids, and marquees for shared context.
group: Blocks
order: 32
---

Simple ways to show customers, partners, or integrations. Replace the sample marks with your own.

## Static row

A short label and one centered logo row that wraps on narrow widths.

```tsx
"use client";

import { cn } from "@/lib/utils";

type Logos01Props = {
  className?: string;
};

const LOGOS = [
  { src: "/assets/icons/logos/slack.svg", alt: "Slack" },
  { src: "/assets/icons/logos/notion.svg", alt: "Notion" },
  { src: "/assets/icons/logos/linear.svg", alt: "Linear" },
  { src: "/assets/icons/logos/github.svg", alt: "GitHub" },
  { src: "/assets/icons/logos/figma.svg", alt: "Figma" },
  { src: "/assets/icons/logos/stripe.svg", alt: "Stripe" },
] as const;

export function Logos01({ className }: Logos01Props) {
  return (
    <section className={cn("@container w-full bg-background", className)}>
      <div className="mx-auto flex w-full max-w-3xl flex-col items-center gap-5 px-4 py-10 @[32rem]:gap-6 @[32rem]:px-6 @[32rem]:py-12">
        <p className="text-xs tracking-wide text-muted-foreground">
          Trusted by teams everywhere
        </p>
        <ul className="flex flex-nowrap items-center justify-center gap-x-4 @[32rem]:gap-x-8">
          {LOGOS.map((logo) => (
            <li key={logo.src} className="flex items-center">
              <img
                src={logo.src}
                alt={logo.alt}
                className="h-4 w-auto object-contain opacity-70 brightness-0 @[32rem]:h-6 dark:invert"
              />
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}
```

### Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add logos-01
```

### Usage

```tsx
import { Logos01 } from "@/components/blocks/logos/logos-01"
```

```tsx
<Logos01 />
```

## Marquee

A left-aligned introduction with an infinite logo ticker below.

```tsx
"use client";

import { cn } from "@/lib/utils";

type Logos02Props = {
  className?: string;
};

const LOGOS = [
  "slack",
  "notion",
  "linear",
  "github",
  "figma",
  "stripe",
  "intercom",
  "airtable",
  "hubspot",
  "asana",
] as const;

export function Logos02({ className }: Logos02Props) {
  const track = [...LOGOS, ...LOGOS, ...LOGOS];

  return (
    <section className={cn("w-full overflow-hidden bg-background", className)}>
      <style>{`
        @keyframes logos-02-scroll {
          from { transform: translateX(0); }
          to { transform: translateX(-33.333%); }
        }
      `}</style>
      <div className="flex w-full flex-col gap-5 py-10">
        <p className="px-6 text-left text-xs tracking-wide text-muted-foreground">
          Trusted by companies everywhere
        </p>
        <div className="w-full overflow-hidden" aria-hidden="true">
          <div
            className="flex w-max items-center"
            style={{ animation: "logos-02-scroll 28s linear infinite" }}
          >
            {track.map((name, i) => (
              <img
                key={`${name}-${i}`}
                src={`/assets/icons/logos/${name}.svg`}
                alt=""
                className="mr-10 h-5 w-auto shrink-0 object-contain opacity-70 brightness-0 sm:mr-12 sm:h-6 dark:invert"
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
```

### Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add logos-02
```

### Usage

```tsx
import { Logos02 } from "@/components/blocks/logos/logos-02"
```

```tsx
<Logos02 />
```

## Grid

An even logo grid with three columns on narrow screens and up to six when wide.

```tsx
"use client";

import { cn } from "@/lib/utils";

type Logos03Props = {
  className?: string;
};

const LOGOS = [
  { src: "/assets/icons/logos/slack.svg", alt: "Slack" },
  { src: "/assets/icons/logos/notion.svg", alt: "Notion" },
  { src: "/assets/icons/logos/linear.svg", alt: "Linear" },
  { src: "/assets/icons/logos/github.svg", alt: "GitHub" },
  { src: "/assets/icons/logos/figma.svg", alt: "Figma" },
  { src: "/assets/icons/logos/stripe.svg", alt: "Stripe" },
  { src: "/assets/icons/logos/intercom.svg", alt: "Intercom" },
  { src: "/assets/icons/logos/airtable.svg", alt: "Airtable" },
  { src: "/assets/icons/logos/hubspot.svg", alt: "HubSpot" },
  { src: "/assets/icons/logos/asana.svg", alt: "Asana" },
  { src: "/assets/icons/logos/dropbox.svg", alt: "Dropbox" },
  { src: "/assets/icons/logos/snowflake.svg", alt: "Snowflake" },
] as const;

export function Logos03({ className }: Logos03Props) {
  return (
    <section className={cn("@container w-full bg-background", className)}>
      <div className="mx-auto flex w-full max-w-3xl flex-col items-center gap-6 px-4 py-10 @[32rem]:px-6 @[32rem]:py-12">
        <p className="text-xs tracking-wide text-muted-foreground">
          Trusted by companies everywhere
        </p>
        <ul className="grid w-full grid-cols-3 gap-x-6 gap-y-8 @[28rem]:grid-cols-4 @[40rem]:grid-cols-6">
          {LOGOS.map((logo) => (
            <li key={logo.src} className="flex items-center justify-center">
              <img
                src={logo.src}
                alt={logo.alt}
                className="h-5 w-auto object-contain opacity-70 brightness-0 @[32rem]:h-6 dark:invert"
              />
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}
```

### Installation

```bash
npx @arctis-sh/@arctis-sh/ui@latest add logos-03
```

### Usage

```tsx
import { Logos03 } from "@/components/blocks/logos/logos-03"
```

```tsx
<Logos03 />
```