Minimal Text List

Blog15: Minimal Text List

A single-column, image-free article index inside a max-w-3xl container: an optional badge/heading/description header sits above a stack of border-b rows, each row a full-width link showing the first tag, date, dot-separated read time, title, and a "by " line, with an ArrowUpRight icon that nudges up-and-right on hover.

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

Base UI flavor

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

This installs the block to components/beste/block/blog15.tsx, plus the badge shadcn/ui primitive it uses for the optional header eyebrow.

Quick start

The installed file exports blog15Demo alongside the block: the exact props behind the preview above. Spread it to get a working article list in one line.

import { Blog15, blog15Demo } from "@/components/beste/block/blog15";

export default function Page() {
  return <Blog15 {...blog15Demo} />;
}

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

import { Blog15 } from "@/components/beste/block/blog15";

export default function Page() {
  return (
    <Blog15
      badge={{ label: "Archive", variant: "default" }}
      heading="All Articles"
      description="A complete list of everything we've published."
      posts={[
        {
          image: { src: "/covers/design-systems.jpg", alt: "Design systems" },
          title: "The Future of Design Systems",
          summary: "Exploring how design systems are evolving.",
          date: "January 15, 2026",
          readTime: "8 min",
          author: { name: "Lisa Park" },
          tags: [{ label: "Design", href: "/blog/design-systems" }],
          href: "/blog/design-systems",
        },
      ]}
    />
  );
}

Props

type Author = {
  name: string;
  title?: string;
  avatar?: { src: string; alt: string };
  href?: string;
};

type Tag = {
  label: string;
  href?: string;
};

type BlogPost = {
  image: { src: string; alt: string };
  title: string;
  summary: string;
  date?: string;
  readTime?: string;
  author?: Author;
  tags?: Tag[];
  href?: string;
};

Behavior notes

• Despite BlogPost requiring image and summary, this block renders neither: the layout is text-only, so both fields are collected but never displayed.
• Each row is a next/link pointing at post.href, falling back to "#" when href is omitted; there is no onClick or navigation callback to hook into.
• Only the first tag is shown, and only its label as a plain text-primary span; tags[1] onward and every tag.href are ignored, so tags are not clickable.
• The author line renders just by {author.name}; author.title, author.avatar, and author.href are part of the type but unused by the markup.
• readTime is rendered with a leading middot separator only when present, and the entire meta row (tag, date, read time) collapses gracefully as each field is individually optional.
• Rows are keyed by array index, so reordering or filtering posts can cause React to reuse the wrong DOM node.
• The ArrowUpRight icon and title color shift are pure CSS hover effects scoped to the group/blog15 article; nothing about selection or active state is tracked in component state.