Review, page note · Klarhimmel UI

Install

npx shadcn add @klarhimmel/review-page-note

Usage

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import ReviewPageNote from '@/components/klarhimmel/blocks/review-page-note';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <ReviewPageNote props={{
          "eyebrow": "Page review",
          "pageName": "Om oss",
          "pageUrl": "/om-oss/",
          "sourceUrl": "https://exempel.example/om-oss/",
          "nowTitle": "Now",
          "nowText": "A long text about the history of the company, a team photo and, at the very bottom, three customer logos. No way to get in touch from the page.",
          "proposedTitle": "Proposed",
          "proposedText": "A short story, the team with roles, the references moved up and a contact button that follows the visitor down the page.",
          "replaces": "Replaces: Om oss, Referenser",
          "notesTitle": "Notes on this page",
          "typeWords": {
            "keep": "Keep",
            "change": "Change",
            "add": "Add",
            "remove": "Remove"
          },
          "notes": [
            {
              "type": "keep",
              "text": "The team photo and the short introduction by the founder."
            },
            {
              "type": "change",
              "text": "Shorten the history to one paragraph and move it under the team."
            },
            {
              "type": "add",
              "text": "Three customer cases with a number each, above the fold on mobile."
            },
            {
              "type": "remove",
              "text": "The full list of milestones since 1998: it is not what a new customer is looking for."
            }
          ],
          "screenshot": {
            "src": "",
            "alt": "Screenshot of the current about page, a long text with a team photo"
          },
          "screenshotCaption": "The page as it is today (captured 9 October 2026)."
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

$import Block from '@/components/klarhimmel/blocks/review-page-note';

Also called

review/page-note

About: One page of a site review: its name and address, the page as it is now beside what we propose and why, up to five notes marked keep, change, add or remove (said in words, with a shape), and an optional screenshot of the page now with a…
Category: A site review for a customer: the verdict with findings, and a note per page with what to keep, change, add or remove.

Notes

When to use it

One page of a site review: the page as it is now beside what we propose, with up to five marked notes and an optional screenshot. For the overall verdict of the whole review, put `review-summary` first.

Writing for it

- pageName is required (80 characters) and is the h2 of the block. Use the page's own name, and put the path in pageUrl (200 characters) and the crawled address in sourceUrl. - Keep nowText and proposedText to the 300 characters they allow. State what is there, then what changes and why, so the two cards can be read side by side. - Each note takes a type of keep, change, add or remove and a text of up to 240 characters. Start the text with the element, for example the pricing table, so the type word and the text read as one line.

Watch out for

The block is strict: if any prop fails validation it shows a notice that the review could not be shown, never sample text. Empty fields are hidden, and the screenshot caption only appears together with an image.

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 ReviewPageNote from '@/components/klarhimmel/blocks/review-page-note';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <ReviewPageNote props={{
          "eyebrow": "Page review",
          "pageName": "Om oss",
          "pageUrl": "/om-oss/",
          "sourceUrl": "https://exempel.example/om-oss/",
          "nowTitle": "Now",
          "nowText": "A long text about the history of the company, a team photo and, at the very bottom, three customer logos. No way to get…",
          "proposedTitle": "Proposed",
          "proposedText": "A short story, the team with roles, the references moved up and a contact button that follows the visitor down the page.",
          "replaces": "Replaces: Om oss, Referenser",
          "notesTitle": "Notes on this page",
          "typeWords": {
            "keep": "Keep",
            "change": "Change",
            "add": "Add",
            "remove": "Remove"
          },
          "notes": [
            {
              "type": "keep",
              "text": "The team photo and the short introduction by the founder."
            },
            {
              "type": "change",
              "text": "Shorten the history to one paragraph and move it under the team."
            }
          ],
          "screenshot": {
            "src": "",
            "alt": "Screenshot of the current about page, a long text with a team photo"
          },
          "screenshotCaption": "The page as it is today (captured 9 October 2026)."
        }} />
      </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`	`'Page review'`	Text, up to 60 characters.
`pageName`	`string`	`'Om oss'`	Text, up to 80 characters.
`pageUrl`	`string`	`'/om-oss/'`	Text, up to 200 characters.
`sourceUrl`	`string`	`'https://exempel.example/om-oss/'`	Text, up to 300 characters.
`nowTitle`	`string`	`'Now'`	Text, up to 40 characters.
`nowText`	`string`	`'A long text about the history of th…'`	Text, up to 300 characters.
`proposedTitle`	`string`	`'Proposed'`	Text, up to 40 characters.
`proposedText`	`string`	`'A short story, the team with roles,…'`	Text, up to 300 characters.
`replaces`	`string`	`'Replaces: Om oss, Referenser'`	Text, up to 160 characters.
`notesTitle`	`string`	`'Notes on this page'`	Text, up to 60 characters.
`typeWords`	`{ keep, change, add, remove }`	`{…}`	Fields: keep, change, add, remove.
`notes`	`{ type, text }[]`	`4 items`	List of up to 5. Each item: type ('keep' \| 'change' \| 'add' \| 'remove'), text.
`screenshot`	`Media`	`{…}`	See the type.
`screenshotCaption`	`string`	`'The page as it is today (captured 9…'`	Text, up to 160 characters.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.