Klarhimmel UI
Klarhimmel ↗

Installation

Add Klarhimmel UI to a React 19 project that uses Tailwind CSS v4. Takes about two minutes.

Steps

  1. Initialise shadcn

    Skip this if your project already has a components.json.

    npx shadcn@latest init

  2. Add the namespace

    Tell the CLI where Klarhimmel items live. This address is where the registry will be served once the directory is public; until then, serve your own build (see the note after the steps).

    // components.json
"registries": {
  "@klarhimmel": "https://ui.klarhimmel.com/r/{name}.json"
}

  3. Add a block

    Files land in components/klarhimmel/, with everything the block needs. They are yours now.

    npx shadcn add @klarhimmel/hero-split

  4. Import the tokens

    In your main CSS file, after Tailwind. The tokens are scoped to .kh-root and never reset your own theme.

    @import 'tailwindcss';
@import './components/klarhimmel/theme/theme.css';

  5. Render it

    Wrap the page in Theme once. Each block sits on a BlockSurface and takes one props object.

    import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import Hero, { spec } from '@/components/klarhimmel/blocks/hero-split';

<Theme theme="brand">
  <BlockSurface><Hero props={spec.defaults} /></BlockSurface>
</Theme>

  6. Check a page before you ship

    A real page keeps your text, even over a limit, and never shows sample copy. checkSections lists what would draw wrong: over-limit or missing text, a prop the block ignores. Fail your build on it. Exported by @klarhimmel/ui.

    import { checkSections } from '@klarhimmel/ui/blocks/schemas';

const problems = checkSections(page.sections);
if (problems.length) throw new Error(problems.map((p) => `${p.section} ${p.type} ${p.path}: ${p.problem}`).join('\n'));

Until the registry is public

The registry is built from this repository; it is not served anywhere public yet.

Serve your own build

Run npm run site:build in the repository. It writes every item to dist-site/r/ and llms.txt beside it. Serve dist-site with any static server and use that address, ending in /r/{name}.json, as the @klarhimmel registry above.

Or copy the source

Every block and component is a plain file in the repository under src/. Copy the files and the theme item by hand; the registry only automates that.