
Reflexjs is a styling library built for speed and excellent developer experience.

It allows you to style your components using [style props](/docs/theming/style-props) and constraints, based on the [System UI specifications](https://system-ui.com).

If you are already using Theme UI, Reflexjs has a _zero-runtime_ build size. It is a developer tool and never makes it into your
production build.

## Demo

<EmbedContainer>
  <iframe
    src="https://www.youtube.com/embed/x7DQYz0DCAk"
    frameBorder="0"
    allowFullScreen
  ></iframe>
</EmbedContainer>

## Installation

Reflexjs works with any React framework. Select your framework below to get started.

<div display="grid" col="1|2|3" my="8" gap="4" w="full">
  <LinkedCard
    href="/docs/installation/nextjs"
    icon="nextjs"
    title="Next.js"
    color="#111"
  />
  <LinkedCard
    href="/docs/installation/gatsby"
    icon="gatsby"
    title="Gatsby"
    color="#663399"
  />
  <LinkedCard
    href="/docs/installation/react"
    icon="react"
    title="React"
    color="#61DAFB"
  />
</div>

## Upgrade

If you're upgrading from Reflexjs 1.0, see the upgrade guide [here](/docs/upgrade).


Getting started

Demo

Installation

Upgrade