# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/logos15. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-07-29

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Logos](/blocks/logos)
5. /
6. Sector Grouped Client Index

# Sector Grouped Client Index[PRO](/pricing)

Client proof organised by sector: each ruled row names the sector, explains the kind of work it involves, and lines the matching grayscale logos up on the right edge.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/logos15`

## Logos15: Sector Grouped Client Index

Client proof organised by sector rather than dumped into a grid. Each ruled row names the sector, explains the kind of work it involves, and lines the matching grayscale logos up on the right edge, so the wall reads as an argument instead of a wallpaper.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/logos15?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/logos15?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

This installs the block to `components/beste/block/logos15.tsx` plus the `badge7` eyebrow and `button12` pill button it uses.

### Quick start

The installed file exports `logos15Demo` alongside the block: the exact props behind the preview above. Spread it to get a working client index in one line.

tsxCopy

```
import { Logos15, logos15Demo } from "@/components/beste/block/logos15";

export default function Page() {
  return <Logos15 {...logos15Demo} />;
}
```

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

tsxCopy

```
import { Logos15 } from "@/components/beste/block/logos15";

export default function Page() {
  return (
    <Logos15
      badge={{ label: "By sector" }}
      heading="Where the work tends to end up."
      sectors={[
        {
          title: "Culture",
          summary: "Museums, festivals and presses, where the audience reads everything twice.",
          logos: [
            { src: "/logos/one.png", alt: "One" },
            { src: "/logos/two.png", alt: "Two" },
          ],
        },
      ]}
      button={{ label: "Browse the archive", href: "/work" }}
    />
  );
}
```

### Props

| Prop      | Type              | Default | Description                                          |
| --------- | ----------------- | ------- | ---------------------------------------------------- |
| badge     | { label: string } | –       | Eyebrow label rendered as a Badge7                   |
| heading   | string            | –       | Section heading beside the CTA                       |
| sectors   | SectorRow\[\]     | \[\]    | One ruled row per sector                             |
| button    | ActionButton      | –       | Outline pill CTA in the header, rendered as Button12 |
| className | string            | –       | Extra classes for the outer <section>                |

tsCopy

```
type SectorRow = {
  title: string;
  summary: string;
  logos: Logo[];
};

type Logo = {
  src: string;
  alt: string;
};

type ActionButton = {
  label: string;
  href: string;
};
```

### Behavior notes

* Rows use `md:grid-cols-[minmax(0,16rem)_1fr_auto]`, so the sector name keeps a fixed measure, the summary takes the slack, and the logo cluster hugs the right edge however many marks it holds.
* Logos wrap with `flex-wrap` and `md:justify-end`, so a sector with five marks pushes onto a second line inside its own row rather than widening the column.
* Every mark keeps a constant `opacity-50 grayscale` and no hover state, which is the set's rule for logo walls.
* Rows are separated by `border-t` alone with vertical padding, so the block reads as a ruled index and adding a sector never disturbs the ones above it.
* Below `md` each row stacks to title, summary and a left-aligned logo cluster, keeping the sector grouping legible on a phone.
* Explaining each sector in a sentence is what makes the block worth more than a plain logo grid: it converts recognition into relevance for readers who know none of the names.

## More Logos blocks

[View all Logos](/blocks/logos)

[](/block/logos13)

FREE

logos13

### Ruled Client Roster

Client proof band with a parenthetical eyebrow, a display heading beside a supporting paragraph, and a ruled grid of grayscale logos where each one carries a plain caption naming the work, closed by a footnote and a pill CTA.

[](/block/logos9)

PRO

logos9

### Logo Grid Wall

Partitioned bordered grid of client wordmark cells.

[](/block/logos7)

PRO

logos7

### Logo Cloud

Centered grid of client wordmarks with a trusted-by intro.

[](/block/logos12)

FREE

logos12

### Hairline Client Wall

A client wall that sets six greyscale logos in a hairline cell grid, each lifting to full colour on hover, with an eyebrow and a short claim on the left, a reach line on the right, and a credit note underneath.

[](/block/logos11)

PRO

logos11

### Logos With Stat

A headline stat of trust above a centered row of client wordmarks.

[](/block/logos6)

PRO

logos6

### Logo Grid with Card Backgrounds

Responsive grid of partner or client logos. Each logo sits inside a softly tinted, rounded card so mixed-style logos (marks, wordmarks, scanned seals) all feel cohesive.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.