Ruled Writing IndexPRO

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.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

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

Base UI flavor

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.

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:

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

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.