Introduction
Klarhimmel UI is a set of components and patterns you copy into your project. You own the code, so you can change anything without waiting for a release.
Principles
Calm by default
Warm paper, near-black ink, one accent. Motion is colour changes only.
Accessible first
WCAG 2.2 AA checked with axe on every page, keyboard operable, 44 px targets.
Source you own
No package to upgrade. Every file lives in your repo.
Guides
- InstallationStart hereAdd Klarhimmel UI to a React 19 project that uses Tailwind CSS v4. Takes about two minutes.
- ThemingSeven colours, three fonts, a radius and a base size. Change them and every block follows.
- Dark modeLight, dark or the visitor's system setting, with no code per block.
- RegistryEvery block, component and the design skill is an item in the @klarhimmel namespace.
- Blocks and CanvasEvery block is data in, section out. That contract is what lets an editor drive it, and it is yours to use too.
- AI and agentsYour coding agent can read the whole kit: every page has a Markdown twin, every item a registry entry.
- Search and filter linksThe index pages take ?q=, ?cat= and ?sort= in the URL, so a filtered list is a link you can share or hand to an agent.
- ReportsTurn a Markdown or JSON report into one HTML page built from the report blocks, for anything a person is handed to read.
- AccessibilityWhat every block does for people using a keyboard, a screen reader, zoom or a small screen.
- ChangelogWhat changed in Klarhimmel UI, newest first.