# 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/blog45. 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. Press Room Digest

# Press Room Digest[PRO](/pricing)

A press room listing with a square eyebrow, a bold heading and intro over a hairline rule, a wide lead release with a panoramic image, and the remaining releases stacked as ruled rows that pair a date column with a release type, headline, dek, and a square arrow chip.

ViewCodeDocs

Base UI

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

## Blog45: Press Room Digest

A newsroom listing section that splits its items into two treatments: a `Badge6` eyebrow, bold heading, and intro sit above a hairline rule, the first item becomes a full-width lead story with a wide cover image, and every item after it becomes an image-free wire-feed row pairing a fixed date column with a release-type label, headline, dek, and a square arrow chip.

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

**Base UI flavor**

bashCopy

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

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

### Quick start

The installed file exports `blog45Demo` alongside the block: the exact props behind the preview above. Spreading it gives a working press room in one line.

tsxCopy

```
import { Blog45, blog45Demo } from "@/components/beste/block/blog45";

export default function Page() {
  return <Blog45 {...blog45Demo} />;
}
```

Written out by hand, a trimmed setup with real props looks like this:

tsxCopy

```
import { Blog45 } from "@/components/beste/block/blog45";

export default function Page() {
  return (
    <Blog45
      label="Press room"
      heading="Statements, filings, and operational updates"
      description="Everything issued by the communications office, in the order it was released."
      items={[
        {
          image: { src: "/press/aragon-hall.jpg", alt: "A grid-scale battery storage hall" },
          kind: "Press release",
          category: "Operations",
          title: "Second grid-scale storage site opens in Aragon",
          summary: "The 320 MWh facility connects to the regional transmission network this quarter.",
          date: "Oct 14, 2026",
          author: { name: "Maria Santos", title: "Tech Lead" },
          href: "/press/aragon-storage",
        },
        {
          kind: "Annual report",
          category: "Sustainability",
          title: "Group emissions fall 18 percent ahead of the interim target",
          summary: "The eleventh sustainability report covers Scope 1, 2, and 3 emissions.",
          date: "Oct 2, 2026",
          author: { name: "Lisa Park", title: "Senior Developer" },
          href: "/press/emissions-report",
        },
      ]}
    />
  );
}
```

### Props

| Prop        | Type        | Default | Description                                                                      |
| ----------- | ----------- | ------- | -------------------------------------------------------------------------------- |
| label       | string      | –       | Badge6 eyebrow above the heading; omitted entirely when absent                   |
| heading     | string      | –       | Bold section heading                                                             |
| description | string      | –       | Muted supporting paragraph under the heading                                     |
| items       | Article\[\] | \[\]    | Releases to list; the first becomes the lead story and the rest become feed rows |
| className   | string      | –       | Extra classes merged onto the outer <section>                                    |

tsCopy

```
type Article = {
  image?: ArticleImage;
  kind: string;
  category: string;
  title: string;
  summary: 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;
};
```

### Behavior notes

* The split is positional, not a flag: `items[0]` renders as the lead article and `items.slice(1)` renders as feed rows. With a single item the feed disappears entirely, and with an empty array both the lead and the rows are skipped while the rule under the header still renders, so the section never loses its structure.
* The lead image is optional per item. When present it sits in an `aspect-video` clip that widens to `md:aspect-[21/9]` at `md`, and it scales to `scale-105` on hover under a `motion-safe:` guard so the zoom is skipped for reduced-motion users. The lead headline shifts to `text-primary` on the same group hover.
* Feed rows are a three-track grid. Below `md` the tracks stack vertically (date, then the kind, title, and summary group, then the arrow chip); at `md` and up they become `md:grid-cols-[9rem_1fr_auto]`, giving the date a fixed 9rem column and the arrow chip an auto column. Each row carries its own top hairline, so no rule is ever left hanging under an empty list.
* Not every field is displayed on every item. `category` is read only on the lead, where it prints as `category · kind`, while feed rows show `kind` alone. Only `author.name` reaches the DOM, in the lead byline `By {name} · {date}`; the optional `title`, `avatar`, and `href` fields on `Author` are part of the type but are not rendered, and feed rows carry no byline at all.
* Everything is static markup wrapped in Next.js `Link` components pointing at `item.href`, with no state, no click handler, and no callback prop. Rows are keyed by array `index` rather than by an id or `href`, so reordering `items` remounts them.

## More Blog blocks

[View all Blog](/blocks/blog)

[](/block/blog44)

PRO

blog44

### Newsroom Lead and Index

A newsroom listing with a heading, a divider, and an eyebrow over a hairline rule, a two-column lead story with a large image, the remaining stories stacked as numbered ruled rows with square thumbnails, and a seal button to the full archive.

[](/block/blog55)

PRO

blog55

### Press Release Wall

A three-column wall of image-free press release cards on soft muted surfaces under a parenthetical eyebrow and a large heading, each card pairing a release type and date with a headline, dek, byline, and a ruled category row.

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

[](/block/blog47)

PRO

blog47

### Bulletin Columns

A newsroom bulletin with a square eyebrow, an image-free lead story split across a 7/5 grid with a standfirst, byline, and a seal button, then three illustrated columns with hover-zoom images below a single hairline rule.

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

PRO

blog54

### Pinned Lead Newsroom

A twelve-column newsroom band under a parenthetical eyebrow, pairing one lead story carrying a pinned marker, a large image, and a byline block with a stack of four ruled secondary rows, closing on a pill button to the archive.

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