# 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/blog65. 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. [Blog](/blocks/blog)
5. /
6. Lead Story With Thumbnail Rail

# Lead Story With Thumbnail Rail[PRO](/pricing)

A lead article carrying its own wide image, excerpt and byline next to a rail of further posts reduced to a thumbnail and a title, so one story clearly outranks the rest.

ViewCodeDocs

Base UI

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

## Blog65: Lead Story With Thumbnail Rail

A lead article carrying its own wide image, excerpt and byline next to a rail of further posts reduced to a thumbnail and a title, so one story clearly outranks the rest.

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

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/blog65.tsx` and the `badge6` component it uses for the eyebrow (installed to `components/beste/component/badge6.tsx`).

### Quick start

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

tsxCopy

```
import { Blog65, blog65Demo } from "@/components/beste/block/blog65";

export default function WritingPage() {
  return <Blog65 {...blog65Demo} />;
}
```

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

tsxCopy

```
import { Blog65 } from "@/components/beste/block/blog65";

export default function WritingPage() {
  return (
    <Blog65
      eyebrow="This week"
      bylinePrefix="by"
      featured={{
        image: { src: "/covers/process.jpg", alt: "A plan pinned above a desk" },
        title: "The process we fall back on when three projects overlap",
        excerpt: "Shipping is not the hard part. Two weeks of overlap is.",
        author: {
          name: "Alex Turner",
          title: "Studio lead",
          avatar: { src: "/people/alex.jpg", alt: "Alex Turner" },
        },
        href: "/essays/overlap",
      }}
      posts={[
        {
          image: { src: "/covers/tools.jpg", alt: "A laptop on a desk" },
          title: "The tools that survived a year on our machines",
          href: "/essays/tools",
        },
      ]}
    />
  );
}
```

### Props

| Prop         | Type              | Default | Description                                    |
| ------------ | ----------------- | ------- | ---------------------------------------------- |
| eyebrow      | string            | –       | Badge6 label above the hairline rule           |
| bylinePrefix | string            | –       | Word before the author name, e.g. "by"         |
| featured     | FeaturedPost      | –       | The lead story, with image, excerpt and byline |
| posts        | SecondaryPost\[\] | \[\]    | Rail beside the lead, thumbnail and title only |
| className    | string            | –       | Extra classes for the outer section            |

tsCopy

```
type FeaturedPost = {
  image: PostImage;
  title: string;
  excerpt: string;
  author: Author;
  href: string;
};

type SecondaryPost = {
  image: PostImage;
  title: string;
  href: string;
};

type Author = {
  name: string;
  title?: string;
  avatar?: PostImage;
};

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

### Behavior notes

* The hierarchy is typographic, not decorative: the lead title runs to `md:text-4xl` while the rail titles stay at `md:text-xl`, so the ranking survives even with the images turned off.
* The split is `lg:grid-cols-[1.1fr_0.9fr]`. Below `lg` the rail drops under the lead and keeps its own order.
* The lead is one `Link` wrapping image, title, excerpt and byline, so nothing in it needs a second click target.
* The byline is composed from parts: `bylinePrefix`, the name in bold, then the author title after a comma when one is passed. Omitting the title leaves a clean name.
* Both the lead image and the rail thumbnails scale slightly on hover inside `motion-safe`, and the titles move to the accent colour through a shared `group/blog65`.
* The rail is a plain `flex flex-col gap-8`, so it takes as many posts as you pass rather than a fixed four.

## More Blog blocks

[View all Blog](/blocks/blog)

[](/block/blog64)

PRO

blog64

### Curated Reading List With Thumbnails

A curated reading list under a left-aligned header, laid out as two columns of linked rows where a wide thumbnail sits beside the article title and nothing else competes with it.

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

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

PRO

blog60

### Featured Article With Recent List

A blog section pairing one linked feature with a hover-zoom image, category label, and byline against a hairline list of five recent posts stamped with their date.

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