Styled System
  • Getting Started
  • Guides

Reference Table

Styled System is organized into categories of style props. Each function provides the following props and maps to scales defined in a theme.

Space

import { space } from 'styled-system'
// or `import space from '@styled-system/space'`

<Box m={2}>
  Tomato
</Box>
PropCSS PropertyTheme Field
m, marginmarginspace
mt, marginTopmargin-topspace
mr, marginRightmargin-rightspace
mb, marginBottommargin-bottomspace
ml, marginLeftmargin-leftspace
mxmargin-left and margin-rightspace
mymargin-top and margin-bottomspace
p, paddingpaddingspace
pt, paddingToppadding-topspace
pr, paddingRightpadding-rightspace
pb, paddingBottompadding-bottomspace
pl, paddingLeftpadding-leftspace
pxpadding-left and padding-rightspace
pypadding-top and padding-bottomspace

Styled System provides subsets of space category: margin and padding.

Color

import { color } from 'styled-system'
// or `import color from '@styled-system/color'`

<Text color="white" bg="black">
  Header
</Text>
PropCSS PropertyTheme Field
colorcolorcolors
bg, backgroundColorbackground-colorcolors
opacityopacitynone

Typography

import { typography } from 'styled-system'
// or `import typography from '@styled-system/typography'`

<Header fontFamily="Helvetica" fontSize={2}>
  Hello!
</Header>
PropCSS PropertyTheme Field
fontFamilyfont-familyfonts
fontSizefont-sizefontSizes
fontWeightfont-weightfontWeights
lineHeightline-heightlineHeights
letterSpacingletter-spacingletterSpacings
textAligntext-alignnone
fontStylefont-stylenone

Layout

import { layout } from 'styled-system'
// or `import layout from '@styled-system/layout'`

<Box width="100%" height={32} overflow="hidden" />
PropCSS PropertyTheme Field
widthwidthsizes
heightheightsizes
minWidthmin-widthsizes
maxWidthmax-widthsizes
minHeightmin-heightsizes
maxHeightmax-heightsizes
sizewidth heightsizes
displaydisplaynone
verticalAlignvertical-alignnone
overflowoverflownone
overflowXoverflowXnone
overflowYoverflowYnone

Flexbox

import { flexbox } from 'styled-system'
// or `import flexbox from '@styled-system/flexbox'`

<Flex alignItems="center" justifyContent="space-between">
  Blog
</Flex>
PropCSS PropertyTheme Field
alignItemsalign-itemsnone
alignContentalign-contentnone
justifyItemsjustify-itemsnone
justifyContentjustify-contentnone
flexWrapflex-wrapnone
flexDirectionflex-directionnone
flexflex (shorthand)none
flexGrowflex-grownone
flexShrinkflex-shrinknone
flexBasisflex-basisnone
justifySelfjustify-selfnone
alignSelfalign-selfnone
orderordernone

Grid Layout

import { grid } from 'styled-system'
// or `import grid from '@styled-system/grid'`

<Grid gridGap={2} gridAutoFlow="row dense">
  Grid
</Grid>
PropCSS PropertyTheme Field
gridGapgrid-gapspace
gridRowGapgrid-row-gapspace
gridColumnGapgrid-column-gapspace
gridColumngrid-columnnone
gridRowgrid-rownone
gridAreagrid-areanone
gridAutoFlowgrid-auto-flownone
gridAutoRowsgrid-auto-rowsnone
gridAutoColumnsgrid-auto-columnsnone
gridTemplateRowsgrid-template-rowsnone
gridTemplateColumnsgrid-template-columnsnone
gridTemplateAreasgrid-template-areasnone

Background

import { background } from 'styled-system'
// or `import background from '@styled-system/background'`

<Image
  backgroundImage="url('/images/dog.png')"
  backgroundPosition="center"
  backgroundRepeat="no-repeat"
/>
PropCSS PropertyTheme Field
backgroundbackgroundnone
backgroundImagebackground-imagenone
backgroundSizebackground-sizenone
backgroundPositionbackground-positionnone
backgroundRepeatbackground-repeatnone

Border

import { border } from 'styled-system'
// or `import border from '@styled-system/border'`

<Box border={1} borderRadius={2}>
  Card
</Box>
PropCSS PropertyTheme Field
borderborderborders
borderWidthborder-widthborderWidths
borderStyleborder-styleborderStyles
borderColorborder-colorcolors
borderRadiusborder-radiusradii
borderTopborder-topborders
borderTopWidthborder-top-widthborderWidths
borderTopStyleborder-top-styleborderStyles
borderTopColorborder-top-colorcolors
borderTopLeftRadiusborder-top-left-radiusradii
borderTopRightRadiusborder-top-right-radiusradii
borderRightborder-rightborders
borderRightWidthborder-right-widthborderWidths
borderRightStyleborder-right-styleborderStyles
borderRightColorborder-right-colorcolors
borderBottomborder-bottomborders
borderBottomWidthborder-bottom-widthborderWidths
borderBottomStyleborder-bottom-styleborderStyles
borderBottomColorborder-bottom-colorcolors
borderBottomLeftRadiusborder-bottom-left-radiusradii
borderBottomRightRadiusborder-bottom-right-radiusradii
borderLeftborder-leftborders
borderLeftWidthborder-left-widthborderWidths
borderLeftStyleborder-left-styleborderStyles
borderLeftColorborder-left-colorcolors
borderXborder-left & border-rightborders
borderYborder-top & border-bottomborders

Position

import { position } from 'styled-system'
// or `import position from '@styled-system/position'`

<Box position="absolute" top={0} left={0} right={0} bottom={0}>
  Cover
</Box>
PropCSS PropertyTheme Field
positionpositionnone
zIndexz-indexzIndices
toptopspace
rightrightspace
bottombottomspace
leftleftspace

Shadow

import { shadow } from 'styled-system'
// or `import shadow from '@styled-system/shadow'`

<Text textShadow="2px 2px #ff0000" boxShadow="5px 10px #888888">
  Text with shadows
</Text>
PropCSS PropertyTheme Field
textShadowtext-shadowshadows
boxShadowbox-shadowshadows

Variants

Note: The prefered API for variants has changed. The following is a reference for legacy variant APIs.

import { textStyle, colorStyle, buttonStyle } from 'styled-system'
// or `import { textStyle, colorStyle, buttonStyle } from '@styled-system/variant'`

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
Function NamePropTheme Field
textStyletextStyletextStyles
colorStylecolorscolorStyles
buttonStylevariantbuttons
Edit this page on GitHub
Previous:
API
Next:
Packages