Skip to content
GolemUI

Going Headless

GolemUI’s headless mode gives you full control over the look and feel of every widget. The widget engine — accessibility, focus management, validation, state, events — keeps working without any styles.

To enter headless mode, simply don’t import @golemui/gui-components/index.css. Widgets render unstyled but functional.

Creating a theme from scratch

Section titled “Creating a theme from scratch”

Each widget exposes a small, predictable HTML structure with stable class names. Style them directly with regular CSS — no piercing or shadow-DOM tricks needed.

.gui-form { /* form-level layout */ }
.gui-widget { /* every widget wrapper */ }
.gui-widget--horizontal { /* horizontally-aligned widgets */ }
.gui-button { /* every button */ }
.gui-textinput { /* every text input */ }
.gui-dropdown { /* every dropdown */ }
.gui-repeater__card { /* each repeater card */ }

For the full list of class names, see the anatomy block on each widget reference page — the per-widget HTML markup is shown verbatim.

Widget anatomy

Section titled “Widget anatomy”

Every widget reference page (e.g. Textinput, Dropdown) ends with an Anatomy section that shows the rendered HTML. Use these as the contract you style against.

See also

Section titled “See also”