# Brands Section v2

> Infinite marquee of brand logos rendered as a seamless row of borderless-radius cards—full border container, no gaps, shared dividers between slots.

A shadcn/ui block from the [@uiception](https://uiception.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/brands-section-v2).

- Page, with a live preview: https://shadcn.exchange/r/uiception/brands-section-v2
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiception/brands-section-v2-light-442b5408e81e668f.png
- Registry item: https://uiception.com/r/brands-section-v2.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiception.com/r/brands-section-v2.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Files

### `registry/new-york/blocks/brands-section-v2/page.tsx`

```tsx
import BrandsSectionV2 from "./components/brands-section-v2"

export default function Page() {
  return <BrandsSectionV2 />
}
```

### `registry/new-york/blocks/brands-section-v2/components/brands-section-v2.tsx`

```tsx
import Marquee from "./marquee"
import { brands } from "../lib/brands"

import "../styles/brands-section-v2.css"

export default function BrandsSectionV2() {
  return (
    <section className="py-4 md:py-6 lg:py-8">
      <div className="mx-auto max-w-6xl px-4">
        <Marquee brands={brands} />
      </div>
    </section>
  )
}
```

### `registry/new-york/blocks/brands-section-v2/components/brand-logo.tsx`

```tsx
import type { Brand } from "../lib/brands"

export default function BrandLogo({ brand }: { brand: Brand }) {
  const Light = brand.light
  const Dark = brand.dark

  if (Dark) {
    return (
      <span className="inline-flex h-12 w-12 items-center justify-center">
        <Light
          className="bs2-logo block h-full w-full dark:hidden"
          aria-label={brand.name}
        />
        <Dark
          className="bs2-logo hidden h-full w-full dark:block"
          aria-label={brand.name}
        />
      </span>
    )
  }

  return (
    <span className="inline-flex h-12 w-12 items-center justify-center">
      <Light className="bs2-logo h-full w-full" aria-label={brand.name} />
    </span>
  )
}
```

### `registry/new-york/blocks/brands-section-v2/components/marquee.tsx`

```tsx
import type { Brand } from "../lib/brands"
import BrandLogo from "./brand-logo"

export default function Marquee({ brands }: { brands: Brand[] }) {
  return (
    <div className="relative overflow-hidden border border-border">
      <div
        className="pointer-events-none absolute top-0 left-0 z-1 h-full w-35 bg-linear-to-r from-background to-transparent motion-reduce:hidden"
        aria-hidden
      />
      <div
        className="pointer-events-none absolute top-0 right-0 z-1 h-full w-35 bg-linear-to-l from-background to-transparent motion-reduce:hidden"
        aria-hidden
      />

      <div className="bs2-track flex min-h-full w-max flex-nowrap items-stretch will-change-transform backface-hidden">
        <div
          className="flex shrink-0 items-stretch"
          role="list"
          aria-label="Database brand logos"
        >
          {brands.map((brand) => (
            <div
              key={brand.name}
              role="listitem"
              className="flex w-32 items-center justify-center border-r border-border py-3 md:w-40 md:py-4"
            >
              <BrandLogo brand={brand} />
            </div>
          ))}
        </div>
        <div className="flex shrink-0 items-stretch" aria-hidden>
          {brands.map((brand) => (
            <div
              key={`dup-${brand.name}`}
              className="flex w-32 items-center justify-center border-r border-border py-3 md:w-40 md:py-4"
            >
              <BrandLogo brand={brand} />
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
```

### `registry/new-york/blocks/brands-section-v2/lib/brands.ts`

```ts
import type { ComponentType, SVGProps } from "react"

import { Convex } from "@/components/ui/svgs/convex"
import { Supabase } from "@/components/ui/svgs/supabase"
import { TursoLight } from "@/components/ui/svgs/tursoLight"
import { TursoDark } from "@/components/ui/svgs/tursoDark"
import { Upstash } from "@/components/ui/svgs/upstash"
import { Neon } from "@/components/ui/svgs/neon"
import { Planetscale } from "@/components/ui/svgs/planetscale"
import { PlanetscaleDark } from "@/components/ui/svgs/planetscaleDark"
import { MongodbIconLight } from "@/components/ui/svgs/mongodbIconLight"
import { MongodbIconDark } from "@/components/ui/svgs/mongodbIconDark"

export type SvgComponent = ComponentType<SVGProps<SVGSVGElement>>

export type Brand = {
  name: string
  light: SvgComponent
  dark?: SvgComponent
}

export const brands: Brand[] = [
  { name: "Convex",      light: Convex },
  { name: "Supabase",    light: Supabase },
  { name: "Turso",       light: TursoLight,      dark: TursoDark },
  { name: "Upstash",     light: Upstash },
  { name: "Neon",        light: Neon },
  { name: "PlanetScale", light: Planetscale,     dark: PlanetscaleDark },
  { name: "MongoDB",     light: MongodbIconLight, dark: MongodbIconDark },
]
```

### `registry/new-york/blocks/brands-section-v2/styles/brands-section-v2.css`

```css
.bs2-track {
  animation: bs2-marquee 40s linear infinite;
}

@keyframes bs2-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bs2-track {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}
```

### `components/ui/svgs/convex.tsx`

```tsx
import type { SVGProps } from "react";

const Convex = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} viewBox="28 28 128 132" fill="none">
    <path
      fill="#F3B01C"
      d="M108.092 130.021c18.166-2.018 35.293-11.698 44.723-27.854-4.466 39.961-48.162 65.218-83.83 49.711-3.286-1.425-6.115-3.796-8.056-6.844-8.016-12.586-10.65-28.601-6.865-43.135 10.817 18.668 32.81 30.111 54.028 28.122Z"
    />
    <path
      fill="#8D2676"
      d="M53.401 90.174c-7.364 17.017-7.682 36.94 1.345 53.336-31.77-23.902-31.423-75.052-.388-98.715 2.87-2.187 6.282-3.485 9.86-3.683 14.713-.776 29.662 4.91 40.146 15.507-21.3.212-42.046 13.857-50.963 33.555Z"
    />
    <path
      fill="#EE342F"
      d="M114.637 61.855C103.89 46.87 87.069 36.668 68.639 36.358c35.625-16.17 79.446 10.047 84.217 48.807.444 3.598-.139 7.267-1.734 10.512-6.656 13.518-18.998 24.002-33.42 27.882 10.567-19.599 9.263-43.544-3.065-61.704Z"
    />
  </svg>
);

export { Convex };
```

### `components/ui/svgs/supabase.tsx`

```tsx
import type { SVGProps } from "react";

const Supabase = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} viewBox="0 0 109 113" fill="none">
    <path
      d="M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z"
      fill="url(#paint0_linear)"
    />
    <path
      d="M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z"
      fill="url(#paint1_linear)"
      fillOpacity="0.2"
    />
    <path
      d="M45.317 2.07103C48.1765 -1.53037 53.9745 0.442937 54.0434 5.041L54.4849 72.2922H9.83113C1.64038 72.2922 -2.92775 62.8321 2.1655 56.4175L45.317 2.07103Z"
      fill="#3ECF8E"
    />
    <defs>
      <linearGradient
        id="paint0_linear"
        x1="53.9738"
        y1="54.974"
        x2="94.1635"
        y2="71.8295"
        gradientUnits="userSpaceOnUse"
      >
        <stop stopColor="#249361" />
        <stop offset="1" stopColor="#3ECF8E" />
      </linearGradient>
      <linearGradient
        id="paint1_linear"
        x1="36.1558"
        y1="30.578"
        x2="54.4844"
        y2="65.0806"
        gradientUnits="userSpaceOnUse"
      >
        <stop />
        <stop offset="1" stopOpacity="0" />
      </linearGradient>
    </defs>
  </svg>
);

export { Supabase };
```

### `components/ui/svgs/tursoLight.tsx`

```tsx
import type { SVGProps } from "react";

const TursoLight = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} fill="none" viewBox="0 0 201 170">
    <path
      d="m200.035 48.61c-4.67-27.94-29.16-48.61-29.16-48.61v30.78l-14.54 3.75-9.11-10.97-4.81 9.46c-9.92-2.7-23.58-4.44-42.37-4.44-18.7901 0-32.4501 1.75-42.3701 4.44l-4.81-9.46-9.11 10.97-14.54-3.75v-30.78s-24.48997 20.67-29.1599684 48.61l32.1399684 11.12c1.05 19.43 9.79 71.88 12.29 76.64 2.66 5.07 16.78 19.56 27.83 25.13 0 0 4-4.23 6.44-7.96 3.1 3.65 19.11 16.45 21.3001 16.45 2.19 0 18.2-12.79 21.3-16.45 2.44 3.73 6.44 7.96 6.44 7.96 11.05-5.57 25.17-20.06 27.83-25.13 2.5-4.76 11.24-57.21 12.29-76.64l32.14-11.12zm-46.19 44.74-21.75 1.94 1.91 26.67s-13.23 10.95-33.96 10.95c-20.7301 0-33.9601-10.95-33.9601-10.95l1.91-26.67-21.75-1.94-3.72-30.04 36.05 12.48-2.8 37.39c6.7 1.7 13.75 3.39 24.2801 3.39 10.53 0 17.57-1.69 24.27-3.39l-2.8-37.39 36.05-12.48-3.72 30.04z"
      fill="#183134"
    />
  </svg>
);

export { TursoLight };
```

### `components/ui/svgs/tursoDark.tsx`

```tsx
import type { SVGProps } from "react";

const TursoDark = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} fill="none" viewBox="0 0 201 170">
    <path
      d="m100.055 170c-2.1901 0-18.2001-12.8-21.3001-16.45-2.44 3.73-6.44 7.96-6.44 7.96-11.05-5.57-25.17-20.06-27.83-25.13-2.62-5-12.13-62.58-12.39-79.3-.34-9.41 5.85-28.49 67.9601-28.49 62.11 0 68.29 19.08 67.96 28.49-.25 16.72-9.76 74.3-12.39 79.3-2.66 5.07-16.78 19.56-27.83 25.13 0 0-4-4.23-6.44-7.96-3.1 3.65-19.11 16.45-21.3 16.45z"
      fill="#1ebca1"
    />
    <path
      d="m100.055 132.92c-20.7301 0-33.9601-10.95-33.9601-10.95l1.91-26.67-21.75-1.94-3.91-31.55h115.4301l-3.91 31.55-21.75 1.94 1.91 26.67s-13.23 10.95-33.96 10.95z"
      fill="#183134"
    />
    <path
      d="m121.535 75.79 78.52-27.18c-4.67-27.94-29.16-48.61-29.16-48.61v30.78l-14.54 3.75-9.11-10.97-7.8 15.34-39.38 10.16-39.3801-10.16-7.8-15.34-9.11 10.97-14.54-3.75v-30.78s-24.50997 20.67-29.1799684 48.61l78.5199684 27.18-2.8 37.39c6.7 1.7 13.75 3.39 24.2801 3.39 10.53 0 17.57-1.69 24.27-3.39l-2.8-37.39z"
      fill="#4ff8d2"
    />
  </svg>
);

export { TursoDark };
```

### `components/ui/svgs/upstash.tsx`

```tsx
import type { SVGProps } from "react";

const Upstash = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} viewBox="0 0 256 341" preserveAspectRatio="xMidYMid">
    <path
      fill="#00C98D"
      d="M0 298.417c56.554 56.553 148.247 56.553 204.801 0 56.554-56.554 56.554-148.247 0-204.801l-25.6 25.6c42.415 42.416 42.415 111.185 0 153.6-42.416 42.416-111.185 42.416-153.601 0L0 298.416Z"
    />
    <path
      fill="#00C98D"
      d="M51.2 247.216c28.277 28.277 74.123 28.277 102.4 0 28.277-28.276 28.277-74.123 0-102.4l-25.6 25.6c14.14 14.138 14.14 37.061 0 51.2-14.138 14.139-37.061 14.139-51.2 0l-25.6 25.6ZM256 42.415c-56.554-56.553-148.247-56.553-204.8 0-56.555 56.555-56.555 148.247 0 204.801l25.599-25.6c-42.415-42.415-42.415-111.185 0-153.6 42.416-42.416 111.185-42.416 153.6 0L256 42.416Z"
    />
    <path
      fill="#00C98D"
      d="M204.8 93.616c-28.276-28.277-74.124-28.277-102.4 0-28.278 28.277-28.278 74.123 0 102.4l25.6-25.6c-14.14-14.138-14.14-37.061 0-51.2 14.138-14.139 37.06-14.139 51.2 0l25.6-25.6Z"
    />
    <path
      fill="#FFF"
      fillOpacity=".4"
      d="M256 42.415c-56.554-56.553-148.247-56.553-204.8 0-56.555 56.555-56.555 148.247 0 204.801l25.599-25.6c-42.415-42.415-42.415-111.185 0-153.6 42.416-42.416 111.185-42.416 153.6 0L256 42.416Z"
    />
    <path
      fill="#FFF"
      fillOpacity=".4"
      d="M204.8 93.616c-28.276-28.277-74.124-28.277-102.4 0-28.278 28.277-28.278 74.123 0 102.4l25.6-25.6c-14.14-14.138-14.14-37.061 0-51.2 14.138-14.139 37.06-14.139 51.2 0l25.6-25.6Z"
    />
  </svg>
);

export { Upstash };
```

### `components/ui/svgs/neon.tsx`

```tsx
import type { SVGProps } from "react";

const Neon = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} viewBox="0 0 64 64" fill="none">
    <title>Neon</title>
    <path
      d="M63 0.0177909V63.5526L38.4178 42.2501V63.5526H0V0L63 0.0177909ZM7.72251 55.8389H30.6953V25.3238L55.2779 47.0476V7.72922L7.72251 7.71559V55.8389Z"
      fill="#37C38F"
    />
  </svg>
);

export { Neon };
```

### `components/ui/svgs/planetscale.tsx`

```tsx
import type { SVGProps } from "react";

const Planetscale = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 256">
    <path d="M256 128a128 128 0 01-128 128zM128 0c52 0 96.7 31 116.8 75.5L75.5 244.8c-7.3-3.3-14.2-7.2-20.7-11.7L160 128h-32l-90.5 90.5A128 128 0 01128 0z" />
  </svg>
);

export { Planetscale };
```

### `components/ui/svgs/planetscaleDark.tsx`

```tsx
import type { SVGProps } from "react";

const PlanetscaleDark = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 256">
    <path
      fill="#fff"
      d="M256 128a128 128 0 01-128 128zM128 0c52 0 96.7 31 116.8 75.5L75.5 244.8c-7.3-3.3-14.2-7.2-20.7-11.7L160 128h-32l-90.5 90.5A128 128 0 01128 0z"
    />
  </svg>
);

export { PlanetscaleDark };
```

### `components/ui/svgs/mongodbIconLight.tsx`

```tsx
import type { SVGProps } from "react";

const MongodbIconLight = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} fill="none" viewBox="0 0 120 258">
    <path
      fill="#001E2B"
      d="M83.009 28.756C72.133 15.909 62.767 2.86 60.854.15a.488.488 0 0 0-.705 0c-1.913 2.71-11.28 15.758-22.155 28.605-93.353 118.536 14.703 198.531 14.703 198.531l.906.602c.806 12.346 2.82 30.111 2.82 30.111h8.056s2.014-17.665 2.82-30.111l.906-.702c.101 0 108.157-79.895 14.804-198.431ZM60.45 225.48s-4.834-4.115-6.143-6.223v-.2l5.84-129.076c0-.401.605-.401.605 0l5.841 129.076v.2c-1.31 2.108-6.143 6.223-6.143 6.223Z"
    />
  </svg>
);

export { MongodbIconLight };
```

### `components/ui/svgs/mongodbIconDark.tsx`

```tsx
import type { SVGProps } from "react";

const MongodbIconDark = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} fill="none" viewBox="0 0 120 257">
    <path
      fill="#00ED64"
      d="M82.323 28.55C71.537 15.795 62.249 2.84 60.35.15c-.2-.2-.5-.2-.7 0-1.897 2.69-11.185 15.645-21.971 28.4C-54.902 146.238 52.26 225.661 52.26 225.661l.9.597c.798 12.258 2.795 29.896 2.795 29.896h7.99s1.998-17.539 2.797-29.896l.899-.697c.1 0 107.263-79.323 14.68-197.01ZM59.95 223.867s-4.793-4.086-6.092-6.179v-.199l5.793-128.151c0-.4.6-.4.6 0l5.792 128.151v.199c-1.299 2.093-6.093 6.179-6.093 6.179Z"
    />
  </svg>
);

export { MongodbIconDark };
```