Styled System CSS Props - A list of CSS native CSS properties that Styled System provides as part of their component styling API.

styled-system-css-props.js

const styledSystemCSSProps = {
  // Background
  background: true,
  backgroundImage: true,
  backgroundSize: true,
  backgroundPosition: true,
  backgroundRepeat: true,
  // Border
  border: true,
  borderBottom: true,
  borderBottomColor: true,
  borderBottomLeftRadius: true,
  borderBottomRightRadius: true,
  borderBottomStyle: true,
  borderBottomWidth: true,
  borderColor: true,
  borderLeft: true,
  borderLeftColor: true,
  borderLeftStyle: true,
  borderLeftWidth: true,
  borderRadius: true,
  borderRight: true,
  borderRightColor: true,
  borderRightStyle: true,
  borderRightWidth: true,
  borderSpacing: true,
  borderStyle: true,
  borderTop: true,
  borderTopColor: true,
  borderTopLeftRadius: true,
  borderTopRightRadius: true,
  borderTopStyle: true,
  borderTopWidth: true,
  borderWidth: true,
  // Color
  backgroundColor: true,
  color: true,
  opacity: true,
  // Flexbox
  alignContent: true,
  alignItems: true,
  alignSelf: true,
  flex: true,
  flexBasis: true,
  flexDirection: true,
  flexGrow: true,
  flexShrink: true,
  flexWrap: true,
  gap: true, // Not included in Styled System.
  justifyContent: true,
  justifyItems: true,
  justifySelf: true,
  order: true,
  // Grid
  gridArea: true,
  gridAutoColumns: true,
  gridAutoFlow: true,
  gridAutoRows: true,
  gridColumn: true,
  gridColumnGap: true,
  gridGap: true,
  gridRow: true,
  gridRowGap: true,
  gridTemplateAreas: true,
  gridTemplateColumns: true,
  gridTemplateRows: true,
  // Layout
  width: true,
  display: true,
  height: true,
  maxHeight: true,
  maxWidth: true,
  minHeight: true,
  minWidth: true,
  overflow: true,
  overflowX: true,
  overflowY: true,
  verticalAlign: true,
  // Position
  bottom: true,
  left: true,
  position: true,
  right: true,
  top: true,
  zIndex: true,
  // Shadow
  boxShadow: true,
  textShadow: true,
  // Space
  margin: true,
  marginBottom: true,
  marginLeft: true,
  marginRight: true,
  marginTop: true,
  padding: true,
  paddingBottom: true,
  paddingLeft: true,
  paddingRight: true,
  paddingTop: true,
  // Typography
  fontFamily: true,
  fontSize: true,
  fontStyle: true,
  fontWeight: true,
  letterSpacing: true,
  lineHeight: true,
  textAlign: true,
  // Other props (Chakra supported)
  animation: true,
  appearance: true,
  boxSizing: true,
  content: true,
  cursor: true,
  fill: true,
  float: true,
  objectFit: true,
  objectPosition: true,
  outline: true,
  overflowWrap: true,
  pointerEvents: true,
  resize: true,
  stroke: true,
  textOverflow: true,
  transform: true,
  transformOrigin: true,
  transition: true,
  userSelect: true,
  visibility: true,
  whiteSpace: true,
};