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.

Preview

Source

<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:

Preview

Source

<> {/* 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:

Preview

The Coldest Sunset

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.

#photography

#travel

#winter

Source

<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:

Preview

High Priority

Customized tag

Source

// 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>
)