Docs, page header · Klarhimmel UI

Install

npx shadcn add @klarhimmel/docs-header

Usage

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import DocsHeader from '@/components/klarhimmel/blocks/docs-header';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <DocsHeader props={{
          "breadcrumbs": [
            {
              "label": "Docs",
              "href": "#docs"
            },
            {
              "label": "Components",
              "href": "#components"
            },
            {
              "label": "Button",
              "href": "#button"
            }
          ],
          "status": "Stable",
          "title": "Button",
          "description": "Triggers an action or navigates. Comes in five variants and three sizes, with a 44 pixel touch target.",
          "command": "npx shadcn add @northlight/button"
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

$import Block from '@/components/klarhimmel/blocks/docs-header';

Also called

docs/header

Category: Documentation sections: headers, install panels, props tables, previews.

Notes

When to use it

Opens a documentation page with breadcrumbs, the title, a description and an optional install command and result preview. It is the only docs block that carries the page h1, so a page that already has one should not add a second.

Writing for it

- Breadcrumbs take 1 to 4 links; the last one is drawn as the current page and is not a link, so give it the page name, not a section. - The title holds 80 characters and the description 300. Describe what the thing does in one or two sentences, with the number or limit a reader most needs. - Use status (24 characters) for a state like Stable or Beta, and command (120 characters) for the one line a reader will copy.

Watch out for

The preview area appears only when a demo id or an image is set, and a demo id overrides the image. The command box and the status badge vanish when their fields are empty.

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 DocsHeader from '@/components/klarhimmel/blocks/docs-header';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <DocsHeader props={{
          "breadcrumbs": [
            {
              "label": "Docs",
              "href": "#docs"
            },
            {
              "label": "Components",
              "href": "#components"
            },
            {
              "label": "Button",
              "href": "#button"
            }
          ],
          "status": "Stable",
          "title": "Button",
          "description": "Triggers an action or navigates. Comes in five variants and three sizes, with a 44 pixel touch target.",
          "command": "npx shadcn add @northlight/button"
        }} />
      </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
`breadcrumbs`	`Link[]`	`3 items`	List of 1 to 4.
`status`	`string`	`'Stable'`	Text, up to 24 characters. Optional; empty is not rendered.
`title`	`string`	`'Button'`	Text, up to 80 characters.
`description`	`string`	`'Triggers an action or navigates. Co…'`	Text, up to 300 characters.
`command`	`string`	`'npx shadcn add @northlight/button'`	Text, up to 120 characters. Optional; empty is not rendered.
`demo`	`string`	`-`	Text, up to 64 characters. Optional; empty is not rendered.
`preview`	`Media`	`-`	Optional; empty is not rendered.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.