This tutorial will demonstrate how to use Atomic Layout in a React application. We are going to use Create React App, but you can integrate it with any other React setup to your liking.

Peer dependencies

Atomic Layout uses React for components rendering and Styled components to generate styles. Let's make sure these two packages are installed in our project:

You can skip this step if those packages are already installed in your application.


Install the latest version of Atomic Layout by running the following command in your project's root directory:

$ npm install atomic-layout