Introduction

Harmo is a CSS-first UI library for dashboards and applications. Every component is a native HTML element with one class, styled by plain CSS and themed with custom properties.

Use it as HTML and CSS, through its React components, or by copying the source into your project and making it yours. Its name comes from the Greek idea of fitting things together: small, useful pieces that compose into more capable interfaces.

Composable building blocks

Each component has one clear job, and they fit together without knowing your product: Popup and Listbox make a Select, and Field arranges any control's label, description, and error.

Native first

Harmo uses real <button>, <input>, and <a> elements, with their native attributes, keyboard behavior, and semantics preserved. The browser does the work it already knows how to do, instead of a script imitating it.

One markup for HTML and React

The React components render exactly the HTML in the docs, which a test checks, and handle the behavior for you. Without React, the same markup and CSS work, with a small script for the components that have behavior.

Themeable without fighting CSS

A palette plus semantic roles, exposed as --harmo-* custom properties, with low-specificity selectors so your overrides win. See Theming.

Polished by default

Considered spacing, focus states, and motion, with reduced-motion alternatives.

Ready for agents

llms.txt indexes the docs and the rules for using them, for AI agents writing Harmo.