Blog, post · Klarhimmel UI

Install

npx shadcn add @klarhimmel/blog-post

Usage

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <BlogPost props={{
          "category": "Guide",
          "title": "A calmer way to run a weekly review",
          "meta": "Mar 12, 2026 · 6 min read",
          "author": {
            "name": "Ida Lindqvist",
            "role": "Product designer, Northlight",
            "photo": {
              "src": "",
              "alt": "Portrait of Ida Lindqvist"
            }
          },
          "cover": {
            "src": "",
            "alt": "A notebook open on a desk beside a cup of coffee"
          },
          "body": "Most weekly reviews fail the same way: they grow. A ten minute check-in becomes an hour of status updates, and nobody remembers what was decided.\n\nWe keep ours to fifteen minutes and one page. Three questions, in this order: what moved, what is stuck, and what do we want to be true by next Friday.\n\nWrite the answers down before the meeting, not during it. The meeting is for deciding, not for reading aloud.\n\nWhen a review ends early, let it. The time you give back is the point."
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

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

Also called

blog/post

Category: Post cards, lists and the article page.

Notes

When to use it

A single article page: category and date, title, author, cover image and a reading column of body text. It is the article itself, so use `blog-list` or `blog-cards` for index pages.

Writing for it

- The title is the page's h1 and holds 140 characters. State the finding in it, because there is no separate intro field. - The body takes 4000 characters as plain text. Separate paragraphs with a blank line, since line breaks are kept as written. - Fill the author role (80 characters) with a job and a company, as the default does. It sits under the name beside a small round photo.

Watch out for

The title renders as an h1, so do not place another h1 block such as a hero on the same page. The body has no headings, lists, links or images, only paragraphs of text, so a long how-to needs another format.

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 BlogPost from '@/components/klarhimmel/blocks/blog-post';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <BlogPost props={{
          "category": "Guide",
          "title": "A calmer way to run a weekly review",
          "meta": "Mar 12, 2026 · 6 min read",
          "author": {
            "name": "Ida Lindqvist",
            "role": "Product designer, Northlight",
            "photo": {
              "src": "",
              "alt": "Portrait of Ida Lindqvist"
            }
          },
          "cover": {
            "src": "",
            "alt": "A notebook open on a desk beside a cup of coffee"
          },
          "body": "Most weekly reviews fail the same way: they grow. A ten minute check-in becomes an hour of status updates, and nobody remembers what was decided.\n\nWe keep ours to fifteen minutes and one page. Three questions, in this order: what moved, what is stuck, and what do we want to be true by next Friday.\n\nWrite the answers down before the meeting, not during it. The meeting is for deciding, not for reading aloud.\n\nWhen a review ends early, let it. The time you give back is the point."
        }} />
      </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
`category`	`string`	`'Guide'`	Text, up to 30 characters.
`title`	`string`	`'A calmer way to run a weekly review'`	Text, up to 140 characters.
`meta`	`string`	`'Mar 12, 2026 · 6 min read'`	Text, up to 80 characters.
`author`	`{ name, role, photo }`	`{…}`	Fields: name, role, photo.
`cover`	`Media`	`{…}`	See the type.
`body`	`string`	`'Most weekly reviews fail the same w…'`	Markdown prose: paragraphs separated by blank lines, ## section headings, ### subheadings, bullet lists, bold, code and links. Raw HTML stays text. Text, up to 4000 characters.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.