Utility Props

Utility props are provided as aliases for most components. The style is heavily influenced by Tailwind CSS "utility classes".

They also provide preset "contraints" designed to control the CSS you write and avoid "hard coding" all CSS values.

For example, this library uses Styled System's "spacing" utility, which allows you to use constraints in a range to define margin and padding.

Padding 1Padding 3Padding 5
<Box>
  <Button p={1}>Padding 1</Button>
  <Button p={3}>Padding 3</Button>
  <Button p={5}>Padding 5</Button>
</Box>
<Box>
  <Button p={1}>Padding 1</Button>
  <Button p={3}>Padding 3</Button>
  <Button p={5}>Padding 5</Button>
</Box>

They also allow you to use the shorthand methods from Styled System

For example:

SaveSave
<>
  {/* enter a custom pixel value */}
  <Button fontSize="12px">Save</Button>
  {/* or enter the value named "sm" in the theme, which is .875rem by default */}
  {/* `ml` translates to 'margin-left' using styled-system's shorthand properties */}
  <Button fontSize="lg" ml="10px">
    Save
  </Button>
</>
<>
  {/* enter a custom pixel value */}
  <Button fontSize="12px">Save</Button>
  {/* or enter the value named "sm" in the theme, which is .875rem by default */}
  {/* `ml` translates to 'margin-left' using styled-system's shorthand properties */}
  <Button fontSize="lg" ml="10px">
    Save
  </Button>
</>

Component Example#

Here's the "Card" example by Tailwind recreated using this API:

The Coldest Sunset
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
#photography
#travel
#winter
<Flex
  flexDirection="column"
  boxShadow="lg"
  borderRadius="md"
  maxWidth="24rem"
  overflow="hidden"
>
  <Image
    w="100%"
    height="auto"
    src="https://tailwindcss.com/img/card-top.jpg"
    alt="Sunset in the mountains"
  />
  <Flex flexDirection="column" px={6} py={4}>
    <Text fontWeight="bold" fontSize="xl" mb={2} color="gray.700">
      The Coldest Sunset
    </Text>
    <Text color="gray.700" lineHeight="normal">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
      quia, nulla! Maiores et perferendis eaque, exercitationem praesentium
      nihil.
    </Text>
  </Flex>
  <Flex px={6} py={4}>
    <Block
      color="gray.700"
      bg="gray.200"
      borderRadius="full"
      px={3}
      py={1}
      mr={2}
    >
      #photography
    </Block>
    <Block
      color="gray.700"
      bg="gray.200"
      borderRadius="full"
      px={3}
      py={1}
      mr={2}
    >
      #travel
    </Block>
    <Block color="gray.700" bg="gray.200" borderRadius="full" px={3} py={1}>
      #winter
    </Block>
  </Flex>
</Flex>
<Flex
  flexDirection="column"
  boxShadow="lg"
  borderRadius="md"
  maxWidth="24rem"
  overflow="hidden"
>
  <Image
    w="100%"
    height="auto"
    src="https://tailwindcss.com/img/card-top.jpg"
    alt="Sunset in the mountains"
  />
  <Flex flexDirection="column" px={6} py={4}>
    <Text fontWeight="bold" fontSize="xl" mb={2} color="gray.700">
      The Coldest Sunset
    </Text>
    <Text color="gray.700" lineHeight="normal">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
      quia, nulla! Maiores et perferendis eaque, exercitationem praesentium
      nihil.
    </Text>
  </Flex>
  <Flex px={6} py={4}>
    <Block
      color="gray.700"
      bg="gray.200"
      borderRadius="full"
      px={3}
      py={1}
      mr={2}
    >
      #photography
    </Block>
    <Block
      color="gray.700"
      bg="gray.200"
      borderRadius="full"
      px={3}
      py={1}
      mr={2}
    >
      #travel
    </Block>
    <Block color="gray.700" bg="gray.200" borderRadius="full" px={3} py={1}>
      #winter
    </Block>
  </Flex>
</Flex>

Extracting Components#

Once you've settled on your styles, you can then easily extract components into your own custom components without sacrificing control:

High Priority
Customized tag
// make sure to pass children and "forward" all props to your component
const CustomTag = ({ children, ...props }) => (
  <Block
    color="gray.700"
    bg="gray.200"
    borderRadius="full"
    px={3}
    py={1}
    {...props}
  >
    {children}
  </Block>
);

render(
  <Flex>
    <CustomTag>High Priority</CustomTag>
    {/* by passing props down we can still style our custom component */}
    <CustomTag bg="indigo.600" color="#fff" ml={2}>
      Customized tag
    </CustomTag>
  </Flex>
);
// make sure to pass children and "forward" all props to your component
const CustomTag = ({ children, ...props }) => (
  <Block
    color="gray.700"
    bg="gray.200"
    borderRadius="full"
    px={3}
    py={1}
    {...props}
  >
    {children}
  </Block>
);
render(
  <Flex>
    <CustomTag>High Priority</CustomTag>
    {/* by passing props down we can still style our custom component */}
    <CustomTag bg="indigo.600" color="#fff" ml={2}>
      Customized tag
    </CustomTag>
  </Flex>
);