Component authoring

One canonical anatomy keeps the system predictable.

FG UI families use a root class, namespaced child elements, modifiers for variants and documented state or data contracts for runtime behaviour.

Built with FG UI itself.

This page is built entirely with FG UI using the same components, layout primitives, icons and interactions available in the kit. No Bootstrap, Tailwind or external UI framework is required.

Canonical anatomy

.fgui-card
.fgui-card__header
.fgui-card__body
.fgui-card--compact

Runtime state uses documented state, ARIA or data contracts rather than page-specific selector chains.

CSS-first vs JavaScript-enhanced

CSS-first components remain useful with CSS alone. JavaScript-enhanced components use documented data-fgui-* hooks and the canonical fgui.js runtime.

container.insertAdjacentHTML('beforeend', markup);
FGUI.init(container);
1

Use native HTML

Every interactive control should have the native element and an accessible name appropriate to its responsibility.

2

Compose first

Create a new family only when it introduces a genuinely new reusable responsibility or behaviour.

3

Fix the reusable source

Reusable defects belong in the FG UI source, not in one-off page patches that hide a Core problem.