Skip to main content

Introduction

Installation#

info

Pearl UI currently only supports React Native projects using Expo's managed workflow

Inside your React Native/Expo project directory, install Pearl UI by running either of the following:

npm install pearl-ui

Atoms and Molecules#

Pearl UI follows the Atomic Design methodology which defines the practice of creating design systems in a bottom-up fashion to maintain an explicit order and hierarchy. There are five distinct stages of the Atomic Design methodology, with the first three modelled after their equivalents in the Chemistry world. Each stage builds on the previous, acting as an aggregate of items from the preceding stages:

  1. Atoms - The smallest building blocks in the system, eg. buttons, icons, inputs, labels, and other small elements that get used throughout a design.

  2. Molecules - Atoms are combined in different ways to create unique molecules for use in a design, each with their own characteristics, style, and format.

  3. Organisms - The organism is not yet a complete design, but is a component that can be reused across designs, or layout templates.

  4. Templates - The template is the first stage of the Atomic Design methodology that does not align to a stage in the molecular world, but is important for Atomic Design. A template is where organisms and other elements are curated into a cohesive design.

  5. Pages - This is where instances of templates are created. As data changes, different profile information, or languages may impact a template design. Building out to the page stage allows you to test for these variations and make adaptations globally to your templates.

Atomic Design