# Brands Section v6 > Security trust strip with a centered mono uppercase label above an infinite marquee of authentication brand logos (Clerk, Better Auth, WorkOS, Keycloak, Bitwarden, Auth.js, Auth0, Authy, Twilio, JWT). A shadcn/ui block from the [@uiception](https://uiception.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/brands-section-v6). - Page, with a live preview: https://shadcn.exchange/r/uiception/brands-section-v6 - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiception/brands-section-v6-light-e881ff021692fd89.png - Registry item: https://uiception.com/r/brands-section-v6.json - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://uiception.com/r/brands-section-v6.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-v6/page.tsx` ```tsx import BrandsSectionV6 from "./components/brands-section-v6" export default function Page() { return } ``` ### `registry/new-york/blocks/brands-section-v6/components/brands-section-v6.tsx` ```tsx import { cn } from "@/lib/utils" import Marquee from "./marquee" import { brands } from "../lib/brands" import "../styles/brands-section-v6.css" type Props = { embedded?: boolean } export default function BrandsSectionV6({ embedded = false }: Props) { return (

Trusted by security teams at

) } ``` ### `registry/new-york/blocks/brands-section-v6/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-v6/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 ( ) } return ( ) } ``` ### `registry/new-york/blocks/brands-section-v6/lib/brands.ts` ```ts import type { ComponentType, SVGProps } from "react" import { clerkWordmarkLight } from "@/components/ui/svgs/clerkWordmarkLight" import { clerkWordmarkDark } from "@/components/ui/svgs/clerkWordmarkDark" import { betterAuthWordmarkLight } from "@/components/ui/svgs/betterAuthWordmarkLight" import { betterAuthWordmarkDark } from "@/components/ui/svgs/betterAuthWordmarkDark" import { workos } from "@/components/ui/svgs/workos" import { workosLight } from "@/components/ui/svgs/workosLight" import { keycloak } from "@/components/ui/svgs/keycloak" import { bitwarden } from "@/components/ui/svgs/bitwarden" import { authjs } from "@/components/ui/svgs/authjs" import { auth0 } from "@/components/ui/svgs/auth0" import { authy } from "@/components/ui/svgs/authy" import { twilio } from "@/components/ui/svgs/twilio" import { jwt } from "@/components/ui/svgs/jwt" export type SvgComponent = ComponentType> export type Brand = { name: string light: SvgComponent dark?: SvgComponent } export const brands: Brand[] = [ { name: "Clerk", light: clerkWordmarkLight, dark: clerkWordmarkDark }, { name: "Better Auth", light: betterAuthWordmarkLight, dark: betterAuthWordmarkDark }, { name: "WorkOS", light: workos, dark: workosLight }, { name: "Keycloak", light: keycloak }, { name: "Bitwarden", light: bitwarden }, { name: "Auth.js", light: authjs }, { name: "Auth0", light: auth0 }, { name: "Authy", light: authy }, { name: "Twilio", light: twilio }, { name: "JWT", light: jwt }, ] ``` ### `registry/new-york/blocks/brands-section-v6/styles/brands-section-v6.css` ```css .bs6-track { animation: bs6-marquee 28s linear infinite; } @keyframes bs6-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .bs6-track { animation-duration: 0.01ms; animation-iteration-count: 1; } } ``` ### `components/ui/svgs/clerkWordmarkLight.tsx` ```tsx import type { SVGProps } from "react"; const clerkWordmarkLight = (props: SVGProps) => ( ); export { clerkWordmarkLight }; ``` ### `components/ui/svgs/clerkWordmarkDark.tsx` ```tsx import type { SVGProps } from "react"; const clerkWordmarkDark = (props: SVGProps) => ( ); export { clerkWordmarkDark }; ``` ### `components/ui/svgs/betterAuthWordmarkLight.tsx` ```tsx import type { SVGProps } from "react"; const betterAuthWordmarkLight = (props: SVGProps) => ( ); export { betterAuthWordmarkLight }; ``` ### `components/ui/svgs/betterAuthWordmarkDark.tsx` ```tsx import type { SVGProps } from "react"; const betterAuthWordmarkDark = (props: SVGProps) => ( ); export { betterAuthWordmarkDark }; ``` ### `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/keycloak.tsx` ```tsx import type { SVGProps } from "react"; const keycloak = (props: SVGProps) => ( ); export { keycloak }; ``` ### `components/ui/svgs/bitwarden.tsx` ```tsx import type { SVGProps } from "react"; const bitwarden = (props: SVGProps) => ( ); export { bitwarden }; ``` ### `components/ui/svgs/authjs.tsx` ```tsx import type { SVGProps } from "react"; const authjs = (props: SVGProps) => ( ); export { authjs }; ``` ### `components/ui/svgs/auth0.tsx` ```tsx import type { SVGProps } from "react"; const auth0 = (props: SVGProps) => ( ); export { auth0 }; ``` ### `components/ui/svgs/authy.tsx` ```tsx import type { SVGProps } from "react"; const authy = (props: SVGProps) => ( Authy ); export { authy }; ``` ### `components/ui/svgs/twilio.tsx` ```tsx import type { SVGProps } from "react"; const twilio = (props: SVGProps) => ( ); export { twilio }; ``` ### `components/ui/svgs/jwt.tsx` ```tsx import type { SVGProps } from "react"; const jwt = (props: SVGProps) => ( ); export { jwt }; ```