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

Last updated: 2026-08-12

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. [Bento](/blocks/bento)
5. /
6. Publication Hub Mosaic

# Publication Hub Mosaic[PRO](/pricing)

A six-column mosaic that carries a whole publication at once: the newest piece as a photographic tile, two counted figures, a reader quote, an inverted subscribe cell and a row of subject chips.

ViewCodeDocs

Base UI

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

## Bento14: Publication Hub Mosaic

A six-column mosaic that carries a whole publication at once: the newest piece as a photographic tile, two counted figures, a reader quote, an inverted subscribe cell and a row of subject chips.

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

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/bento14.tsx`, the `badge6` component used for the eyebrow and the `button1` seal button in the subscribe cell.

### Quick start

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

tsxCopy

```
import { Bento14, bento14Demo } from "@/components/beste/block/bento14";

export default function HubPage() {
  return <Bento14 {...bento14Demo} />;
}
```

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

tsxCopy

```
import { Bento14 } from "@/components/beste/block/bento14";

export default function HubPage() {
  return (
    <Bento14
      eyebrow="The whole thing"
      heading="Everything on one page"
      lead={{
        meta: "Issue 042 · out this morning",
        title: "The quote we lost on purpose",
        image: { src: "/covers/042.jpg", alt: "An estimate on a desk" },
        href: "/letters/042",
      }}
      counts={[
        { value: "186", label: "Pieces published" },
        { value: "31,904", label: "Readers" },
      ]}
      quote={{ text: "Two of them closed at the price on the page.", name: "A reader, in March" }}
      subscribe={{
        title: "One letter, every Tuesday",
        description: "Plain text, unsubscribe link at the top.",
        button: { label: "Subscribe", href: "/subscribe" },
      }}
      topicsLabel="Read by subject"
      topics={[{ label: "Pricing", href: "/subjects/pricing" }]}
    />
  );
}
```

### Props

| Prop        | Type          | Default | Description                                     |
| ----------- | ------------- | ------- | ----------------------------------------------- |
| eyebrow     | string        | –       | Badge6 label above the hairline rule            |
| heading     | string        | –       | Section heading under the rule                  |
| lead        | LeadPiece     | –       | The newest piece, as the wide photographic tile |
| counts      | CountCell\[\] | \[\]    | Small figure cells beside the lead              |
| quote       | QuoteCell     | –       | Reader quote cell                               |
| subscribe   | SubscribeCell | –       | Inverted cell with the seal button              |
| topicsLabel | string        | –       | Label in the subject cell                       |
| topics      | TopicLink\[\] | \[\]    | Subject chips                                   |
| className   | string        | –       | Extra classes for the outer section             |

tsCopy

```
type LeadPiece = {
  meta: string;
  title: string;
  image: LeadImage;
  href: string;
};

type CountCell = {
  value: string;
  label: string;
};

type QuoteCell = {
  text: string;
  name: string;
};

type SubscribeCell = {
  title: string;
  description: string;
  button: { label: string; href: string };
};

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

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

### Behavior notes

* The mosaic is a six column grid with `md:auto-rows-[minmax(13rem,auto)]`, and each cell states its own span. The lead takes four columns and two rows, which is what makes it read as the front page of the section.
* Cells are one of three surfaces: the photographic lead, soft `bg-muted/50` cells, and a single inverted `bg-foreground` cell for the subscribe call. Nothing is outlined, so the mosaic stays one object.
* The subscribe button is `Button1` in its primary tone, the variant meant for a dark cell.
* Every cell is optional. Dropping `quote` or `counts` leaves the rest of the grid intact, since spans are declared per cell rather than by position.
* Below `md` the whole thing is a single column in source order, lead first.

## More Bento blocks

[View all Bento](/blocks/bento)

[](/block/bento9)

PRO

bento9

### Editorial Issue Bento

Magazine mosaic whose cover story fills a two-row photographic tile with its category and page count on the scrim, beside an inverted figure tile, a bordered publication note and three soft article tiles.

[](/block/bento12)

PRO

bento12

### Evidence Mosaic

A six-column bento of proof: a row of figure tiles with the first inverted, a tall card whose image tile floats a live breakdown chart, a tile carrying a customer quote card, and a soft note on method.

[](/block/bento13)

PRO

bento13

### Onboarding Mosaic

A six-column bento for getting started: a wide card floating a live step tracker, a numbered week list on hairlines, an inverted quote tile, and a capture card holding a working email row.

[](/block/bento3)

PRO

bento3

### Selected Work Bento

Work mosaic on a six-column track mixing photographic tiles that carry their caption inside on a gradient scrim with a soft statement tile and an inverted figure tile, the lead project spanning four columns and two rows.

[](/block/bento11)

PRO

bento11

### Product Surface Mosaic

A six-column bento mixing a lead card whose image tile floats a live metrics panel, a soft statement tile, an inverted figure tile, a second asset tile carrying an uptime strip, a hairline inclusion list, and a captioned photograph.

[](/block/bento5)

PRO

bento5

### Phase Bento With Photographs

Process mosaic where the opening phase fills a two-row photographic tile with its eyebrow, explanation and duration on the scrim, beside an inverted summary tile and three smaller phase tiles carrying only their label and length.

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