Overview

Usage approaches

Plain CSS classes

Every component is usable with any HTML element by applying the right class names. This works in any framework or with no framework at all.

<button class="zui-button zui-button-variant-outline">Click me</button>

React

React wrappers accept typed props instead of class strings. Import from @mrmartineau/zui/react.

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

<Button variant="outline">Click me</Button>

Astro

Astro wrappers work the same way. Import from @mrmartineau/zui/astro.

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

<Button variant="outline">Click me</Button>

Solid

Solid wrappers use class instead of className. Import from @mrmartineau/zui/solid.

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

<Button variant="outline">Click me</Button>

Svelte

Svelte wrappers are Svelte 5 SFCs that use runes and snippets. Import from @mrmartineau/zui/svelte.

<script lang="ts">
  import { Button } from '@mrmartineau/zui/svelte'
</script>

<Button variant="outline">Click me</Button>

Vue

Vue wrappers are SFC components. Import from @mrmartineau/zui/vue.

<template>
  <Button variant="outline">Click me</Button>
</template>

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

See Using with React, Using with Astro, Using with Solid, Using with Svelte, and Using with Vue for setup instructions.

CSS layer

Component styles live in the zui.components layer, below zui.utilities. This means utility classes always override component styles when both apply, without needing !important.

@layer zui.base, zui.components, zui.utilities;

CSS custom properties

Every component exposes CSS custom properties (variables) that control its appearance — colours, border radius, padding, shadow, and more. You can override these without touching the source CSS and without ejecting any styles.

Inline overrides

Pass overrides via the style attribute on the component's root element:

<div class="zui-card" style="--zui-card-radius: var(--radius-sm); --zui-card-padding: var(--space-lg);">
  …
</div>

CSS overrides

Target the component class in your own stylesheet. Because component styles live in zui.components, any rule outside a @layer already wins — no !important needed:

.zui-card {
  --zui-card-radius: var(--radius-sm);
  --zui-card-padding: var(--space-lg);
}

To scope an override to a specific context, nest it under a parent selector:

.my-sidebar .zui-button {
  --zui-btn-radius: 0;
}

See this live CodePen example showing three cards side by side: one with default styles, one customised via inline style attributes, and one themed via scoped CSS classes. Each component page lists its available custom properties and their defaults.

Components