Mercury UI, the design system

Mercury UI is the design system's component library: the package @fiberfx/ui, version 4.0.0. Its components are written on Mercury Hyperscript, and they take their colours, type, spacing, radii and shadows from one sheet of tokens.

What Mercury UI is

The package holds 139 components, one folder each, under fiberfx/ui/src/components/<family>/<Name>/. Each folder keeps three things together:

• <Name>.tsx: the component, a function on @fiberfx/hyperscript. Its JSX compiles against Hyperscript's runtime, not any other.
• <Name>.prompt.md: its hand-written contract: what it is for, its props, its enum language, what it composes and what composes it, examples and notes. Each of the 139 components has one.
• index.ts: one line, export * from "./<Name>", which the package's barrel picks up.

@fiberfx/ui depends on two peers at the same version: @fiberfx/hyperscript, which renders it, and @fiberfx/core, which holds what has no markup of its own: cx, the date and locale formatters, focus management and the UI environment.

Importing it

Everything comes from one entry, @fiberfx/ui:

import { Button, Card } from "@fiberfx/ui";

export function SaveCard() {
  return (
    <Card variant="raised" title="Draft">
      <Button variant="primary">Save</Button>
    </Card>
  );
}

For published 4.0.0, load styles explicitly. In a native app, add import "@fiberfx/ui/styles.css"; in browser HTML, link the pinned stylesheet. The source entry src/index.ts imports CSS, but that is not a guarantee that importing the published JavaScript loads styling. The CSS subpaths are:

The ten families

Each name in the table is a folder, and the folder's exports are the component and its types. Some folders export more than one name: Sheet exports its facade and parts, and PreviewTrigger exports the Preview parts beside it.

Enum props and tokens

A component is styled through its enum props, never by its class names. Button takes variant (primary, secondary, outline, ghost, destructive, inverse) and size (sm, md, lg); Card takes variant (flat, raised, floating). Each value selects the component's own classes, and those classes read the semantic tokens, so every component follows the theme.

Those classes, mx-btn, mx-card and the rest, are private to the package: an application never writes them. Your own layout styles itself with the same tokens, as rgb(var(--token)). Chapter UI0 covers the sheet.

The chapters

What is shipped

The 139 components and their contracts are built inside @fiberfx/ui. Version 4.0.0 is on npm since 2026-11-05. Chapters UI0 to UI6 are written; UI7 is planned, and a planned chapter has no page yet.