Introduction
Gloss UI organizes components into a layered architecture where each tier builds on the one below it. This separation keeps the API surface small for consumers while giving maintainers full control over styling and behavior.
The four-tier model
Components flow from hidden infrastructure to developer-facing APIs to full-page layouts.
1
Base Primitives
Low-level building blocks with definition-driven styling. Not used directly by app code.
BaseInput, BaseLabel, BaseOverlay2
Preset Primitives
Locked-down, semantic components built on Base primitives via the createPreset factory.
PresetInput, PresetSelect, PresetMenu3
Composites
Data-driven components that combine multiple presets into a cohesive unit.
SearchInput, PasswordInput, AddressSelect4
Compositions
Layout orchestrators that arrange composites and presets into full UI sections.
LoginForm, CreditCardForm, DestructiveModalExplore
ArchitectureDeep dive into the tier system introduced in v2.0, the UI.* namespace facade, and the build pipeline.Component PatternsDiscriminated unions, controlled components, render props, slots, and BEM conventions.Best PracticesDO and DON'T guidelines for consumption, state management, and directory structure.GlossaryDefinitions for Definition object, Variant Recipe, Preset, Composite, Composition, and more.