hzero

A themed React component layer. Opinionated about looks, comfortable to build against.

The test for whether something belongs here: would a second project want it? isOpen/onClose — yes. size="medium" — yes. A status called "checked out" meaning danger — no, that is one app's world and it stays in that app.

Install

npm install hzero

import "hzero/styles.css"
import { Button, Card, Select } from "hzero"

That one stylesheet is everything — an app that doesn't use Tailwind needs nothing else. Components are hz-* CSS. Preflight is deliberately excluded; a component library has no business resetting its host's base styles.

If your app also uses Tailwind, add this

@import "tailwindcss";
@source "../node_modules/hzero/dist/*.js";

Not for the classes — they already ship — but for ordering. Tailwind only guarantees that md: and lg: variants sort after their unprefixed counterparts within one compilation. Across two, that breaks: StatCards renders grid-cols-2 lg:grid-cols-7, and if your app generates grid-cols-2 too, yours wins from the higher layer and the grid never leaves two columns.

Scanning dist puts both classes in your compilation, where Tailwind orders them correctly. Note it is dist, not src — only dist is published, and the class strings survive in the bundled JS. A @source pointing at src matches nothing and fails silently.

React 18+ is a peer dependency. If you link hzero from a checkout rather than the registry, add resolve.dedupe: ["react", "react-dom"] to your Vite config — a symlinked package resolves its own React copy and every hook throws Invalid hook call.

The site

npm run dev

• Home — install, the npm package, and why the layer exists
• Components — every export, live, with a light/dark split

Each sample is isolated, so one broken component reports its error instead of taking the page down. npm run site:build writes the static site to site-dist/.

Scripts

| | | | --- | --- | | npm run dev | the package site | | npm run site:build | static site — site-dist/ | | npm run site:test | mount every site page | | npm run build | library — dist/index.js, dist/styles.css |

build:css concatenates the theme ahead of the component sheets, so dist/styles.css is standalone. It is a build artifact, never edited by hand.