Style Props

Style props are a way to alter the style of a component by simply passing props to it. It helps to save time by providing helpful shorthand ways to style components.

Chakra UI uses Styled System to achieve this. We extend styled-system's utilities to provide other helpful shorthands.

Style Props Reference#

The following table shows a list of every style prop and the properties within each group. To learn more about it, you can also check the Styled System docs:

Margin & padding#

PropCSS PropertyTheme Key
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

Color & background color#

PropCSS PropertyTheme Key
colorcolorcolors
bg, backgroundColorbackground-colorcolors
opacityopacitynone

Typography#

PropCSS PropertyTheme Key
fontFamilyfont-familyfonts
fontSizefont-sizefontSizes
fontWeightfont-weightfontWeights
lineHeightline-heightlineHeights
letterSpacingletter-spacingletterSpacings
textAligntext-alignnone
fontStylefont-stylenone
textTransformtext-transformnone
textDecorationtext-decorationnone

Layout, width and height#

PropCSS PropertyTheme Key
w, widthwidthsizes
h, heightheightsizes
minW, minWidthmin-widthsizes
maxW, maxWidthmax-widthsizes
minH, minHeightmin-heightsizes
maxH, maxHeightmax-heightsizes
d, displaydisplaynone
sizewidth heightsizes
verticalAlignvertical-alignnone
overflowoverflownone
overflowXoverflowXnone
overflowYoverflowYnone

Flexbox#

Note: Props in * will only work if you use the Flex component.

PropCSS PropertyTheme Key
alignItems, *alignalign-itemsnone
alignContentalign-contentnone
justifyItemsjustify-itemsnone
justifyContent, *justifyjustify-contentnone
flexWrap, *wrapflex-wrapnone
flexDirection, flexDir, *directionflex-directionnone
flexflex (shorthand)none
flexGrowflex-grownone
flexShrinkflex-shrinknone
flexBasisflex-basisnone
justifySelfjustify-selfnone
alignSelfalign-selfnone
orderordernone

Grid Layout#

Note: Props in * will only work if you use the Grid component.

PropCSS PropertyTheme Key
gridGap, *gapgrid-gapspace
gridRowGap, *rowGapgrid-row-gapspace
gridColumnGap, *columnGapgrid-column-gapspace
gridColumn, *columngrid-columnnone
gridRow, *rowgrid-rownone
gridArea, *areagrid-areanone
gridAutoFlow, *autoFlowgrid-auto-flownone
gridAutoRows, *autoRowsgrid-auto-rowsnone
gridAutoColumns, *autoColumnsgrid-auto-columnsnone
gridTemplateRows, *templateRowsgrid-template-rowsnone
gridTemplateColumns, *templateColumnsgrid-template-columnsnone
gridTemplateAreas, *templateAreasgrid-template-areasnone

Background#

PropCSS PropertyTheme Key
backgroundbackgroundnone
bgImage, backgroundImagebackground-imagenone
bgSize, backgroundSizebackground-sizenone
bgPos,backgroundPositionbackground-positionnone
bgRepeat,backgroundRepeatbackground-repeatnone
bgAttachment,backgroundAttachmentbackground-attachmentnone

Borders#

PropCSS PropertyTheme Field
borderborderborders
borderWidthborder-widthborderWidths
borderStyleborder-styleborderStyles
borderColorborder-colorcolors
borderTopborder-topborders
borderTopWidthborder-top-widthborderWidths
borderTopStyleborder-top-styleborderStyles
borderTopColorborder-top-colorcolors
borderRightborder-rightborders
borderRightWidthborder-right-widthborderWidths
borderRightStyleborder-right-styleborderStyles
borderRightColorborder-right-colorcolors
borderBottomborder-bottomborders
borderBottomWidthborder-bottom-widthborderWidths
borderBottomStyleborder-bottom-styleborderStyles
borderBottomColorborder-bottom-colorcolors
borderLeftborder-leftborders
borderLeftWidthborder-left-widthborderWidths
borderLeftStyleborder-left-styleborderStyles
borderLeftColorborder-left-colorcolors
borderXborder-left & border-rightborders
borderYborder-top & border-bottomborders

Border Radius#

PropCSS PropertyTheme Field
rounded, borderRadiusborder-radiusradii
roundedTopLeft, borderTopLeftRadiusborder-top-left-radiusradii
roundedTopRight, borderTopRightRadiusborder-top-right-radiusradii
roundedBottomRight, borderBottomRightRadiusborder-bottom-right-radiusradii
roundedBottomLeft, borderBottomLeftRadiusborder-bottom-left-radiusradii
roundedTopborder-top-left-radius & border-top-right-radiusradii
roundedRightborder-top-right-radius & border-bottom-right-radiusradii
roundedBottomborder-bottom-left-radius & border-bottom-right-radiusradii
roundedLeftborder-top-left-radius & border-bottom-left-radiusradii

Position#

PropCSS PropertyTheme Field
pos,positionpositionnone
zIndexz-indexzIndices
toptopspace
rightrightspace
bottombottomspace
leftleftspace

Shadow#

PropCSS PropertyTheme Field
textShadowtext-shadowshadows
shadow,boxShadowbox-shadowshadows

Other Props#

Asides all the common style props listed above, all component will accept the following props:

PropCSS PropertyTheme Field
animationanimationnone
appearanceappearancenone
transformtransformnone
transformOrigintransform-originnone
visibilityvisibilitynone
whiteSpacewhite-spacenone
userSelectuser-selectnone
pointerEventspointer-eventsnone
wordBreakword-breaknone
overflowWrapoverflow-wrapnone
textOverflowtext-overflownone
boxSizingbox-sizingnone
cursorcursornone
resizeresizenone
transitiontransitionnone
objectFitobject-fitnone
objectPositionobject-positionnone
objectPositionobject-positionnone
fillfillcolors
strokestrokecolors
outlineoutlinenone

The as prop#

The as prop is a feature that all of our components get from @emotion/styled. It allows you to pass a HTML tag or another component to a Chakra component to be rendered as the base tag of that component along with all it's styles and props.

For example, say you are using a Button component, and you need to make it a link instead. You can compose a and Button like this:

Hello
Editable Example

This allows you to use all of the Button props and all of the <a> props without having to wrap the Button in an a component.

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2020 Segun Adebayo