As we build out scalable applications in React, we often face challenges in maintaining the growing complexity of component structures. that why the lib follows Atmoic design system.
The Atomic Design Pattern is a methodology for creating user interfaces (UI) that is based on the concept of "atoms," which are the smallest, indivisible elements of a UI. These atoms can then be combined to form molecules, which are small groups of atoms that function together as a unit. From there, molecules can be combined to form organisms, which are larger groups of molecules that function together to perform a specific task. Finally, organisms can be combined to form templates, which are complete UI layouts that can be used to build a user interface.
-
Atoms: These are the smallest, most basic UI elements, such as buttons, inputs, and text.
-
Molecules: These are groups of atoms that function together as a unit, such as a search bar (made up of an input and a button) or a navigation menu (made up of a list of links).
-
Organisms: These are larger groups of molecules that function together to perform a specific task, such as a header (made up of a logo and a navigation menu) or a footer (made up of a list of links and a copyright notice).
-
Templates: These are complete UI layouts that can be used to build a user interface, such as a homepage template (made up of a header, a main content area, and a footer).
-
Pages: The page level refers to the complete UI of a specific page on a website or application. It is made up of a combination of templates, organisms, molecules, and atoms.
Lib
- [x] Atoms
- [x] Molecules
- [x] Organisms
- [] Templates
- [] Pages