busy-office-ui

CSS-first UI framework for ERP and back-office applications. Semantic components — not utility soup — built on modern CSS: @layer cascade contract, :has(), named container queries, native <dialog> and popover. 98 kB minified (16.0 kB gzipped) for the whole framework; tree-shakable per-component files if you want less.

Above: /patterns/list-report at data-density="compact". Hand-made — it is a screenshot, not a generated artifact, and it is the one image in this README that no gate keeps current.

npm i @busy-office/ui

// all-in-one
import "@busy-office/ui/css";

// or à la carte — order matters: tokens, then reset, then components
import "@busy-office/ui/css/tokens";
import "@busy-office/ui/css/reset";
import "@busy-office/ui/css/components/data-table";

// optional call-once JS behaviors (delegation — swap-proof, no re-init)
import { initDialogs, initDataTables } from "@busy-office/ui/js";
initDialogs(); initDataTables();

Why

• Density is a first-class dimension. data-density="compact|comfortable|spacious" on <html> or any wrapper remaps a token tier — 30/40/48px rows, cascading, overridable per-region. ERP users live in dense grids.
• Semantic HTML + one class. .bo-data-table, .bo-form-field, .bo-timeline. State via ARIA (aria-invalid, aria-sort, aria-current) and data-* — styled directly, no invented state classes.
• The cascade is the API. All framework CSS lives in @layer; anything you write unlayered wins. Re-brand by remapping the semantic token tier only.
• CSS-only visuals, honest semantics. :has() drives error states and bulk-action reveals with zero JS — and every such pattern documents its mandatory programmatic counterpart. Never-color-alone, for both colorblind users and screen readers.
• HTMX-ready, not HTMX-coupled. An opt-in stylesheet styles HTMX's own lifecycle classes; core never references it.

What's in the box

Tokens (light/dark, 3 densities) · layout primitives · buttons · badges · forms (fields, sections, inline edit) · dense data tables (selection, sticky header/column, pagination, filters, saved views) · tabs · dropdowns (popover) · alerts/toasts · navigation (sidebar, off-canvas) · dialogs · dashboards (widget grid, stat tiles) · approval timelines · audit trails · wizard stepper · print/report layer.

Browser floor: Chrome/Edge 119 · Firefox 129 · Safari 17.5.

What it is not

Deliberately not shipped, each with its reasoning recorded on the scope page — a "not in scope" list says the gap was decided, not forgotten:

When something doesn't work

Failure modes here are unusually silent — modern CSS degrades by doing nothing rather than by erroring. Troubleshooting is symptom → cause: 11 symptom→cause entries, plus “My markup looks right but nothing happens” and “Using with Tailwind or an existing reset”.

Docs

Live site: https://busy-office.github.io/busy-office-ui/ — component gallery with live demos, canonical markup for every component, a theming guide, and composed ERP patterns (dense invoice list, approval workflow, goods receipt). Local: npm install && npm run docs:dev.

Design reviews

Every slice was reviewed by an adversarial multi-seat panel before sign-off — findings, gates, and fix outcomes are in .roundtable/. Two rules that came out of it are build-enforced: every @container query is named, and every state signal ships both a visible non-color cue and a programmatic channel.

The build runs 59 build gates, 25 of them heuristic detectors that each ship a --self-test. A heuristic gate is one whose verdict rests on recognising something, so it can be fooled — each of those must prove it can fail before it is trusted.

Project docs

DESIGN.md — architecture and contracts · ROADMAP.md — the living slice backlog · CHANGELOG.md — including pre-1.0 breaking changes.

Apache-2.0 — see LICENSE. Third-party notices, including the Tailwind palette the colour scales seed from, are in packages/core/NOTICE.