# Blog List

> Editorial index with a monospaced date column.

A shadcn/ui block from the [@blockforge](https://blockforge.terravidhal.me) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blockforge/blog-list).

- Page, with a live preview: https://shadcn.exchange/r/blockforge/blog-list
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blockforge/blog-list-light-bd6095154b304d19.png
- Registry item: https://blockforge.terravidhal.me/r/blog-list.json
- Categories: blog
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blockforge.terravidhal.me/r/blog-list.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Files

### `registry/blocks/blog-list.tsx`

```tsx
import Link from "next/link";

const posts = [
  {
    title: "Why we rewrote our docs from scratch",
    date: "2026-06-21",
    category: "Product",
  },
  {
    title: "Shipping dark mode across 200 components",
    date: "2026-06-09",
    category: "Design",
  },
  {
    title: "The case against feature flags (sometimes)",
    date: "2026-05-27",
    category: "Engineering",
  },
  {
    title: "What 1,000 support tickets taught us about onboarding",
    date: "2026-05-13",
    category: "Growth",
  },
];

export default function BlogList() {
  return (
    <section className="bg-background">
      <div className="mx-auto w-full max-w-3xl px-6 py-20 sm:py-24">
        <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
          Writing
        </h2>
        <p className="mt-2 text-muted-foreground">
          Notes on building, designing and running the product.
        </p>

        <ul className="mt-10">
          {posts.map((post) => (
            <li key={post.title} className="border-b border-border/60">
              <Link
                href="#"
                className="group flex items-baseline gap-6 py-5 transition-colors"
              >
                <span className="w-24 shrink-0 font-mono text-xs text-muted-foreground tabular-nums">
                  {post.date}
                </span>
                <span className="font-medium text-balance group-hover:underline group-hover:underline-offset-4">
                  {post.title}
                </span>
                <span className="ml-auto hidden shrink-0 text-xs text-muted-foreground sm:inline">
                  {post.category}
                </span>
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}
```