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

Last updated: 2026-07-31

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. [Blog](/blocks/blog)
5. /
6. Category Mosaic

# Category Mosaic[PRO](/pricing)

A six-slot photo mosaic under a parenthetical eyebrow and a large heading, where every tile is bound to one newsroom category so the grid doubles as a section map, with a ruled legend naming the sections above it.

ViewCodeDocs

Base UI

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

## Blog56: Category Mosaic

A six-tile photo mosaic under a `Badge7` eyebrow and a large heading, in which every tile is bound to one newsroom category, so the layout doubles as a section map: the dominant tile is always Corporate, the tall tile is always Markets, and so on. A ruled legend names the sections above the grid.

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

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/blog56.tsx` and its dependencies, including the `Badge7` component it renders.

### Quick start

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

tsxCopy

```
import { Blog56, blog56Demo } from "@/components/beste/block/blog56";

export default function Page() {
  return <Blog56 {...blog56Demo} />;
}
```

Then replace the demo with your own props. Articles are matched to tiles by their `category` string, which must be one of `Corporate`, `Markets`, `Governance`, `Sustainability`, `Operations`, or `Research`.

tsxCopy

```
import { Blog56 } from "@/components/beste/block/blog56";

export default function Page() {
  return (
    <Blog56
      badge={{ label: "Newsroom" }}
      heading="Company news by section"
      description="Every tile holds one part of the newsroom."
      labels={{ legend: "Sections" }}
      items={[
        {
          image: { src: "/press/aragon.jpg", alt: "Battery cabinets in a storage hall" },
          category: "Corporate",
          title: "Aragon storage campus enters commercial operation",
          date: "March 4, 2026",
          author: { name: "Maria Santos", title: "Tech Lead" },
          href: "/press/aragon-storage",
        },
        {
          image: { src: "/press/q4.jpg", alt: "Quarterly figures on a screen" },
          category: "Markets",
          title: "Fourth-quarter revenue climbs 12 percent",
          date: "February 26, 2026",
          author: { name: "David Chen", title: "Backend Engineer" },
          href: "/press/q4-revenue",
        },
      ]}
    />
  );
}
```

### Props

| Prop        | Type         | Default | Description                                                     |
| ----------- | ------------ | ------- | --------------------------------------------------------------- |
| badge       | Badge        | –       | Badge7 parenthetical eyebrow above the heading                  |
| heading     | string       | –       | Section heading                                                 |
| description | string       | –       | Muted supporting paragraph under the heading                    |
| items       | Article\[\]  | \[\]    | Articles matched to tiles by their category string              |
| labels      | Blog56Labels | {}      | Copy for the category legend; the legend is omitted when absent |
| className   | string       | –       | Extra classes merged onto the outer section element             |

tsCopy

```
type Badge = {
  label: string;
};

type Article = {
  image: ArticleImage;
  category: string;
  title: string;
  date: string;
  author: Author;
  href: string;
};

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

type Author = {
  name: string;
  title?: string;
  avatar?: { src: string; alt: string };
  href?: string;
};

type Blog56Labels = {
  legend?: string;
};
```

The tile kicker prints the tile's own category rather than the article's, so a mismatched article can never make the map lie. Only `author.name` is rendered, in the caption byline.

### Behavior notes

* Each tile takes the first article in `items` whose `category` matches its own. Passing several articles per category is harmless, but only the first of each is shown, so trim the list to one per section unless you are reusing the same array elsewhere.
* A tile whose category has no matching article is not rendered rather than shown empty. That leaves a hole in the mosaic, so supply all six categories to keep the grid tiling exactly.
* The six spans tile a four-column, three-row grid exactly (4 + 2 + 1 + 1 + 2 + 2 = 12 cells). Article order in `items` does not affect the layout at all: the tile decides its own category, size, and title scale.
* Category names are matched literally and are case-sensitive. To change the sections, edit the `tileStyles` array in the installed file; the legend reads from the same array, so it stays in step automatically.
* The grid drops to two columns below `md`, with fixed `11rem` rows growing to `13rem`, and captions sit over a top-to-bottom scrim. Headlines are clamped per tile so a long title cannot overflow.
* Every tile is a Next.js `Link` with a visible focus ring. There is no state and no timer, and photos carry no hover treatment.

## More Blog blocks

[View all Blog](/blocks/blog)

[](/block/blog50)

PRO

blog50

### Magazine Mosaic

A six-slot magazine mosaic with a parenthetical eyebrow and a large heading, pairing a dominant two-by-two tile with a tall tile, wide tiles, and unit tiles that each caption their photo over a graded scrim.

[](/block/blog51)

PRO

blog51

### Mixed Tile Mosaic

A six-slot mosaic under a parenthetical eyebrow and a large heading, mixing full-bleed photo tiles with flat text tiles on muted and inverted surfaces, where the treatment belongs to the slot and every tile advances one story through a larger article pool on a timer, staggered 100 milliseconds apart so the refresh reads as a wave running left to right, pausing on hover, focus, tabs, and reduced motion.

[](/block/blog48)

PRO

blog48

### Quad Grid

A newsroom listing with a square eyebrow, a two-column heading band over a hairline rule, and four equally weighted stories as bordered cards, each linking through a hover-zoom image, a category kicker, a bold headline, a summary, and a byline pinned to the card foot.

[](/block/blog43)

PRO

blog43

### Editorial Article Grid

A blog listing with an eyebrow over a hairline rule, a two-column heading, and three linked article cards with a hover-zoom image, a category label, a title, an excerpt, and byline.

[](/block/blog52)

PRO

blog52

### Newsroom Masonry

A CSS-columns masonry of linked newsroom cards under a parenthetical eyebrow and a large heading, where the image aspect ratio cycles by position so the wall keeps an uneven, magazine-like rhythm.

[](/block/blog46)

PRO

blog46

### Front Page Columns

A newsroom front page with a heading, a divider, and a square eyebrow over a hairline rule, a wide lead story whose headline and standfirst split across a twelve column band under a panoramic image, and the remaining articles set as three bordered text cards.

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