# Brands Section v7
> Serif headline with dual row infinite pill marquees of dev and infra logos scrolling in opposite directions, with edge fades and a footer link.
A shadcn/ui block from the [@uiception](https://uiception.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/brands-section-v7).
- Page, with a live preview: https://shadcn.exchange/r/uiception/brands-section-v7
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiception/brands-section-v7-light-e3333e16578bad5a.png
- Registry item: https://uiception.com/r/brands-section-v7.json
- Listed: 2026-10-13, source last changed 2026-10-13
## Install
```bash
npx shadcn@latest add https://uiception.com/r/brands-section-v7.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-v7/page.tsx`
```tsx
import BrandsSectionV7 from "./components/brands-section-v7"
export default function Page() {
return
{brands.map((brand) => (
))}
{Dark ? (
<>
{brand.name}
)
}
```
### `registry/new-york/blocks/brands-section-v7/lib/brands.ts`
```ts
import type { ComponentType, SVGProps } from "react"
import { Stripe } from "@/components/ui/svgs/stripe"
import { CursorLight } from "@/components/ui/svgs/cursorLight"
import { CursorDark } from "@/components/ui/svgs/cursorDark"
import { ClaudeAiIcon } from "@/components/ui/svgs/claudeAiIcon"
import { Perplexity } from "@/components/ui/svgs/perplexity"
import { Slack } from "@/components/ui/svgs/slack"
import { Vercel } from "@/components/ui/svgs/vercel"
import { VercelDark } from "@/components/ui/svgs/vercelDark"
import { Convex } from "@/components/ui/svgs/convex"
import { Supabase } from "@/components/ui/svgs/supabase"
import { Google } from "@/components/ui/svgs/google"
import { Openai } from "@/components/ui/svgs/openai"
import { OpenaiDark } from "@/components/ui/svgs/openaiDark"
import { GithubLight } from "@/components/ui/svgs/githubLight"
import { GithubDark } from "@/components/ui/svgs/githubDark"
import { Railway } from "@/components/ui/svgs/railway"
import { RailwayDark } from "@/components/ui/svgs/railwayDark"
import { Salesforce } from "@/components/ui/svgs/salesforce"
import { MongodbIconLight } from "@/components/ui/svgs/mongodbIconLight"
import { MongodbIconDark } from "@/components/ui/svgs/mongodbIconDark"
import { Neon } from "@/components/ui/svgs/neon"
import { Planetscale } from "@/components/ui/svgs/planetscale"
import { PlanetscaleDark } from "@/components/ui/svgs/planetscaleDark"
import { Upstash } from "@/components/ui/svgs/upstash"
import { auth0 } from "@/components/ui/svgs/auth0"
import { twilio } from "@/components/ui/svgs/twilio"
import { workos } from "@/components/ui/svgs/workos"
import { workosLight } from "@/components/ui/svgs/workosLight"
import { Meta } from "@/components/ui/svgs/meta"
import { MetaDark } from "@/components/ui/svgs/metaDark"
import { NvidiaIconLight } from "@/components/ui/svgs/nvidiaIconLight"
import { NvidiaIconDark } from "@/components/ui/svgs/nvidiaIconDark"
import { AstroIconLight } from "@/components/ui/svgs/astroIconLight"
import { AstroIconDark } from "@/components/ui/svgs/astroIconDark"
import { SanityLight } from "@/components/ui/svgs/sanityLight"
import { SanityDark } from "@/components/ui/svgs/sanityDark"
export type SvgComponent = ComponentType>
export type Brand = {
name: string
light: SvgComponent
dark?: SvgComponent
}
export const rowOneBrands: Brand[] = [
{ name: "Stripe", light: Stripe },
{ name: "Cursor", light: CursorLight, dark: CursorDark },
{ name: "Claude", light: ClaudeAiIcon },
{ name: "Perplexity", light: Perplexity },
{ name: "Slack", light: Slack },
{ name: "Vercel", light: Vercel, dark: VercelDark },
{ name: "Convex", light: Convex },
{ name: "Supabase", light: Supabase },
{ name: "Google", light: Google },
{ name: "OpenAI", light: Openai, dark: OpenaiDark },
{ name: "GitHub", light: GithubLight, dark: GithubDark },
{ name: "Railway", light: Railway, dark: RailwayDark },
]
export const rowTwoBrands: Brand[] = [
{ name: "Salesforce", light: Salesforce },
{ name: "MongoDB", light: MongodbIconLight, dark: MongodbIconDark },
{ name: "Neon", light: Neon },
{ name: "Planetscale", light: Planetscale, dark: PlanetscaleDark },
{ name: "Upstash", light: Upstash },
{ name: "Auth0", light: auth0 },
{ name: "Twilio", light: twilio },
{ name: "WorkOS", light: workos, dark: workosLight },
{ name: "Meta", light: Meta, dark: MetaDark },
{ name: "Nvidia", light: NvidiaIconLight, dark: NvidiaIconDark },
{ name: "Astro", light: AstroIconLight, dark: AstroIconDark },
{ name: "Sanity", light: SanityLight, dark: SanityDark },
]
```
### `registry/new-york/blocks/brands-section-v7/lib/config.ts`
```ts
export const brandsSectionV7Content = {
heading: "Built for the stack you already run",
subheading:
"Connect payments, auth, databases, and AI to your product without rebuilding your workflow.",
footerLink: {
label: "See all integrations",
href: "#",
},
} as const
```
### `registry/new-york/blocks/brands-section-v7/styles/brands-section-v7.css`
```css
.bs7-track-left {
animation: bs7-marquee-left 40s linear infinite;
}
.bs7-track-right {
animation: bs7-marquee-right 44s linear infinite;
}
@keyframes bs7-marquee-left {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-50%, 0, 0);
}
}
@keyframes bs7-marquee-right {
from {
transform: translate3d(-50%, 0, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.bs7-track-left,
.bs7-track-right {
animation-duration: 0.01ms;
animation-iteration-count: 1;
}
}
```
### `components/ui/svgs/stripe.tsx`
```tsx
import type { SVGProps } from "react";
const Stripe = (props: SVGProps) => (
);
export { Stripe };
```
### `components/ui/svgs/cursorLight.tsx`
```tsx
import type { SVGProps } from "react";
const CursorLight = (props: SVGProps) => (
);
export { CursorLight };
```
### `components/ui/svgs/cursorDark.tsx`
```tsx
import type { SVGProps } from "react";
const CursorDark = (props: SVGProps) => (
);
export { CursorDark };
```
### `components/ui/svgs/claudeAiIcon.tsx`
```tsx
import type { SVGProps } from "react";
const ClaudeAiIcon = (props: SVGProps) => (
);
export { ClaudeAiIcon };
```
### `components/ui/svgs/perplexity.tsx`
```tsx
import type { SVGProps } from "react";
const Perplexity = (props: SVGProps) => (
);
export { Perplexity };
```
### `components/ui/svgs/slack.tsx`
```tsx
import type { SVGProps } from "react";
const Slack = (props: SVGProps) => (
);
export { Slack };
```
### `components/ui/svgs/vercel.tsx`
```tsx
import type { SVGProps } from "react";
const Vercel = (props: SVGProps) => (
);
export { Vercel };
```
### `components/ui/svgs/vercelDark.tsx`
```tsx
import type { SVGProps } from "react";
const VercelDark = (props: SVGProps) => (
);
export { VercelDark };
```
### `components/ui/svgs/convex.tsx`
```tsx
import type { SVGProps } from "react";
const Convex = (props: SVGProps) => (
);
export { Convex };
```
### `components/ui/svgs/supabase.tsx`
```tsx
import type { SVGProps } from "react";
const Supabase = (props: SVGProps) => (
);
export { Supabase };
```
### `components/ui/svgs/google.tsx`
```tsx
import type { SVGProps } from "react";
const Google = (props: SVGProps) => (
);
export { Google };
```
### `components/ui/svgs/openai.tsx`
```tsx
import type { SVGProps } from "react";
const Openai = (props: SVGProps) => (
);
export { Openai };
```
### `components/ui/svgs/openaiDark.tsx`
```tsx
import type { SVGProps } from "react";
const OpenaiDark = (props: SVGProps) => (
);
export { OpenaiDark };
```
### `components/ui/svgs/githubLight.tsx`
```tsx
import type { SVGProps } from "react";
const GithubLight = (props: SVGProps) => (
);
export { GithubLight };
```
### `components/ui/svgs/githubDark.tsx`
```tsx
import type { SVGProps } from "react";
const GithubDark = (props: SVGProps) => (
);
export { GithubDark };
```
### `components/ui/svgs/railway.tsx`
```tsx
import type { SVGProps } from "react";
const Railway = (props: SVGProps) => (
);
export { Railway };
```
### `components/ui/svgs/railwayDark.tsx`
```tsx
import type { SVGProps } from "react";
const RailwayDark = (props: SVGProps) => (
);
export { RailwayDark };
```
### `components/ui/svgs/salesforce.tsx`
```tsx
import type { SVGProps } from "react";
const Salesforce = (props: SVGProps) => (
);
export { Salesforce };
```
### `components/ui/svgs/mongodbIconLight.tsx`
```tsx
import type { SVGProps } from "react";
const MongodbIconLight = (props: SVGProps) => (
);
export { MongodbIconLight };
```
### `components/ui/svgs/mongodbIconDark.tsx`
```tsx
import type { SVGProps } from "react";
const MongodbIconDark = (props: SVGProps) => (
);
export { MongodbIconDark };
```
### `components/ui/svgs/neon.tsx`
```tsx
import type { SVGProps } from "react";
const Neon = (props: SVGProps) => (
Neon
);
export { Neon };
```
### `components/ui/svgs/planetscale.tsx`
```tsx
import type { SVGProps } from "react";
const Planetscale = (props: SVGProps) => (
);
export { Planetscale };
```
### `components/ui/svgs/planetscaleDark.tsx`
```tsx
import type { SVGProps } from "react";
const PlanetscaleDark = (props: SVGProps) => (
);
export { PlanetscaleDark };
```
### `components/ui/svgs/upstash.tsx`
```tsx
import type { SVGProps } from "react";
const Upstash = (props: SVGProps) => (
);
export { Upstash };
```
### `components/ui/svgs/auth0.tsx`
```tsx
import type { SVGProps } from "react";
const auth0 = (props: SVGProps) => (
);
export { auth0 };
```
### `components/ui/svgs/twilio.tsx`
```tsx
import type { SVGProps } from "react";
const twilio = (props: SVGProps) => (
);
export { twilio };
```
### `components/ui/svgs/workos.tsx`
```tsx
import type { SVGProps } from "react";
const workos = (props: SVGProps) => (
);
export { workos };
```
### `components/ui/svgs/workosLight.tsx`
```tsx
import type { SVGProps } from "react";
const workosLight = (props: SVGProps) => (
);
export { workosLight };
```
### `components/ui/svgs/meta.tsx`
```tsx
import type { SVGProps } from "react";
const Meta = (props: SVGProps) => (
);
export { Meta };
```
### `components/ui/svgs/metaDark.tsx`
```tsx
import type { SVGProps } from "react";
const MetaDark = (props: SVGProps) => (
);
export { MetaDark };
```
### `components/ui/svgs/nvidiaIconLight.tsx`
```tsx
import type { SVGProps } from "react";
const NvidiaIconLight = (props: SVGProps) => (
);
export { NvidiaIconLight };
```
### `components/ui/svgs/nvidiaIconDark.tsx`
```tsx
import type { SVGProps } from "react";
const NvidiaIconDark = (props: SVGProps) => (
);
export { NvidiaIconDark };
```
### `components/ui/svgs/astroIconLight.tsx`
```tsx
import type { SVGProps } from "react";
const AstroIconLight = (props: SVGProps) => (
);
export { AstroIconLight };
```
### `components/ui/svgs/astroIconDark.tsx`
```tsx
import type { SVGProps } from "react";
const AstroIconDark = (props: SVGProps) => (
);
export { AstroIconDark };
```
### `components/ui/svgs/sanityLight.tsx`
```tsx
import type { SVGProps } from "react";
const SanityLight = (props: SVGProps) => (
);
export { SanityLight };
```
### `components/ui/svgs/sanityDark.tsx`
```tsx
import type { SVGProps } from "react";
const SanityDark = (props: SVGProps) => (
);
export { SanityDark };
```