# 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/logos12. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-07-28

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. Hairline Client Wall

# Hairline Client WallFREE

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.

ViewCodeDocs

Base UI

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

## Logos12: Hairline Client Wall

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.

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/logos12"
```

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/logos12.tsx` plus the `badge23` component it uses for the eyebrow.

### Quick start

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

tsxCopy

```
import { Logos12, logos12Demo } from "@/components/beste/block/logos12";

export default function Page() {
  return <Logos12 {...logos12Demo} />;
}
```

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

tsxCopy

```
import { Logos12 } from "@/components/beste/block/logos12";

export default function Page() {
  return (
    <Logos12
      badge={{ label: "Trusted by" }}
      heading="Groups, clinics, and single rooms, running the same quiet workflow"
      items={[
        { src: "/logos/brightwell.svg", alt: "Brightwell Group" },
        { src: "/logos/northgate.svg", alt: "Northgate Clinics" },
        { src: "/logos/meadowline.svg", alt: "Meadowline Care" },
        { src: "/logos/coastline.svg", alt: "Coastline Health" },
        { src: "/logos/alder.svg", alt: "Alder and Finch" },
        { src: "/logos/rowan.svg", alt: "Rowan Practice" },
      ]}
      stat="240 practices, 9 countries, one shared way of working"
      footnote="Names used with permission."
    />
  );
}
```

### Props

| Prop      | Type              | Default | Description                                             |
| --------- | ----------------- | ------- | ------------------------------------------------------- |
| badge     | { label: string } | –       | Monospace eyebrow above the claim, rendered via Badge23 |
| heading   | string            | –       | Short claim in the left column                          |
| items     | Logo\[\]          | \[\]    | Logo cells, filling the grid in source order            |
| stat      | string            | –       | Reach line, right-aligned from md up                    |
| footnote  | string            | –       | Credit note under the grid                              |
| className | string            | –       | Extra classes for the outer <section>                   |

tsCopy

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

### Behavior notes

* The grid draws its rules from the cells: every cell carries a right and bottom rule while the container supplies the left and top, so a filled grid closes on all four sides with one hairline everywhere and no doubling.
* That trick assumes full rows. Seven logos in a three-column grid leave the last row's missing cells without their share of the outline, so pass a count that divides by three, or by two at `sm`.
* Logos render greyscale at half opacity and come back to full colour on hover, which keeps a wall of mismatched brand colours from competing with the copy beside it.
* Each logo is capped by height (`h-7`, `md:h-8`) with `w-auto` and `object-contain`, so wordmarks of very different aspect ratios sit optically level without being stretched.
* `alt` carries the company name, so the wall still says who these customers are when images fail or a screen reader is doing the reading.
* The header row aligns on `md:items-end`, which drops the reach line onto the same baseline as the last line of the claim rather than centring it against the block.

## More Logos blocks

[View all Logos](/blocks/logos)

[](/block/logos9)

PRO

logos9

### Logo Grid Wall

Partitioned bordered grid of client wordmark cells.

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

PRO

logos7

### Logo Cloud

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

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

[](/block/logos10)

PRO

logos10

### Logos Split

Headline and blurb beside a grid of client wordmarks.

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