Styled-Flex-Box

React primitive UI components built with styled-components and styled-system. Inspired by Rebass

Compatible with React and React-Native

npm i styled-system-flex-box

Set up your JSX layouts with <Flex /> , <Box /> , <Absolute /> , and <AbsoluteFlex /> components.

Try It Out

Try it out on CodeSandbox

Usage

import { Flex, Box } from 'styled-flex-box'
// Or for react-native use
// import { Flex, Box } from 'styled-flex-box/native'

function AwesomeComponent() {
  return (
    <Flex flexDirection="row" justifyContent="space-between" width="100%">
      <Box p="m">Thing One</Box>
      <Box p="m">Thing Two</Box>
    </Flex>
  );
}

With the <Box /> component you now have access to many common props as well as any props injected by your styled-components <ThemeProvider/>

Box

Space

Space

Box consumes styled-system's space helper

<Box />

<Box p="10px" />

<Box pt="10px" />

<Box pb="10px" />

<Box py="10px" />

<Box pl="10px" />

<Box pr="10px" />

<Box px="10px" />

<Box p="10px" m="10px" />

<Box p="10px" mt="10px/>

<Box p="10px" mb="10px" />

<Box py="10px" />

<Box pl="10px" />

<Box pr="10px" />

<Box px="10px" />

If the app is consuming a ThemeContext then the <Box /> component can also consume spacing via object-key shortcuts:

const theme = {
  space: {
    s: 4,
    m: 8,
    l: 16
  }
};

<ThemeProvider theme={theme}>
  <Box p="m">This has the same padding</Box>
  <Box p="8px">as this</Box>
</ThemeProvider>

TODO: Document all Box, Flex, Absolute, and AbsoluteFlex props

Related

• System UI
• Rebass
• styled-components

MIT License