Klarhimmel UI

Registry

Every block, component and the design skill is an item in the @klarhimmel namespace.

Steps

  1. Add the namespace

    Once per project.

    "registries": { "@klarhimmel": "https://ui.klarhimmel.com/r/{name}.json" }
  2. Add an item

    Dependencies come along: the components a block uses, the theme, the npm packages.

    npx shadcn add @klarhimmel/pricing-tiers

How items are laid out

Files keep the library's own layout under components/klarhimmel/, so their imports work unchanged.

Blocks

blocks/<type>/index.tsx and spec.ts. The spec holds the props schema and realistic default copy.

Components

ui/<name>.tsx. Plain React and Tailwind, Radix where behaviour is hard.

Shared

theme, editing, block-kit and utils come with the first block you add.