# Partners Section v3
> Partners section for a social scheduling app: a two-column grid of large network names with icons (Instagram, YouTube, LinkedIn, X, Reddit, Bluesky, Telegram, Slack). GSAP brightens the heading word by word on scroll and fades the partners up in reading order.
A shadcn/ui block from the [@uiception](https://uiception.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/partners-section-v3).
- Page, with a live preview: https://shadcn.exchange/r/uiception/partners-section-v3
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiception/partners-section-v3-light-0b256c894e3663ca.png
- Registry item: https://uiception.com/r/partners-section-v3.json
- Listed: 2026-10-13, source last changed 2026-10-13
## Install
```bash
npx shadcn@latest add https://uiception.com/r/partners-section-v3.json
```
Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.
## Dependencies
- npm packages: `gsap`
## Files
### `registry/new-york/blocks/partners-section-v3/page.tsx`
```tsx
import PartnersSectionV3 from "./components/partners-section-v3"
export default function Page() {
return (null)
usePartnersV3Motion(sectionRef)
const words = heading.split(" ")
return (
{words.map((word, i) => (
{word}
{i < words.length - 1 ? " " : null}
))}
{description}
{partners.map((partner) => (
)
}
```
### `registry/new-york/blocks/partners-section-v3/components/partner-item.tsx`
```tsx
import PartnerIcon from "./partner-icon"
import type { Partner } from "../lib/partners"
export default function PartnerItem({ partner }: { partner: Partner }) {
return (
{partner.name}
)
}
```
### `registry/new-york/blocks/partners-section-v3/components/partner-icon.tsx`
```tsx
import { cn } from "@/lib/utils"
import type { Partner } from "../lib/partners"
export default function PartnerIcon({
partner,
className,
}: {
partner: Partner
className?: string
}) {
const Light = partner.light
const Dark = partner.dark
const shellClass = cn("inline-flex items-center justify-center", className)
if (Dark) {
return (
)
}
return (
)
}
```
### `registry/new-york/blocks/partners-section-v3/hooks/use-partners-v3-motion.ts`
```ts
"use client"
import { type RefObject, useLayoutEffect } from "react"
import gsap from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
gsap.registerPlugin(ScrollTrigger)
export function usePartnersV3Motion(rootRef: RefObject) {
useLayoutEffect(() => {
const root = rootRef.current
if (!root) return
const mm = gsap.matchMedia()
mm.add("(prefers-reduced-motion: no-preference)", () => {
const q = (selector: string) =>
Array.from(root.querySelectorAll(selector))
const heading = root.querySelector("[data-pv3-heading]")
const words = q("[data-pv3-word]")
const description = q("[data-pv3-description]")
const list = root.querySelector("[data-pv3-list]")
const items = q("[data-pv3-item]")
if (!heading || !list || items.length === 0) return
// Heading words brighten one by one as the section scrolls in.
gsap.fromTo(
words,
{ opacity: 0.15 },
{
opacity: 1,
stagger: 0.1,
ease: "none",
scrollTrigger: { trigger: heading, start: "top 85%", end: "top 45%", scrub: 0.6 },
}
)
gsap.fromTo(
description,
{ opacity: 0, y: 12 },
{
opacity: 1,
y: 0,
ease: "none",
scrollTrigger: { trigger: heading, start: "top 75%", end: "top 40%", scrub: 0.6 },
}
)
// Partners rise in, in reading order, the first time the grid shows.
gsap.fromTo(
items,
{ autoAlpha: 0, y: 28 },
{
autoAlpha: 1,
y: 0,
duration: 0.8,
ease: "power3.out",
stagger: 0.08,
clearProps: "transform",
scrollTrigger: { trigger: list, start: "top 85%", once: true },
}
)
})
return () => mm.revert()
}, [rootRef])
}
```
### `registry/new-york/blocks/partners-section-v3/lib/config.ts`
```ts
export const partnersSectionV3Content = {
heading: "An official partner of the networks you post to",
description:
"Every network below approved Acme for API access, so your scheduled posts publish through their official APIs.",
} as const
```
### `registry/new-york/blocks/partners-section-v3/lib/partners.ts`
```ts
import type { ComponentType, SVGProps } from "react"
import { InstagramIcon } from "@/components/ui/svgs/instagramIcon"
import { InstagramIconDark } from "@/components/ui/svgs/instagramIconDark"
import { Youtube } from "@/components/ui/svgs/youtube"
import { LinkedinIcon } from "@/components/ui/svgs/linkedinIcon"
import { LinkedinIconDark } from "@/components/ui/svgs/linkedinIconDark"
import { X } from "@/components/ui/svgs/x"
import { XDark } from "@/components/ui/svgs/xDark"
import { Reddit } from "@/components/ui/svgs/reddit"
import { RedditDark } from "@/components/ui/svgs/redditDark"
import { Bluesky } from "@/components/ui/svgs/bluesky"
import { Telegram } from "@/components/ui/svgs/telegram"
import { TelegramDark } from "@/components/ui/svgs/telegramDark"
import { Slack } from "@/components/ui/svgs/slack"
export type SvgComponent = ComponentType>
export type Partner = {
name: string
light: SvgComponent
dark?: SvgComponent
}
export const partners: Partner[] = [
{ name: "Instagram", light: InstagramIcon, dark: InstagramIconDark },
{ name: "YouTube", light: Youtube },
{ name: "LinkedIn", light: LinkedinIcon, dark: LinkedinIconDark },
{ name: "X", light: X, dark: XDark },
{ name: "Reddit", light: Reddit, dark: RedditDark },
{ name: "Bluesky", light: Bluesky },
{ name: "Telegram", light: Telegram, dark: TelegramDark },
{ name: "Slack", light: Slack },
]
```
### `components/ui/svgs/instagramIcon.tsx`
```tsx
import type { SVGProps } from "react";
const InstagramIcon = (props: SVGProps) => (
);
export { InstagramIcon };
```
### `components/ui/svgs/instagramIconDark.tsx`
```tsx
import type { SVGProps } from "react";
const InstagramIconDark = (props: SVGProps) => (
);
export { InstagramIconDark };
```
### `components/ui/svgs/youtube.tsx`
```tsx
import type { SVGProps } from "react";
const Youtube = (props: SVGProps) => (
);
export { Youtube };
```
### `components/ui/svgs/linkedinIcon.tsx`
```tsx
import type { SVGProps } from "react";
const LinkedinIcon = (props: SVGProps) => (
);
export { LinkedinIcon };
```
### `components/ui/svgs/linkedinIconDark.tsx`
```tsx
import type { SVGProps } from "react";
const LinkedinIconDark = (props: SVGProps) => (
);
export { LinkedinIconDark };
```
### `components/ui/svgs/x.tsx`
```tsx
import type { SVGProps } from "react";
const X = (props: SVGProps) => (
);
export { X };
```
### `components/ui/svgs/xDark.tsx`
```tsx
import type { SVGProps } from "react";
const XDark = (props: SVGProps) => (
);
export { XDark };
```
### `components/ui/svgs/reddit.tsx`
```tsx
import type { SVGProps } from "react";
const Reddit = (props: SVGProps) => (
);
export { Reddit };
```
### `components/ui/svgs/redditDark.tsx`
```tsx
import type { SVGProps } from "react";
const RedditDark = (props: SVGProps) => (
);
export { RedditDark };
```
### `components/ui/svgs/bluesky.tsx`
```tsx
import type { SVGProps } from "react";
const Bluesky = (props: SVGProps) => (
);
export { Bluesky };
```
### `components/ui/svgs/telegram.tsx`
```tsx
import type { SVGProps } from "react";
const Telegram = (props: SVGProps) => (
);
export { Telegram };
```
### `components/ui/svgs/telegramDark.tsx`
```tsx
import type { SVGProps } from "react";
const TelegramDark = (props: SVGProps) => (
);
export { TelegramDark };
```
### `components/ui/svgs/slack.tsx`
```tsx
import type { SVGProps } from "react";
const Slack = (props: SVGProps) => (
);
export { Slack };
```