A CSS-first UI library that's fully themeable and agent ready
Browse 22 accessible components, tune every token to match your brand, and ship with zero JS runtime — pick a starting point and go. Optional React, Astro, Solid, Svelte & Vue wrappers included.
npm install @mrmartineau/zui- 22Components
- 5Framework wrappers
- 0kBJS runtime
- 1Theme file
Explore
Pick a starting point
Everything in ZUI is built from the same three ingredients: components, a theme, and the tokens beneath them. Start wherever suits your project.
Components
22 accessible, themeable building blocks — from buttons and forms to dialogs, menus, and a full app shell.
Theming
Override one theme.css file and every component follows — colours, fonts, radii, and light/dark schemes.
Tokens
Colours, spacing, type scale, shadows, radii, easing, and z-index — all exposed as CSS custom properties.
Component library
Real components, rendered live
Nothing on this page is a screenshot. Every control below is the shipped CSS, running in your colour scheme — try the tabs.
Theming
One theme file, infinite looks
Every ZUI component reads from a small set of semantic custom properties. Override that :root block and the whole UI transforms—colours, typography, radius, and borders all follow. Same markup, five very different personalities — try one on this very site:
- AaButtonGolden HourWarm serif editorial
- AaButtonTerminalMono, dark, zero radius
- AaButtonBubblegumRound & playful
- AaButtonNordicCrisp & corporate
- AaButtonBrutalistHigh-contrast, square
AI tooling
Built for people — and their agents
Design systems are increasingly consumed by coding agents, not just humans. ZUI ships the tooling both need: a skill that teaches assistants the real class names and tokens, and a CLI that copies the source straight into your project.
Agent skill
Install the ZUI skill for Claude Code, Cursor, and other assistants. The model learns ZUI's classes, tokens, and conventions — no hallucinated class names.
npx skills add mrmartineau/zuiCopy the source
Want full control? Copy every component, token, and stylesheet directly into your project — no package dependency required.
npx @mrmartineau/zui initEditor tooling
The VS Code extension autocompletes ZUI class names and design tokens as you type, with hover docs for every custom property.
Principles
Why ZUI
CSS-first
Standard CSS with @layer for clean cascade control. Custom properties for full configurability. Import and go—no build step, no JS runtime.
Framework wrappers
Use plain CSS classes anywhere, or reach for typed React, Astro, Solid, Svelte, and Vue component wrappers that map props to the underlying class API.
Themeable in seconds
Override semantic colours, fonts, and border radii through one theme.css file. Supports light-dark() colour schemes natively.
Design tokens
A comprehensive token system—colours, spacing, type scale, shadows, radii, easing, z-index—all exposed as CSS custom properties.
Layered architecture
Base, component, and utility layers keep specificity predictable. Override anything without !important hacks.
Modern CSS
Built on oklch(), relative colour syntax, light-dark(), and container queries. Designed for how CSS works today.
Quick start
Up and running in three steps
Install
npm install @mrmartineau/zuiImport
@import '@mrmartineau/zui/css';Use
<button class="zui-button">Click me</button>