Other UI Libraries

ZUI ships first-party wrappers for React, Astro, Solid, Svelte, and Vue. For other frameworks, use the CSS classes directly.

Install ZUI and import the stylesheet however your framework handles CSS

CSS class reference

All ZUI components use BEM-style classes prefixed with zui-. Apply them directly in any template language.

Button

Badge

Card

Form elements

Table

Dialog

Tooltip

Accordion

Collapsible

Popover

Framework examples

Plain HTML

<button class="zui-button zui-button-variant-fill zui-button-color-theme">
  Save
</button>

<span class="zui-badge zui-badge-color-green">Active</span>

<div class="zui-card">
  <div class="zui-card-header">
    <h2 class="zui-card-title">Card title</h2>
    <p class="zui-card-description">Card description</p>
  </div>
  <div class="zui-card-body">
    <label class="zui-label" for="email">Email</label>
    <input class="zui-input" id="email" type="email" />
    <button class="zui-button zui-button-variant-outline">Submit</button>
  </div>
</div>

Utility classes

ZUI ships utility classes you can use in any framework. Note that spacing, flex, flow, and prose utilities do not use the zui- prefix.

Spacing

<!-- Margin -->
<div class="mt-md mx-lg">...</div>

<!-- Padding -->
<div class="px-lg py-sm">...</div>

<!-- Gap (for flex/grid) -->
<div class="flex flex-row gap-md">...</div>

Flex

<div class="flex flex-row gap-md items-center">...</div>
<div class="flex flex-column gap-sm">...</div>
<div class="inline-flex items-center gap-xs">...</div>

Layout

<!-- Flow (vertical rhythm) -->
<div class="flow">...</div>

<!-- Prose (long-form content) -->
<div class="prose">...</div>

Typography

<!-- Font size scale -->
<p class="zui-text-sm">Small text</p>
<p class="zui-text-base">Base text</p>
<p class="zui-text-1">Larger text</p>

<!-- Muted text -->
<p class="zui-color-muted">Secondary text</p>
<p class="zui-color-faint">Faint text</p>

<!-- Link styling -->
<a href="#" class="zui-link">Styled link</a>

<!-- Code -->
<code class="zui-code">inline code</code>
<pre class="zui-pre"><code>block code</code></pre>

Accessibility

<!-- Visually hidden (screen reader only) -->
<span class="sr-only">Screen reader label</span>

Building wrapper components

You can create thin wrapper components in any framework using the CSS classes. Here's a generic example using a hypothetical template language:

<!-- Button.template -->
<button class="zui-button zui-button-variant-{variant} zui-button-color-{color}">
  {label}
</button>

Tip: ZUI already ships first-party wrappers for React, Astro, Solid, Svelte, and Vue.

CSS Layers

ZUI uses CSS @layer to organize styles. Your unlayered styles will always take precedence, making overrides straightforward in any framework:

/* Your framework's styles — always wins over ZUI layers */
.my-custom-button {
  background-color: hotpink;
}

Theming

Theming is framework-agnostic — just override CSS custom properties. See the Theming page for full details.

:root {
  --color-theme: light-dark(var(--color-violet-600), var(--color-violet-400));
  --radius-scale: 1.5;
}