Directory, header · Klarhimmel UI

Install

npx shadcn add @klarhimmel/directory-header

Usage

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <DirectoryHeader props={{
          "breadcrumbs": [],
          "eyebrow": "Catalogue",
          "title": "Components",
          "description": "Production-ready React components for Northlight. Browse by category, search by name, or sort to find what you need.",
          "search": {
            "placeholder": "Search by name"
          },
          "selects": [
            "All categories",
            "Sort: Newest"
          ],
          "chips": [
            "All",
            "Forms",
            "Navigation",
            "Feedback",
            "Data display",
            "Overlays"
          ],
          "active": "All"
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

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

Also called

directory/header

Category: Catalogue pages: headers with filters, card grids, full-width previews.

Notes

When to use it

Opens a catalogue page with a title, description and optional search field, select buttons and filter chips. It is presentation only; for the single item page use `directory-preview`.

Writing for it

- The title is the page h1 and holds 80 characters. The description holds 300 and should say what the catalogue contains and how to browse it. - Chips hold 30 characters, up to 12. Whichever chip text matches the active field exactly is drawn as selected, so copy the same string into both. - Search takes a placeholder of 60 characters, and up to 3 select labels of 40 characters each, such as Sort by.

Watch out for

The search field and selects do nothing on their own; the site has to wire them. Clearing the search placeholder removes the search field, and the active chip is a text match, not an index.

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <DirectoryHeader props={{
          "breadcrumbs": [],
          "eyebrow": "Catalogue",
          "title": "Components",
          "description": "Production-ready React components for Northlight. Browse by category, search by name, or sort to find what you need.",
          "search": {
            "placeholder": "Search by name"
          },
          "selects": [
            "All categories",
            "Sort: Newest"
          ],
          "chips": [
            "All",
            "Forms",
            "Navigation",
            "Feedback",
            "Data display",
            "Overlays"
          ],
          "active": "All"
        }} />
      </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[]`	`0 items`	List of up to 4.
`eyebrow`	`string`	`'Catalogue'`	Text, up to 60 characters.
`title`	`string`	`'Components'`	Text, up to 80 characters.
`description`	`string`	`'Production-ready React components f…'`	Text, up to 300 characters.
`search`	`{ placeholder }`	`{…}`	Fields: placeholder.
`selects`	`string[]`	`2 items`	List of up to 3.
`chips`	`string[]`	`6 items`	List of up to 12.
`active`	`string`	`'All'`	Text, up to 30 characters.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.