UI overview

The complete Zag catalogue lists all 51 integrations and distinguishes private-machine restoration from shared public-state restoration.

Fuzor UI ships inside the fuzor package. It combines accessible behavior, ordinary HTML and replaceable styling drivers. Its tags use the fuzor-* prefix. There is no separate UI package or React requirement.

These docs use that same UI: category tabs, a search dialog, a theme switch, mobile navigation, a page-outline popover and a GitHub tooltip. Their HTML is precompiled. Interactive behavior loads when you first use a component.

Two ways to use it

Register the Web Components in browser code for immediate activation:

import { defineAll } from "fuzor/ui";
defineAll();

Or mark components for deferred activation and start one page-owned runtime:

<fuzor-collapsible id="details" data-fuzor-ui="collapsible">
  <button type="button" data-part="trigger" aria-expanded="false">Details</button>
  <fuzor-collapsible-content data-part="content" hidden>Content</fuzor-collapsible-content>
</fuzor-collapsible>

import { resumeUi } from "fuzor/ui/resume";
const ui = resumeUi(document);
// Close this lifetime when your application unmounts.
ui.dispose();

Keep the returned runtime for the life of the page; the disposal line illustrates teardown. resumeUi loads and registers the official Web Component for the component you activate. It replays the first activation input and adopts existing DOM instead of rerendering it. A stable, unique id is required for every deferred root.

Fuzor's built-in docs mode starts this runtime automatically. Do not start another runtime over the same docs roots.

Hand-authored native HTML

The same behavior can enhance ordinary elements:

import { enhanceCollapsible } from "fuzor/ui/engine";
const behavior = enhanceCollapsible(document.querySelector<HTMLElement>("#details")!);
behavior.open();
// On teardown:
behavior.destroy();

Use data-part on native buttons, inputs and content containers. They retain browser semantics before JavaScript arrives. enhanceTabs, enhanceDialog, enhanceMenu, enhanceAccordion, enhanceCollapsible, enhanceSelect, enhanceSwitch, enhancePopover, enhanceTooltip and enhanceToolbar expose Fuzor-owned contracts; application code does not receive Zag machines.

Choose a component or integration

• Components and live examples: every shipped interactive component and the layout primitives.
• Styling drivers: custom CSS, shadcn, Bulma, DaisyUI and scoped themes.
• Restoration and server HTML: deferred loading, Effect Atom checkpoints and preserved DOM identity.

Zag supplies the interaction and accessibility machinery behind nine adapters. The toolbar uses Fuzor's native engine. Provide meaningful labels, use native controls where possible, and test keyboard navigation in the UI you compose.