Blog, list · Klarhimmel UI

Install

npx shadcn add @klarhimmel/blog-list

Usage

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import BlogList from '@/components/klarhimmel/blocks/blog-list';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <BlogList props={{
          "eyebrow": "Journal",
          "title": "Latest writing",
          "description": "Notes on planning, reviews and working well in a small team.",
          "posts": [
            {
              "date": "Mar 12, 2026",
              "title": "A calmer way to run a weekly review",
              "excerpt": "Fifteen minutes, one page and no slides. The format we use every Friday.",
              "category": "Guide",
              "href": "#post-1"
            },
            {
              "date": "Feb 27, 2026",
              "title": "What changed in version 2.0",
              "excerpt": "Workload planning, faster search and a rebuilt review flow, explained.",
              "category": "Product",
              "href": "#post-2"
            },
            {
              "date": "Feb 9, 2026",
              "title": "How a five-person team ships weekly",
              "excerpt": "Small batches, written decisions and a strict limit on work in progress.",
              "category": "Company",
              "href": "#post-3"
            },
            {
              "date": "Jan 21, 2026",
              "title": "Writing decisions down",
              "excerpt": "A short template that keeps the reasoning when the people move on.",
              "category": "Guide",
              "href": "#post-4"
            }
          ],
          "more": {
            "label": "View all posts",
            "href": "#journal"
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

$import Block from '@/components/klarhimmel/blocks/blog-list';

Also called

blog/list

Category: Post cards, lists and the article page.

Notes

When to use it

Archive-style rows with date, title, excerpt and category, ending in a link to every post. Use it when readers scan by date; `blog-cards` suits pictures and `blog-featured` suits one hero article.

Writing for it

- Write dates in one format across all rows, since the date field (30 characters) is shown as text in a left column. - Excerpts hold 200 characters and are limited in line length, so one tight sentence reads better than two clipped ones. - The more link is a secondary button beside the heading, so label it with the destination, such as 'View all posts'.

Watch out for

The block is built in a narrow container that widens only at large sizes, so it is not a full-width layout. It takes one to eight posts, and the whole row is clickable through the title link, so each row needs its own href.

Pairs well with

Usage

The block in a page, with its default content (long lists shortened). Every prop is in the table below.

section.tsx

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import BlogList from '@/components/klarhimmel/blocks/blog-list';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <BlogList props={{
          "eyebrow": "Journal",
          "title": "Latest writing",
          "description": "Notes on planning, reviews and working well in a small team.",
          "posts": [
            {
              "date": "Mar 12, 2026",
              "title": "A calmer way to run a weekly review",
              "excerpt": "Fifteen minutes, one page and no slides. The format we use every Friday.",
              "category": "Guide",
              "href": "#post-1"
            },
            {
              "date": "Feb 27, 2026",
              "title": "What changed in version 2.0",
              "excerpt": "Workload planning, faster search and a rebuilt review flow, explained.",
              "category": "Product",
              "href": "#post-2"
            },
            {
              "date": "Feb 9, 2026",
              "title": "How a five-person team ships weekly",
              "excerpt": "Small batches, written decisions and a strict limit on work in progress.",
              "category": "Company",
              "href": "#post-3"
            },
            {
              "date": "Jan 21, 2026",
              "title": "Writing decisions down",
              "excerpt": "A short template that keeps the reasoning when the people move on.",
              "category": "Guide",
              "href": "#post-4"
            }
          ],
          "more": {
            "label": "View all posts",
            "href": "#journal"
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}

Props

The type, default and text limit of every prop. On a real page, over-limit text is kept and checkSections flags it (Installation, Check a page before you ship); this live preview shows the default until it fits. The panel above edits all props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Journal'`	Text, up to 60 characters.
`title`	`string`	`'Latest writing'`	Text, up to 120 characters.
`description`	`string`	`'Notes on planning, reviews and work…'`	Text, up to 300 characters.
`posts`	`{ date, title, excerpt, category, href }[]`	`4 items`	List of 1 to 8. Each item: date, title, excerpt, category, href.
`more`	`Link`	`{…}`	See the type.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.