Styling

Styling components using style props.

Styling components.

Styling components is done using style props and is as easy as using HTML attributes.

Add a background-color and color to a Button.

<Button bg="tomato" color="#fff">
  Button
</Button>

We have added support for every CSS properties such as fontSize, fontFamily, textDecoration, flexDirection and much more.

A hero

<Section py="20px" textAlign="center" color="#000" bg="#f7f7f7">
  <H1 my="0" color="#000">
    Hero Heading
  </H1>
  <P fontSize="20px">This is some text</P>
  <Button bg="#08f" color="#fff" borderWidth="0" hoverBg="#000">
    Get Started
  </Button>
</Section>

A hero

Hero Heading

This is some text

Components Theming