ZUI

A CSS-first UI library with optional React, Astro, Solid, Svelte, and Vue components.

Posted:
#css#typescript#astro#react#vue#svelte#solid
Live site Repo CSS, TypeScript

I’ve wanted my own UI lib for side-projects for ages. Tailwind is the go-to but it never really clicked for me. ZUI hits the sweet spot - just enough to accelerate development without getting in the way, and trivially easy to override when you need to.

  • No build step required
  • Design tokens (colour, spacing, type, shadows)
  • React, Astro, Vue and Solid component wrappers for every component
  • Native light-dark() theming
  • Agent skill for Claude Code & Cursor
Project README

ZUI

A CSS-first UI library with optional React, Astro, Solid, Svelte, and Vue components.

Full documentation: zui.zander.wtf

Install

npm install @mrmartineau/zui

Quick start

CSS only

@import '@mrmartineau/zui/css';

Or minified:

@import '@mrmartineau/zui/css/min';

React

import { Button } from '@mrmartineau/zui/react'

export function App() {
  return <Button>Click me</Button>
}

Astro

---
import { Button } from '@mrmartineau/zui/astro'
---

<Button>Click me</Button>

Solid

import { Button } from '@mrmartineau/zui/solid'

export function App() {
  return <Button>Click me</Button>
}

Svelte

<script>
  import { Button } from '@mrmartineau/zui/svelte'
</script>

<Button>Click me</Button>

Vue

<template>
  <Button>Click me</Button>
</template>

<script setup>
import { Button } from '@mrmartineau/zui/vue'
</script>

Customisation

Override semantic tokens in your CSS to retheme the library:

:root {
  --color-theme: light-dark(var(--color-violet-600), var(--color-violet-400));
  --color-background: light-dark(var(--color-slate-50), var(--color-slate-950));
  --color-text: light-dark(var(--color-slate-900), var(--color-slate-100));
}

See zui.zander.wtf for the full token reference, component docs, and live examples.

Releasing

This package uses semantic-release to automate versioning and publishing based on Conventional Commits.

Commit message format

When a release is run, semantic-release inspects the commit history since the last release to determine the next version:

Prefix Release type
fix: Patch (1.0.x)
feat: Minor (1.x.0)
feat!: or BREAKING CHANGE: Major (x.0.0)

CI / automated releases

Releases are triggered manually via the "NPM Release" workflow in GitHub Actions (.github/workflows/release.yml). The workflow:

  1. Installs dependencies
  2. Builds the CSS bundle and component wrappers (pnpm run build)
  3. Runs semantic-release, which determines the next version from commit history, updates CHANGELOG.md, publishes to npm, and creates a GitHub release

The workflow requires an NPM_TOKEN secret set in the repository settings. GITHUB_TOKEN is provided automatically by GitHub Actions.

Package exports

Specifier Resolves to
@mrmartineau/zui/css packages/zui/dist/css/zui.css
@mrmartineau/zui/css/min packages/zui/dist/css/zui.min.css
@mrmartineau/zui/react packages/zui/dist/react/index.mjs
@mrmartineau/zui/solid packages/zui/dist/solid/index.mjs
@mrmartineau/zui/svelte packages/zui/src/svelte/index.ts
@mrmartineau/zui/svelte/* packages/zui/src/svelte/*
@mrmartineau/zui/vue packages/zui/src/vue/index.ts
@mrmartineau/zui/vue/* packages/zui/src/vue/*
@mrmartineau/zui/astro packages/zui/src/astro/index.ts
@mrmartineau/zui/astro/* packages/zui/src/astro/*
@mrmartineau/zui/utils packages/zui/dist/utils/index.mjs