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

Last updated: 2026-08-03

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. Featured Article With Recent List

# Featured Article With Recent List[PRO](/pricing)

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.

ViewCodeDocs

Base UI

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

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

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

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/blog60.tsx` plus the `badge23` and `button21` components it uses for the eyebrow and the archive link.

### Quick start

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

tsxCopy

```
import { Blog60, blog60Demo } from "@/components/beste/block/blog60";

export default function BlogPage() {
  return <Blog60 {...blog60Demo} />;
}
```

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

tsxCopy

```
import { Blog60 } from "@/components/beste/block/blog60";

export default function BlogPage() {
  return (
    <Blog60
      badge={{ label: "Writing" }}
      heading="Notes from inside a working practice"
      button={{ label: "All articles", href: "/blog" }}
      featured={{
        category: "Migration",
        title: "What eleven years of records actually looks like when you export it",
        excerpt: "We opened one practice's full export and read every column.",
        author: "Priya Nandan",
        readingTime: "9 min read",
        href: "/blog/eleven-years",
        image: { src: "/blog/export.jpg", alt: "Paperwork and a calculator on a desk" },
      }}
      posts={[
        {
          date: "12 May",
          category: "Operations",
          title: "The waiting list is a scheduling problem, not a queue",
          href: "/blog/waiting-list",
        },
        {
          date: "28 Apr",
          category: "Billing",
          title: "Why we raise the invoice from the appointment, not the month",
          href: "/blog/invoicing",
        },
      ]}
    />
  );
}
```

### Props

| Prop      | Type                            | Default | Description                                           |
| --------- | ------------------------------- | ------- | ----------------------------------------------------- |
| badge     | { label: string }               | –       | Eyebrow above the heading, rendered through Badge23   |
| heading   | string                          | –       | Section heading, capped at max-w-2xl                  |
| button    | { label: string; href: string } | –       | Outline archive link, aligned to the heading baseline |
| featured  | FeaturedPost                    | –       | The lead article, rendered as one linked column       |
| posts     | ListedPost\[\]                  | \[\]    | Recent posts as linked hairline rows                  |
| className | string                          | –       | Extra classes for the outer section                   |

tsCopy

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

type FeaturedPost = {
  category: string;
  title: string;
  excerpt: string;
  author: string;
  readingTime: string;
  href: string;
  image: PostImage;
};

type ListedPost = {
  date: string;
  category: string;
  title: string;
  href: string;
};
```

### Behavior notes

* Both the feature and each row are whole `Link` elements, so the entire card and the entire row are single targets. Everything inside is a `span` rather than a block element, which is what keeps that markup valid.
* Two named hover groups are in play, `group/blog60` on the feature and `group/blog60row` on the rows, so the image zoom and the row arrow never trigger each other. Named groups also mean nesting this block inside another grouped component is safe.
* Both hover effects are wrapped in `motion-safe:`, so they are skipped for anyone who has asked their system to reduce motion.
* Rows use `first:border-t-0 first:pt-0` and `last:pb-0`, so the list sits flush at both ends of its column and lines up with the top of the feature image beside it.
* The list column carries `lg:pt-2` to compensate for the optical difference between an image edge and a text baseline.
* The header uses `flex-wrap items-end justify-between`, so the archive button sits on the heading's baseline on wide screens and drops below it when the heading needs the width.
* `date` and `readingTime` are plain strings, never parsed or formatted, so the block renders exactly what you pass and stays free of locale differences between server and client.

## More Blog blocks

[View all Blog](/blocks/blog)

[](/block/blog4)

FREE

blog4

### Featured Hero with Grid

Large featured article with side-by-side image and content, followed by a three-column grid of secondary posts. Read more buttons and author details included.

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

FREE

blog25

### Split Image with List

Two-column layout with featured image on left and article list on right. Divider-separated entries with arrow hover effects.

[](/block/blog13)

PRO

blog13

### Sidebar with Categories

Main content area with horizontal post cards plus sidebar. Categories show post counts and popular tags section with clickable badges.

[](/block/blog5)

PRO

blog5

### Horizontal List with Icons

Vertical stack of horizontal blog cards with left-aligned thumbnails. Features calendar and clock icons for metadata, author titles, and tag badges.

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

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