Hero, install command · Klarhimmel UI

Install

npx shadcn add @klarhimmel/hero-code

Usage

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import HeroCode from '@/components/klarhimmel/blocks/hero-code';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <HeroCode props={{
          "eyebrow": "Open source toolkit",
          "title": "A small toolkit for building calm interfaces",
          "description": "Typed components, sensible defaults and a design system you own. Add what you need with one command, and keep the source.",
          "command": "npx shadcn add @northlight/button",
          "primary": {
            "label": "Read the docs",
            "href": "#docs"
          },
          "secondary": {
            "label": "Browse components",
            "href": "#components"
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

$import Block from '@/components/klarhimmel/blocks/hero-code';

Also called

hero/install

Category: The first screen: what it is, who it is for, what to do next.

Notes

When to use it

A centred opener for developer tools, where the first thing the reader does is copy an install command. For a product with a screenshot to show, `hero-frame` or `hero-split` fit better.

Writing for it

- The command holds 120 characters and is shown in a copyable block, so write it as one runnable line without a prompt symbol. - Use primary for the docs and secondary for browsing examples. The secondary renders as a ghost link, so it will look quieter than the primary button. - The eyebrow (60) is a good place to state the licence or kind of project, such as open source toolkit.

Watch out for

The command sits at a fixed narrow width. A long line with flags or a full URL will scroll or wrap inside the block rather than widening it, so keep it near 40 characters.

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 HeroCode from '@/components/klarhimmel/blocks/hero-code';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <HeroCode props={{
          "eyebrow": "Open source toolkit",
          "title": "A small toolkit for building calm interfaces",
          "description": "Typed components, sensible defaults and a design system you own. Add what you need with one command, and keep the source.",
          "command": "npx shadcn add @northlight/button",
          "primary": {
            "label": "Read the docs",
            "href": "#docs"
          },
          "secondary": {
            "label": "Browse components",
            "href": "#components"
          }
        }} />
      </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`	`'Open source toolkit'`	Text, up to 60 characters.
`title`	`string`	`'A small toolkit for building calm i…'`	Text, up to 120 characters.
`description`	`string`	`'Typed components, sensible defaults…'`	Text, up to 300 characters.
`command`	`string`	`'npx shadcn add @northlight/button'`	Text, up to 120 characters.
`primary`	`Link`	`{…}`	See the type.
`secondary`	`Link`	`{…}`	See the type.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.