ZUI — Get started

Install the package

npm install @mrmartineau/zui

CSS Import

Import the stylesheet in your CSS:

@import '@mrmartineau/zui/css';

Or the minified version:

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

Or link directly in HTML:

<link rel="stylesheet" href="node_modules/@mrmartineau/zui/dist/css/zui.css" />

Using with React

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

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

Using with Astro

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

<Button>Click me</Button>

Using with Solid

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

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

Using with Svelte

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

<Button>Click me</Button>

Using with Vue

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

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

Customisation

Edit src/css/theme.css to override semantic colour tokens and font settings:

:root {
  --color-theme: light-dark(var(--color-violet-600), var(--color-violet-400));
  --color-accent: light-dark(var(--color-slate-700), var(--color-slate-300));
  /* ... */
}

Guides

Theming

Customise ZUI's appearance by overriding the custom properties defined in theme.css.

AI Agent Skills

An AI agent skill giving coding assistants deep knowledge of ZUI's components, tokens, and conventions.

Colours

The full Tailwind colour palette exposed as CSS custom properties, plus semantic theme tokens.

Copy source into your project

Copy the entire ZUI source directly into your project for full ownership and customisation.

CSS Layers

ZUI uses @layer to organise styles into a predictable cascade, making overrides straightforward without specificity battles.

Dark Mode

ZUI uses light-dark() for all colour tokens, respecting prefers-color-scheme automatically. Override at runtime with the utils package.

Other UI Libraries

ZUI is CSS-first — use its classes directly with any framework that doesn't have a first-party wrapper.

Using with Astro

ZUI provides native Astro components that render at build time with zero client-side JavaScript.

Using with React

ZUI ships first-party React components with type-safe props and variant support out of the box.

Using with Solid

ZUI ships first-party Solid components with type-safe props and variant support out of the box.

Using with Svelte

ZUI ships first-party Svelte 5 components with typed props and variant support out of the box.

Using with Vue

ZUI ships first-party Vue 3 SFCs with typed props and variant support out of the box.

VS Code Extension

Autocomplete, documentation, and colour previews for ZUI classes and design tokens in VS Code.