DocsUtilities

Utilities

CSS-only behaviour shared by React, Vue, Angular, Svelte, and Solid.

Utilities

Frameworks

Import the adapter stylesheet once. The same utility classes and custom properties then work in every template.

@grassroot/ui-react/styles.css
@grassroot/ui-vue/styles.css
@grassroot/ui-angular/styles.css
@grassroot/ui-svelte/styles.css
@grassroot/ui-solid/styles.css

API at a glance

FamilyClassesFallback and owner rule

Scroll Fadescroll-fade[-x|-y|-t|-b|-l|-r|-s|-e|-none]Measured overflow cue; no mask in unsupported, reduced-motion, forced-colors, or print states. Horizontal writing modes only.

Shimmershimmer[-once|-reverse|-none]Current-color highlight; ordinary visible text when unsupported or motion is reduced.

Presencepresence + fade|rise|pop|nonePaint only. The state owner keeps focus, inert, ARIA, mounting, Escape, portals, and hidden.

Render Autorender-auto[-none]Opt-in content visibility for self-contained repeated content; exclude escaping overlays and synchronous off-screen measurement.

Text Fadetext-fade[-s|-e|-x|-none]Constrained inner block only. CSS cannot detect overflow, so near-fitting text may enter the fade zone.

Thin Scrollbarsscrollbar-thinVisible, tokenized native scrollbars; size and hover details are best-effort.

Growing Fieldsfield-grow[-none]Bounded logical sizing for text-like inputs and textareas; base Textarea remains unchanged.

Import a framework adapter's styles.css for the full bundle, or import ui-core's generated semantic.css after your own scoped utilities. Public variables include --scroll-fade-size, --presence-duration, --render-auto-block-size, --text-fade-size, --scrollbar-size, and the four --field-grow-* bounds.