Naming

CrownUI borrows its names from vocabularies you already know. Views are SwiftUI nouns, style methods are Tailwind classes, event listeners are DOM events, and test actions are Testing Library verbs. If you know the web name, this page gives you the CrownUI name.

button("Save")
    .px(16.0)
    .py(8.0)
    .rounded(8.0)
    .bg(rgb(0x2563eb))
    .hover(|style| style.opacity(0.9))
    .on_click(|cx, event| save(cx, event.modifiers.shift_key))

That snippet reads as px-4 py-2 rounded-lg bg-blue-600 hover:opacity-90 plus onclick. Tailwind's spacing scale is gone. Every style method takes a literal value in logical pixels, so .p(16.0) is p-4.

Views#

Tailwind class to style method#

Every method lives on the Styled trait, so it works on every element. Values are logical pixels unless the row says otherwise.

A few rows need a note.

• .pointer_events_none() and .pointer_events_auto() on a layer surface's root also decide the surface's input region. The boxes that opt in receive input. Everything else passes through to the window below.
• .material(..) asks the compositor to draw the glass. It takes a bound value, so you can fade it.
• cx.request_animation_frame steps motion on the UI thread. Use it only for motion that .transition(..) cannot express, such as a physics simulation or a value that drives layout.
• Variants take paint, composite and text properties. A layout property inside a variant is ignored with CUI0201. See Errors.

DOM event to listener#

Every listener lives on the Listeners trait. A handler receives (&mut Cx, &mut Event<T>).

event.stop_propagation() and event.prevent_default() work as they do on the web. Events bubble from the target to the root.

CrownOS adds a few window events with no DOM equivalent. They serve launchers and docks.

Accessibility attribute to modifier#

These live on the Semantic trait. See Semantic.

Testing Library query and action#

crowntest, the MCP ui_act tool and the screen reader bridge share one set of names.

Web media to audio#

These need the audio cargo feature. See Audio.

Why borrowed names, and what they cost#

A name you already know needs no lookup. Someone who writes Tailwind reads .items_center().justify_between() without opening a manual. Someone who writes React reads .on_click and event.stop_propagation() the same way. AI agents gain the same way. They learned Tailwind, the DOM and Testing Library from public code, so they guess CrownUI's names right without a manual.

The rule is one obvious name per thing. When a concept has a web name, CrownUI uses it, adapted to Rust: snake_case and no hyphens. When it has none, as with compositor glass or app icons, CrownUI picks a plain descriptive name and adds a row here.

The cost is that the borrowed names bring borrowed expectations, and a few of them do not hold.

• Tailwind's spacing scale is gone. .p(16.0) is 16 logical pixels, not 16 steps. Literal values keep the code exact and make the type f32, so a bound value like .p(bind(..)) works the same way.
• hidden follows SwiftUI, not Tailwind. .hidden(true) keeps the space, like Tailwind's invisible. Use .display_none() for Tailwind's hidden.
• Some Tailwind utilities have no method yet. Add one with the recipe in AGENTS.md, then add its row to this page in the same change.
• Variants are closures, not prefixes, so hover:bg-blue-700 becomes .hover(|style| style.bg(..)). That costs a few characters, and in return the compiler checks every property inside the variant.