Month-Grouped Archive

Blog18: Month-Grouped Archive

A chronological blog archive that groups posts by month-and-year headings, sorting the groups newest-first and rendering each post as a compact row with a square thumbnail, a short formatted date, an optional read time, a title, and an optional author name.

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

Base UI flavor

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

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

Quick start

The installed file exports blog18Demo alongside the block: the exact props behind the preview above. Spread it to get a working month-grouped archive in one line.

import { Blog18, blog18Demo } from "@/components/beste/block/blog18";

export default function Page() {
  return <Blog18 {...blog18Demo} />;
}

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

import { Blog18 } from "@/components/beste/block/blog18";

export default function Page() {
  return (
    <Blog18
      badge={{ label: "Archive", variant: "default" }}
      heading="Blog Archive"
      description="Browse our articles by date."
      posts={[
        {
          image: { src: "/covers/design-systems.jpg", alt: "Design systems" },
          title: "The Future of Design Systems",
          summary: "How design systems are evolving.",
          date: "January 15, 2026",
          readTime: "8 min",
          author: { name: "Lisa Park", title: "Senior Developer" },
          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

• Posts are grouped by month with new Date(post.date).toLocaleDateString(...), so any post lacking a date is silently dropped from the output entirely, not shown ungrouped.
• Group headings are sorted newest-first by parsing the "Month Year" key back into a Date; within a group, posts keep their original array order rather than being sorted by day.
• Each post date is reformatted to a short "Mon D" label (for example "Jan 15") for the row, while the full string is used only for grouping, so the row date and the group heading come from the same source.
• The thumbnail and the title are both wrapped in next/link pointing at post.href, falling back to "#" when href is omitted, so a post with no link is still clickable but goes nowhere.
• post.summary is part of the BlogPost type and required, but it is never rendered by this block; only the title, date, read time, and author name appear in a row.
• post.author.title, author.avatar, author.href, and post.tags are accepted by the type but unused here: only author.name is displayed, as by {name}.
• The read time and its · separator render only when post.readTime is set, and the whole header block (badge, heading, description) is omitted unless at least one of those three props is provided.
• The layout is capped at max-w-4xl and every row uses a fixed square thumbnail (w-16, sm:w-20); there is no pagination, filtering, or load-more, so every dated post renders at once.