Build interfaces
with intention
A CSS-first UI library with design tokens, layered architecture, and optional React & Astro components. No build step required.
npm install @mrmartineau/zuiLive components
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 and Astro 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.
Copy source into your project
Want full control? Run npx @mrmartineau/zui init to copy all components, CSS, and tokens directly into your project — no package dependency required.
AI-ready
Ships an agent skill for Claude Code, Cursor, and other AI assistants. The model learns ZUI's class names, tokens, and conventions — no hallucinated classes.
Install the skillQuick start
Install
npm install @mrmartineau/zuiImport
@import '@mrmartineau/zui/css';Use
<button class="zui-button">Click me</button>