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

Last updated: 2026-07-29

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. Ruled Writing Index

# Ruled Writing Index[PRO](/pricing)

Image-free article index where every entry is one ruled row carrying the date, the category, the title and the reading time with a corner arrow, stacking to a readable block on mobile.

ViewCodeDocs

Base UI

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

## Blog58: Ruled Writing Index

Image-free article index for pages that need depth without weight. Every entry is one ruled row carrying the date, the category, the title and the reading time with a corner arrow, so five or fifteen pieces cost the same vertical space per item.

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

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/blog58.tsx` plus the `badge7` eyebrow and `button12` pill button it uses.

### Quick start

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

tsxCopy

```
import { Blog58, blog58Demo } from "@/components/beste/block/blog58";

export default function Page() {
  return <Blog58 {...blog58Demo} />;
}
```

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

tsxCopy

```
import { Blog58 } from "@/components/beste/block/blog58";

export default function Page() {
  return (
    <Blog58
      badge={{ label: "Published" }}
      heading="An index of everything we published this year."
      description="Short pieces, mostly written the week after a project closed."
      entries={[
        {
          date: "18 June 2026",
          category: "Systems",
          title: "The guideline nobody opens, and what we write instead",
          readingTime: "7 min",
          href: "/journal/guidelines",
        },
      ]}
      button={{ label: "Open the archive", href: "/journal" }}
      labels={{ note: "One piece a fortnight." }}
    />
  );
}
```

### Props

| Prop        | Type              | Default | Description                                                |
| ----------- | ----------------- | ------- | ---------------------------------------------------------- |
| badge       | { label: string } | –       | Eyebrow label rendered as a Badge7                         |
| heading     | string            | –       | Section heading in the left column                         |
| description | string            | –       | Supporting paragraph, right-aligned from md up             |
| entries     | WritingEntry\[\]  | \[\]    | One ruled row per article                                  |
| button      | ActionButton      | –       | Outline pill CTA on the closing rule, rendered as Button12 |
| labels      | Blog58Labels      | {}      | Fixed strings that are not content: the closing note       |
| className   | string            | –       | Extra classes for the outer <section>                      |

tsCopy

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

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

type Blog58Labels = {
  note?: string;
};
```

### Behavior notes

* Each row is a single `next/link` spanning all four columns, so the whole rule is clickable rather than just the title.
* The grid is `md:grid-cols-[minmax(0,10rem)_minmax(0,9rem)_1fr_auto]` on `md:items-baseline`: date and category get fixed measures, the title absorbs the width, and the reading time sits flush right with its arrow.
* `date` is a preformatted string, so entries can read `18 June 2026`, `Issue 04` or `Spring` without the block importing a date library or worrying about locale.
* Rows carry no hover treatment beyond the pointer, per the set's rule against colour, scale and border changes on cards and list items.
* The closing note row sits directly on the last row's rule with no extra top margin, which finishes the index like the foot of a table.
* Because there are no images, the block is a good pairing under a media-heavy section, or on a page that already carries a card-based journal grid.

## More Blog blocks

[View all Blog](/blocks/blog)

[](/block/blog61)

FREE

blog61

### Filterable Archive Index

A dense blog archive whose subject pills are derived from the posts themselves and carry live counts, filtering a two-column list of hairline rows stamped with a date and a reading time.

[](/block/blog15)

PRO

blog15

### Minimal Text List

Clean text-only blog list with arrow icons. No images, just titles, dates, and authors. Lightweight design with hover arrow animation.

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

FREE

blog57

### Journal Lead And Index

Editorial journal preview pairing one lead entry with a wide image, category, title, excerpt and date against a ruled index of three shorter entries, headed by an eyebrow, a display heading and an outline pill CTA.

[](/block/blog22)

PRO

blog22

### Full-Width Stacked Cards

Vertically stacked blog cards with 2:1 aspect ratio images. Full article summaries with author avatars and read more buttons. Long-form content showcase.

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

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