Atomic Layout
  • Introduction
  • Motivation
  • Resources
  • FAQ
    • Comparison with styled-system
  • Getting started
    • Installation
    • First composition
    • Responsive composition
    • Nested composition
  • Fundamentals
    • Breakpoints
    • Prop aliases
    • Responsive props
  • API
    • Layout
      • configure()
    • Components
      • Box
      • Composition
      • Only
      • Visible
    • Hooks
      • useMediaQuery
      • useResponsiveQuery
      • useViewportChange
      • useBreakpointChange
      • useResponsiveValue
      • useResponsiveProps
    • Utilities
      • query
      • makeResponsive
  • Recipes
    • Semantics
    • Namespaces
    • Iterative areas
    • Responsive layout
    • Explicit media query
Powered by GitBook
On this page
  • Peer dependencies
  • Install
  1. Getting started

Installation

PreviousComparison with styled-systemNextFirst composition

Last updated 5 years ago

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

Peer dependencies

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

$ npm install react@16.8.x styled-components@4.x

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:

$ npm install atomic-layout
Create React App
Styled components