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

Full documentation: zui.zander.wtf

npm install @mrmartineau/zui

@import '@mrmartineau/zui/css';

Or minified:

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

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

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

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

<Button>Click me</Button>

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

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

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

<Button>Click me</Button>

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

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

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.

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

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

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.