# Investors 1 - Investor Logo Grid

> A centered heading and short paragraph above an eight-firm grid of venture wordmarks and names.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/investors1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/investors1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/investors1-light-fba2189f0cedf2c6.png
- Registry item: https://shadcnblocks.com/r/investors1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/investors1.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: `cn`

## Files

### `block/investors1/investors1.tsx`

```tsx
import { cn } from "cn";

interface Investors1Logo {
  src: string;
  alt: string;
}

interface Investors1Item {
  name: string;
  logo: Investors1Logo;
}

interface Investors1Props {
  label?: string;
  heading?: string;
  description?: string;
  investors?: Investors1Item[];
  className?: string;
}

const defaultProps: Investors1Props = {
  heading: "Backed by operators",
  description:
    "Eight firms from Sand Hill Road and South Park, from the first check through the last round.",
  investors: [
    {
      name: "Sequoia Capital",
      logo: {
        src: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/investors/sequoia.svg",
        alt: "Sequoia Capital",
      },
    },
    {
      name: "Andreessen Horowitz",
      logo: {
        src: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/investors/a16z.svg",
        alt: "Andreessen Horowitz",
      },
    },
    {
      name: "Accel",
      logo: {
        src: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/investors/accel.svg",
        alt: "Accel",
      },
    },
    {
      name: "Kleiner Perkins",
      logo: {
        src: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/investors/kleiner-perkins.svg",
        alt: "Kleiner Perkins",
      },
    },
    {
      name: "Greylock",
      logo: {
        src: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/investors/greylock.svg",
        alt: "Greylock",
      },
    },
    {
      name: "Lightspeed",
      logo: {
        src: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/investors/lightspeed.svg",
        alt: "Lightspeed",
      },
    },
    {
      name: "Founders Fund",
      logo: {
        src: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/investors/founders-fund.svg",
        alt: "Founders Fund",
      },
    },
    {
      name: "Khosla Ventures",
      logo: {
        src: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/investors/khosla.svg",
        alt: "Khosla Ventures",
      },
    },
  ],
};

const MAX_INVESTORS = 8;

const Investors1 = (props: Partial<Investors1Props>) => {
  const { label, heading, description, investors, className } = {
    ...defaultProps,
    ...props,
  };

  const firms = (investors ?? []).slice(0, MAX_INVESTORS);

  return (
    <section className={cn("py-32", className)}>
      <div className="container mx-auto">
        <div className="flex flex-col gap-12">
          <div className="flex flex-col items-center gap-3 text-center">
            {label ? (
              <p className="text-xs font-semibold tracking-widest text-muted-foreground uppercase">
                {label}
              </p>
            ) : null}
            {heading ? (
              <h2 className="max-w-xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
                {heading}
              </h2>
            ) : null}
            {description ? (
              <p className="max-w-2xl text-muted-foreground">{description}</p>
            ) : null}
          </div>
          <ul className="grid grid-cols-2 gap-px overflow-hidden rounded-xl bg-border sm:grid-cols-4">
            {firms.map((firm) => (
              <li
                key={firm.name}
                className="flex flex-col items-center justify-center gap-5 bg-background px-6 py-12"
              >
                <img
                  src={firm.logo.src}
                  alt={firm.logo.alt}
                  className="h-8 w-full max-w-36 object-contain"
                />
                <p className="text-sm font-medium">{firm.name}</p>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};

export { Investors1 };
```