Atomic Layout
Getting startedGitHub
Search…
Introduction
Motivation
Resources
FAQ
Getting started
Installation
First composition
Responsive composition
Nested composition
Fundamentals
Breakpoints
Prop aliases
Responsive props
API
Layout
Components
Hooks
Utilities
Recipes
Semantics
Namespaces
Iterative areas
Responsive layout
Explicit media query
Powered By GitBook
Installation
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:
1
$ npm install [email protected] [email protected]
Copied!
You can skip this step if those packages are already installed in your application.

Install

Install the latest version of Atomic Layout by running the following command in your project's root directory:
1
$ npm install atomic-layout
Copied!
Previous
Comparison with styled-system
Next - Getting started
First composition
Last modified 1yr ago
Copy link
Contents
Peer dependencies
Install