# Brands Section v1 > Compact brands strip with a trust label and an infinite marquee of AI brand logos with light/dark mode support (Nvidia, OpenAI, Grok, Perplexity AI, Claude AI, Gemini). A shadcn/ui block from the [@uiception](https://uiception.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/brands-section-v1). - Page, with a live preview: https://shadcn.exchange/r/uiception/brands-section-v1 - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiception/brands-section-v1-light-0144bfc69ccc01a3.png - Registry item: https://uiception.com/r/brands-section-v1.json - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://uiception.com/r/brands-section-v1.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-v1/page.tsx` ```tsx import BrandsSectionV1 from "./components/brands-section-v1" export default function Page() { return } ``` ### `registry/new-york/blocks/brands-section-v1/components/brands-section-v1.tsx` ```tsx import Marquee from "./marquee" import { brands } from "../lib/brands" import "../styles/brands-section-v1.css" export default function BrandsSectionV1() { return (

Trusted by the best leading brands:

) } ``` ### `registry/new-york/blocks/brands-section-v1/components/marquee.tsx` ```tsx import type { Brand } from "../lib/brands" import BrandLogo from "./brand-logo" export default function Marquee({ brands }: { brands: Brand[] }) { return (
{brands.map((brand) => (
))}
{brands.map((brand) => (
))}
) } ``` ### `registry/new-york/blocks/brands-section-v1/components/brand-logo.tsx` ```tsx import { cn } from "@/lib/utils" import type { Brand } from "../lib/brands" const brandLogoShellClass = "inline-flex h-7 w-32 max-w-full items-center justify-center md:h-8 md:w-36" export default function BrandLogo({ brand, className, }: { brand: Brand className?: string }) { const Light = brand.light const Dark = brand.dark const shellClass = cn(brandLogoShellClass, className) if (Dark) { return ( ) } return ( ) } ``` ### `registry/new-york/blocks/brands-section-v1/lib/brands.ts` ```ts import type { ComponentType, SVGProps } from "react" import { NvidiaWordmarkLight } from "@/components/ui/svgs/nvidiaWordmarkLight" import { NvidiaWordmarkDark } from "@/components/ui/svgs/nvidiaWordmarkDark" import { OpenaiWordmarkLight } from "@/components/ui/svgs/openaiWordmarkLight" import { OpenaiWordmarkDark } from "@/components/ui/svgs/openaiWordmarkDark" import { GrokWordmarkLight } from "@/components/ui/svgs/grokWordmarkLight" import { GrokWordmarkDark } from "@/components/ui/svgs/grokWordmarkDark" import { PerplexityWordmarkLight } from "@/components/ui/svgs/perplexityWordmarkLight" import { PerplexityWordmarkDark } from "@/components/ui/svgs/perplexityWordmarkDark" import { ClaudeAiWordmarkIconLight } from "@/components/ui/svgs/claudeAiWordmarkIconLight" import { ClaudeAiWordmarkIconDark } from "@/components/ui/svgs/claudeAiWordmarkIconDark" import { GoogleWordmark } from "@/components/ui/svgs/googleWordmark" export type SvgComponent = ComponentType> export type Brand = { name: string light: SvgComponent dark?: SvgComponent } export const brands: Brand[] = [ { name: "Nvidia", light: NvidiaWordmarkLight, dark: NvidiaWordmarkDark }, { name: "OpenAI", light: OpenaiWordmarkLight, dark: OpenaiWordmarkDark }, { name: "Grok", light: GrokWordmarkLight, dark: GrokWordmarkDark }, { name: "Perplexity AI", light: PerplexityWordmarkLight, dark: PerplexityWordmarkDark }, { name: "Claude AI", light: ClaudeAiWordmarkIconLight, dark: ClaudeAiWordmarkIconDark }, { name: "Google", light: GoogleWordmark }, ] ``` ### `registry/new-york/blocks/brands-section-v1/styles/brands-section-v1.css` ```css .bs1-track { animation: bs1-marquee 28s linear infinite; } @keyframes bs1-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .bs1-track { animation-duration: 0.01ms; animation-iteration-count: 1; } } ``` ### `components/ui/svgs/nvidiaWordmarkLight.tsx` ```tsx import type { SVGProps } from "react"; const NvidiaWordmarkLight = (props: SVGProps) => ( ); export { NvidiaWordmarkLight }; ``` ### `components/ui/svgs/nvidiaWordmarkDark.tsx` ```tsx import type { SVGProps } from "react"; const NvidiaWordmarkDark = (props: SVGProps) => ( ); export { NvidiaWordmarkDark }; ``` ### `components/ui/svgs/openaiWordmarkLight.tsx` ```tsx import type { SVGProps } from "react"; const OpenaiWordmarkLight = (props: SVGProps) => ( ); export { OpenaiWordmarkLight }; ``` ### `components/ui/svgs/openaiWordmarkDark.tsx` ```tsx import type { SVGProps } from "react"; const OpenaiWordmarkDark = (props: SVGProps) => ( ); export { OpenaiWordmarkDark }; ``` ### `components/ui/svgs/grokWordmarkLight.tsx` ```tsx import type { SVGProps } from "react"; const GrokWordmarkLight = (props: SVGProps) => ( ); export { GrokWordmarkLight }; ``` ### `components/ui/svgs/grokWordmarkDark.tsx` ```tsx import type { SVGProps } from "react"; const GrokWordmarkDark = (props: SVGProps) => ( ); export { GrokWordmarkDark }; ``` ### `components/ui/svgs/perplexityWordmarkLight.tsx` ```tsx import type { SVGProps } from "react"; const PerplexityWordmarkLight = (props: SVGProps) => ( ); export { PerplexityWordmarkLight }; ``` ### `components/ui/svgs/perplexityWordmarkDark.tsx` ```tsx import type { SVGProps } from "react"; const PerplexityWordmarkDark = (props: SVGProps) => ( ); export { PerplexityWordmarkDark }; ``` ### `components/ui/svgs/claudeAiWordmarkIconLight.tsx` ```tsx import type { SVGProps } from "react"; const ClaudeAiWordmarkIconLight = (props: SVGProps) => ( ); export { ClaudeAiWordmarkIconLight }; ``` ### `components/ui/svgs/claudeAiWordmarkIconDark.tsx` ```tsx import type { SVGProps } from "react"; const ClaudeAiWordmarkIconDark = (props: SVGProps) => ( ); export { ClaudeAiWordmarkIconDark }; ``` ### `components/ui/svgs/googleWordmark.tsx` ```tsx import type { SVGProps } from "react"; const GoogleWordmark = (props: SVGProps) => ( ); export { GoogleWordmark }; ```