# 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/logos13. 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. Ruled Client Roster

# Ruled Client RosterFREE

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.

ViewCodeDocs

Base UI

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

## Logos13: Ruled Client Roster

Client proof band for the Auralis set: a parenthetical eyebrow and display heading sit beside a supporting paragraph, then every logo gets its own hairline-ruled cell with a plain caption naming the work it stands for, closed by a footnote and a pill CTA on a shared rule.

Free block

This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.

### Installation

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/logos13"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/logos13"
```

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

### Quick start

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

tsxCopy

```
import { Logos13, logos13Demo } from "@/components/beste/block/logos13";

export default function Page() {
  return <Logos13 {...logos13Demo} />;
}
```

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

tsxCopy

```
import { Logos13 } from "@/components/beste/block/logos13";

export default function Page() {
  return (
    <Logos13
      badge={{ label: "The roster" }}
      heading="Nine years of work, mostly arriving by referral."
      description="The teams below handed us the pages their whole business runs through."
      items={[
        {
          src: "https://oud.pics/sm/l/logoipsum-380.png",
          alt: "Logoipsum",
          caption: "Editorial platform",
        },
        {
          src: "https://oud.pics/sm/l/logoipsum-388.png",
          alt: "Logoipsum",
          caption: "Museum wayfinding",
        },
      ]}
      button={{ label: "See the client work", href: "/work" }}
      labels={{ footnote: "Eleven of fourteen studios booked a second engagement." }}
    />
  );
}
```

### Props

| Prop        | Type              | Default | Description                                              |
| ----------- | ----------------- | ------- | -------------------------------------------------------- |
| badge       | { label: string } | –       | Eyebrow label rendered as a Badge7                       |
| heading     | string            | –       | Display heading in the left column                       |
| description | string            | –       | Supporting paragraph, right-aligned from md up           |
| items       | ClientLogo\[\]    | \[\]    | One ruled cell per logo                                  |
| button      | ActionButton      | –       | Pill CTA on the closing rule, rendered as Button12       |
| labels      | Logos13Labels     | {}      | Fixed strings that are not content: the closing footnote |
| className   | string            | –       | Extra classes for the outer <section>                    |

tsCopy

```
type ClientLogo = {
  src: string;
  alt: string;
  caption: string;
};

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

type Logos13Labels = {
  footnote?: string;
};
```

### Behavior notes

* Logos render at a fixed `h-8` (`md:h-9`) with `w-auto object-contain`, so mixed wordmark and monogram files line up on the same optical height instead of being stretched into a shared box.
* They carry a constant `opacity-50 grayscale` with no hover state, which is the set's rule for logo walls: the marks stay quiet against the type rather than lighting up under the cursor.
* Each cell is a `border-t pt-6` rule instead of a boxed grid cell, so the band reads as an editorial index and keeps working when the count is not a multiple of the column count.
* The grid is `grid-cols-2` rising to `md:grid-cols-3`, so six logos fall into two clean rows on desktop and three on mobile.
* `caption` is what makes the block worth more than a logo strip: it names the engagement, so the section carries proof even for readers who do not recognise the marks.
* The footnote and the CTA share one closing `border-t` row and wrap onto separate lines on narrow screens via `flex-wrap`.

## More Logos blocks

[View all Logos](/blocks/logos)

[](/block/logos15)

PRO

logos15

### Sector Grouped Client Index

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.

[](/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/logos7)

PRO

logos7

### Logo Cloud

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

[](/block/logos10)

PRO

logos10

### Logos Split

Headline and blurb beside a grid of client wordmarks.

[](/block/logos11)

PRO

logos11

### Logos With Stat

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

[](/block/logos8)

PRO

logos8

### Logo Marquee

Full-bleed auto-scrolling client wordmark marquee with edge fades.

## 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.