Zero dependencies
Plain ES2022 modules with no runtime package, bundler, or framework to maintain.
UI infrastructure for business software
Build ZeyOS screens that feel native
Thirty-plus accessible, themeable components in plain ES modules — no framework, no build step, no runtime dependencies.
Built for
Why Zx
A focused toolkit for dense ERP interfaces
Practical building blocks for high-volume workflows, designed to stay out of the application’s way and to survive a decade of business software.
Accessible by default
Keyboard-complete controls built to the WAI-ARIA Authoring Practices patterns.
Themeable tokens
Semantic light, dark, cozy, and compact design tokens throughout the whole set.
30+ components
Inputs, data views, forms, overlays, and complete application layout primitives.
Schema-driven
The zx-zeyos binding generates tables, forms, and pickers from a live ZeyOS schema.
Native platform
Built on dialog, popover, ElementInternals, and other modern browser APIs.
Live components
Real components, running right here
This showcase imports Zx directly from source. Filter, sort, pick a date, and fire a toast — then switch the theme in the header and watch every token follow.
Toggle
Filterable select
Datebox
Message
Sortable table
Quick start
Two lines from nothing to a working control
Import the modules in a modern application, or drop the global bundle into a classic ZeyOS screen. Both ship the same API.
ES module
<link rel="stylesheet" href="/assets/zx.css">
<script type="module">
import { Toggle } from '/assets/zx.esm.js';
const toggle = new Toggle(null, {
label: 'Notifications'
});
document.body.append(toggle.toElement());
</script>Global script
<link rel="stylesheet" href="/assets/zx.css">
<script src="/assets/zx.global.js"></script>
<script>
const toggle = new zx.Toggle(null, {
label: 'Notifications'
});
document.body.append(toggle.toElement());
</script>