Installation

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>

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));
  /* ... */
}