# Partners Section v4
> Static partners section: centered heading and description above a single row of eight square icon tiles (AWS, Cloudflare, DigitalOcean, Docker, Kubernetes, GitLab, Pulumi, Grafana).
A shadcn/ui block from the [@uiception](https://uiception.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/partners-section-v4).
- Page, with a live preview: https://shadcn.exchange/r/uiception/partners-section-v4
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiception/partners-section-v4-light-f53672011e47c512.png
- Registry item: https://uiception.com/r/partners-section-v4.json
- Listed: 2026-10-13, source last changed 2026-10-13
## Install
```bash
npx shadcn@latest add https://uiception.com/r/partners-section-v4.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/partners-section-v4/page.tsx`
```tsx
import PartnersSectionV4 from "./components/partners-section-v4"
export default function Page() {
return
}
```
### `registry/new-york/blocks/partners-section-v4/components/partners-section-v4.tsx`
```tsx
import PartnerTile from "./partner-tile"
import { partnersSectionV4Content } from "../lib/config"
import { partners } from "../lib/partners"
export default function PartnersSectionV4() {
const { heading, description } = partnersSectionV4Content
return (
{heading}
{description}
{partners.map((partner) => (
))}
)
}
```
### `registry/new-york/blocks/partners-section-v4/components/partner-tile.tsx`
```tsx
import PartnerIcon from "./partner-icon"
import type { Partner } from "../lib/partners"
export default function PartnerTile({ partner }: { partner: Partner }) {
return (
{partner.name}
)
}
```
### `registry/new-york/blocks/partners-section-v4/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-v4/lib/config.ts`
```ts
export const partnersSectionV4Content = {
heading: "The companies that keep Acme running",
description:
"Acme runs on tools from these partners. They help keep the app online and your data backed up.",
} as const
```
### `registry/new-york/blocks/partners-section-v4/lib/partners.ts`
```ts
import type { ComponentType, SVGProps } from "react"
import { AwsLight } from "@/components/ui/svgs/awsLight"
import { AwsDark } from "@/components/ui/svgs/awsDark"
import { Cloudflare } from "@/components/ui/svgs/cloudflare"
import { Digitalocean } from "@/components/ui/svgs/digitalocean"
import { Docker } from "@/components/ui/svgs/docker"
import { Kubernetes } from "@/components/ui/svgs/kubernetes"
import { Gitlab } from "@/components/ui/svgs/gitlab"
import { Pulumi } from "@/components/ui/svgs/pulumi"
import { Grafana } from "@/components/ui/svgs/grafana"
export type SvgComponent = ComponentType>
export type Partner = {
name: string
light: SvgComponent
dark?: SvgComponent
}
export const partners: Partner[] = [
{ name: "AWS", light: AwsLight, dark: AwsDark },
{ name: "Cloudflare", light: Cloudflare },
{ name: "DigitalOcean", light: Digitalocean },
{ name: "Docker", light: Docker },
{ name: "Kubernetes", light: Kubernetes },
{ name: "GitLab", light: Gitlab },
{ name: "Pulumi", light: Pulumi },
{ name: "Grafana", light: Grafana },
]
```
### `components/ui/svgs/awsLight.tsx`
```tsx
import type { SVGProps } from "react";
const AwsLight = (props: SVGProps) => (
);
export { AwsLight };
```
### `components/ui/svgs/awsDark.tsx`
```tsx
import type { SVGProps } from "react";
const AwsDark = (props: SVGProps) => (
);
export { AwsDark };
```
### `components/ui/svgs/cloudflare.tsx`
```tsx
import type { SVGProps } from "react";
const Cloudflare = (props: SVGProps) => (
);
export { Cloudflare };
```
### `components/ui/svgs/digitalocean.tsx`
```tsx
import type { SVGProps } from "react";
const Digitalocean = (props: SVGProps) => (
);
export { Digitalocean };
```
### `components/ui/svgs/docker.tsx`
```tsx
import type { SVGProps } from "react";
const Docker = (props: SVGProps) => (
);
export { Docker };
```
### `components/ui/svgs/kubernetes.tsx`
```tsx
import type { SVGProps } from "react";
const Kubernetes = (props: SVGProps) => (
);
export { Kubernetes };
```
### `components/ui/svgs/gitlab.tsx`
```tsx
import type { SVGProps } from "react";
const Gitlab = (props: SVGProps) => (
);
export { Gitlab };
```
### `components/ui/svgs/pulumi.tsx`
```tsx
import type { SVGProps } from "react";
const Pulumi = (props: SVGProps) => (
);
export { Pulumi };
```
### `components/ui/svgs/grafana.tsx`
```tsx
import type { SVGProps } from "react";
const Grafana = (props: SVGProps) => (
);
export { Grafana };
```