# 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/usecase52. 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. [Use Case](/blocks/use-case)
5. /
6. Placement Mosaic Grid

# Placement Mosaic Grid[PRO](/pricing)

Six application tiles alternating between landscape and portrait crops, each captioned on a rule with where the work lands, what it is applied to and the constraint it has to survive.

ViewCodeDocs

Base UI

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

## Usecase52: Placement Mosaic Grid

Six places one system has to survive, shown as a mosaic of photographs with mixed crops. Each picture is captioned under its own rule with the place, the application and the detail that matters.

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/usecase52?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/usecase52.tsx` plus the `badge7` eyebrow it uses.

### Quick start

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

tsxCopy

```
import { Usecase52, usecase52Demo } from "@/components/beste/block/usecase52";

export default function Page() {
  return <Usecase52 {...usecase52Demo} />;
}
```

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

tsxCopy

```
import { Usecase52 } from "@/components/beste/block/usecase52";

export default function Page() {
  return (
    <Usecase52
      badge={{ label: "Where it shows up" }}
      heading="One system, six places it has to survive."
      description="An identity is only as good as its worst application."
      placements={[
        {
          src: "/placements/wall.jpg",
          alt: "Wayfinding signage in a public building",
          place: "On a wall",
          application: "Wayfinding and building signage",
          detail: "Read at eighteen metres, in the building's own light.",
        },
        {
          src: "/placements/hand.jpg",
          alt: "Unbranded paper packaging",
          place: "In a hand",
          application: "Packaging and printed collateral",
          detail: "Uncoated stock, single colour, no varnish to hide behind.",
        },
      ]}
    />
  );
}
```

### Props

| Prop        | Type              | Default | Description                                       |
| ----------- | ----------------- | ------- | ------------------------------------------------- |
| badge       | { label: string } | –       | Eyebrow label rendered as a Badge7                |
| heading     | string            | –       | Section heading in the left header column         |
| description | string            | –       | Supporting paragraph in the right header column   |
| placements  | PlacementTile\[\] | \[\]    | Photographs and their captions, rendered in order |
| className   | string            | –       | Extra classes for the outer <section>             |

tsCopy

```
type PlacementTile = {
  src: string;
  alt: string;
  place: string;
  application: string;
  detail: string;
};
```

### Behavior notes

* Crops alternate by position: every second tile in a row of three is `aspect-[4/5]` while the rest are `aspect-[4/3]`, so the mosaic breaks its own rhythm without any per-item configuration.
* Tiles render as real `figure` and `figcaption` elements, with the caption under a `border-t` rule rather than on a scrim inside the picture.
* Each caption carries three levels in one block, place, application and detail, so a reader can scan the places alone or stop and read one.
* The grid steps one, two then three columns (`sm:grid-cols-2 lg:grid-cols-3`), which keeps the alternating crop pattern meaningful at desktop width and harmless below it.
* Row gaps are larger than column gaps (`gap-x-6 gap-y-10`), so stacked tiles stay separated when the grid wraps.
* Photographs carry no hover treatment and are not links: the section is evidence, not an index.
* The header is `md:items-end`, so the supporting paragraph sits on the heading's baseline rather than beside its first line.

## More Use Case blocks

[View all Use Case](/blocks/use-case)

[](/block/usecase46)

PRO

usecase46

### Industry Portrait Tiles

Four tall image tiles, one per industry, each followed by an explanation and a ruled foot pairing a proof line with a plain link into that sector's work.

[](/block/usecase42)

PRO

usecase42

### Multi-Site Locations

A multi-site use case with an eyebrow over a hairline rule, a two-column heading, and three image tiles that each float a live location card above a title and description.

[](/block/usecase19)

PRO

usecase19

### Portfolio Masonry Gallery

Pinterest-style masonry grid with variable-height image cards, category labels, and hover zoom effects. Perfect for creative portfolios or work showcases.

[](/block/usecase47)

PRO

usecase47

### Job Index With Image Panel

Ruled index of jobs on the left that swaps the panel beside it, where each selection brings its own photograph, explanation and two ruled outcome figures.

[](/block/usecase5)

FREE

usecase5

### Feature Icon Grid

Centered icon grid with titles and descriptions, featuring hover animations on icon containers. Perfect for showcasing product features or capabilities in a clean layout.

[](/block/usecase3)

FREE

usecase3

### Numbered Steps Process

Vertical numbered steps with alternating left-right image positions, descriptions, and feature lists. Perfect for explaining multi-step processes or onboarding flows.

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