How BaseUI works?

BaseUI library is built from atoms, components and composites.
It's using composites to create an easy to use lego block system that is used in Wix Editors.

If you are looking to learn where BaseUI is used, please see this article: Where BaseUI is used?



Foundations

Foundations are the core of the design system, for example Colors, Typography, Shadows and others, are the base to every part of base UI library.





Atoms

Atoms are the foundational building blocks that comprise our design system.
They include basic HTML elements like buttons, checkbox, toggle, radio buttons and others, that can’t be broken down any further without ceasing to be functional.

Example for 'Radio Button' atom in baseui.






Components

Components much like atoms are functional elements/groups of elements like: List items, Sliders Inputs, Navigations, and others, but unlike atoms they can be broken down into smaller parts.
Example for 'text input' component in baseui.





Composites

Composites are ready to use lego blocks, they are basic layouts of different atoms and components, wrapped in a container and without any additional functionality.

Composites helps us to build panels quickly and consistently across the editor. Whenever panel are build, they must build only from composites. In short, the composites are the BaseUI 'ready made product'.
Example for 'Opacity Slider' composite in baseui.