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.

Reference#

The following table shows a list of every style prop and the properties within each group.

Margin and padding#

import { Box } from "@chakra-ui/react"
// m={2} refers to the value of `theme.space[2]`
<Box m={2}>Tomato</Box>
// You can also use custom values
<Box maxW="960px" mx="auto" />
// sets margin `8px` on all viewports and `12px` from the first breakpoint and up
<Box m={[2, 3]} />
PropCSS PropertyTheme Key
m, marginmarginspace
mt, marginTopmargin-topspace
mr, marginRightmargin-rightspace
me, marginEndmargin-inline-endspace
mb, marginBottommargin-bottomspace
ml, marginLeftmargin-leftspace
ms, marginStartmargin-inline-startspace
mx, marginXmargin-inline-start + margin-inline-endspace
my, marginYmargin-top + margin-bottomspace
p, paddingpaddingspace
pt, paddingToppadding-topspace
pr, paddingRightpadding-rightspace
pe, paddingEndpadding-inline-endspace
pb, paddingBottompadding-bottomspace
pl, paddingLeftpadding-leftspace
ps, paddingStartpadding-inline-startspace
px, paddingXpadding-inline-start + padding-inline-endspace
py, paddingYpadding-top + padding-bottomspace

For mx and px props, we use margin-inline-start and margin-inline-end to ensure the generated styles are RTL-friendly

Color and background color#

import { Box } from "@chakra-ui/react"
// picks up a nested color value using dot notation
// => `theme.colors.gray[50]`
<Box color='gray.50' />
// raw CSS color value
<Box color='#f00' />
// background colors
<Box bg='tomato' />
// verbose prop
<Box backgroundColor='tomato' />
PropCSS PropertyTheme Key
colorcolorcolors
bg, backgroundbackgroundcolors
bgColorbackground-colorcolors
opacityopacitynone

Gradient#

import { Box, Text } from "@chakra-ui/react"
// adding linear gradient and color transitions
<Box w="100%" h="200px" bgGradient="linear(to-t, green.200, pink.500)" />
// adding radial gradient and color transitions
<Box w="100%" h="200px" bgGradient="radial(gray.300, yellow.400, pink.200)" />
// adding the text gradient
<Text
bgGradient="linear(to-l, #7928CA, #FF0080)"
bgClip="text"
fontSize="6xl"
fontWeight="extrabold"
>
Welcome to Chakra UI
</Text>
PropCSS PropertyTheme Key
bgGradientbackground-imagenone
bgClip, backgroundClipbackground-clipnone

Typography#

import { Text } from "@chakra-ui/react"
// font-size of `theme.fontSizes.md`
<Text fontSize="md" />
// font-size `32px`
<Text fontSize={32} />
// font-size `'2em'`
<Text fontSize='2em' />
// text-align `left` on all viewports and `center` from the first breakpoint and up
<Text textAlign={[ 'left', 'center' ]} />
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#

import { Box } from "@chakra-ui/react"
// verbose
<Box width="100%" height={32} />
// shorthand
<Box w="100%" h="32px" />
// use theme sizing
<Box boxSize="sm" />
// width `256px`
<Box w={256} />
// width `'40px'`
<Box w='40px' />
PropCSS PropertyTheme Key
w, widthwidthsizes
h, heightheightsizes
minW, minWidthmin-widthsizes
maxW, maxWidthmax-widthsizes
minH, minHeightmin-heightsizes
maxH, maxHeightmax-heightsizes
displaydisplaynone
boxSizewidth, heightsizes
verticalAlignvertical-alignnone
overflowoverflownone
overflowXoverflowXnone
overflowYoverflowYnone

Flexbox#

import { Box, Flex } from "@chakra-ui/react"
// verbose
<Box display="flex" alignItems="center" justifyContent="space-between">
Box with Flex props
</Box>
// shorthand using the `Flex` component
<Flex align="center" justify="center">
Flex Container
</Flex>

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

PropCSS PropertyTheme Key
gapgapspace
row-gaprow-gapspace
column-gapcolumn-gapspace
alignItems, *alignalign-itemsnone
alignContentalign-contentnone
justifyItemsjustify-itemsnone
justifyContent, *justifyjustify-contentnone
flexWrap, *wrapflex-wrapnone
flexDirection, flexDir, *directionflex-directionnone
flexflexnone
flexGrowflex-grownone
flexShrinkflex-shrinknone
flexBasisflex-basisnone
justifySelfjustify-selfnone
alignSelfalign-selfnone
orderordernone

Grid Layout#

import { Box, Grid } from "@chakra-ui/react"
// verbose
<Box display="grid" gridGap={2} gridAutoFlow="row dense">
Grid
</Box>
// shorthand using the `Grid` component
<Grid gap={2} autoFlow="row dense">
Grid
</Grid>

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#

import { Box } from "@chakra-ui/react"
// verbose
<Box
backgroundImage="url('/images/kyuubi.png')"
backgroundPosition="center"
backgroundRepeat="no-repeat"
/>
// shorthand
<Box
bgImage="url('/images/gaara.png')"
bgPosition="center"
bgRepeat="no-repeat"
/>
PropCSS PropertyTheme Key
bg, backgroundbackgroundnone
bgImage, backgroundImagebackground-imagenone
bgSize, backgroundSizebackground-sizenone
bgPosition,backgroundPositionbackground-positionnone
bgRepeat,backgroundRepeatbackground-repeatnone
bgAttachment,backgroundAttachmentbackground-attachmentnone

Borders#

<Box border='1px' borderColor='gray.200'>
Card
</Box>
PropCSS PropertyTheme Field
borderborderborders
borderWidthborder-widthborderWidths
borderStyleborder-styleborderStyles
borderColorborder-colorcolors
borderTopborder-topborders
borderTopWidthborder-top-widthborderWidths
borderTopStyleborder-top-styleborderStyles
borderTopColorborder-top-colorcolors
borderRightborder-rightborders
borderEndborder-inline-endborders
borderRightWidthborder-right-widthborderWidths
borderEndWidthborder-inline-end-widthborderWidths
borderRightStyleborder-right-styleborderStyles
borderEndStyleborder-inline-end-styleborderStyles
borderRightColorborder-right-colorcolors
borderEndColorborder-inline-end-colorcolors
borderBottomborder-bottomborders
borderBottomWidthborder-bottom-widthborderWidths
borderBottomStyleborder-bottom-styleborderStyles
borderBottomColorborder-bottom-colorcolors
borderLeftborder-leftborders
borderStartborder-inline-startborders
borderLeftWidthborder-left-widthborderWidths
borderStartWidthborder-inline-start-widthborderWidths
borderLeftStyleborder-left-styleborderStyles
borderStartStyleborder-inline-start-styleborderStyles
borderLeftColorborder-left-colorcolors
borderStartColorborder-inline-start-colorcolors
borderXborder-left , border-rightborders
borderYborder-top , border-bottomborders

Border Radius#

import { Button } from "@chakra-ui/react"
// This button will have no right borderRadius
<Button borderRightRadius="0">Button 1</Button>
// This button will have no left borderRadius*/
<Button borderLeftRadius="0">Button 2</Button>
// top left and top right radius will be `theme.radii.md` => 4px
<Button borderTopRadius="md">Button 2</Button>
PropCSS PropertyTheme Field
borderRadiusborder-radiusradii
borderTopLeftRadiusborder-top-left-radiusradii
borderTopStartRadiusborder-top-left-radius in LTR,
border-top-right-radius in RTL
radii
borderTopRightRadiusborder-top-right-radiusradii
borderTopEndRadiusborder-top-right-radius in LTR,
border-top-left-radius in RTL
radii
borderBottomRightRadiusborder-bottom-right-radiusradii
borderBottomEndRadiusborder-bottom-right-radius in LTR,
border-bottom-left-radius in RTL
radii
borderBottomLeftRadiusborder-bottom-left-radiusradii
borderBottomStartRadiusborder-bottom-left-radius in LTR,
border-bottom-left-radius in RTL
radii
borderTopRadiusborder-top-left-radius + border-top-right-radiusradii
borderRightRadiusborder-top-right-radius + border-bottom-right-radiusradii
borderEndRadiusborder-top-right-radius + border-bottom-right-radiusradii
borderBottomRadiusborder-bottom-left-radius + border-bottom-right-radiusradii
borderLeftRadiusborder-top-left-radius + border-bottom-left-radiusradii
borderStartRadiusborder-top-left-radius + border-bottom-left-radiusradii

Position#

import { Box } from "@chakra-ui/react"
// verbose
<Box position="absolute">Cover</Box>
// shorthand
<Box pos="absolute">Cover</Box>
<Box pos="absolute" top="0" left="0">
Absolute with top and left
</Box>
<Box pos="fixed" w="100%" zIndex={2}>
Fixed with zIndex
</Box>
PropCSS PropertyTheme Field
pos,positionpositionnone
zIndexz-indexzIndices
toptopspace
rightrightspace
bottombottomspace
leftleftspace

Shadow#

<SimpleGrid
bg='gray.50'
columns={{ sm: 2, md: 4 }}
spacing='8'
p='10'
textAlign='center'
rounded='lg'
color='gray.400'
>
<Box boxShadow='xs' p='6' rounded='md' bg='white'>
xs
</Box>
<Box boxShadow='sm' p='6' rounded='md' bg='white'>
sm
</Box>
<Box boxShadow='base' p='6' rounded='md' bg='white'>
Base
</Box>
<Box boxShadow='md' p='6' rounded='md' bg='white'>
md
</Box>
<Box boxShadow='lg' p='6' rounded='md' bg='white'>
lg
</Box>
<Box boxShadow='xl' p='6' rounded='md' bg='white'>
xl
</Box>
<Box boxShadow='2xl' p='6' rounded='md' bg='white'>
2xl
</Box>
<Box boxShadow='dark-lg' p='6' rounded='md' bg='white'>
Dark lg
</Box>
<Box boxShadow='outline' p='6' rounded='md' bg='white'>
Outline
</Box>
<Box boxShadow='inner' p='6' rounded='md' bg='white'>
Inner
</Box>
</SimpleGrid>
<Text textShadow='1px 1px #ff0000' m='6'>
Text with shadows
</Text>
PropCSS PropertyTheme Field
textShadowtext-shadowshadows
shadow, boxShadowbox-shadowshadows

Filter#

function Filters() {
const basicBoxStyles = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
boxSize: '250px',
color: 'white',
textShadow: '0 0 20px black',
fontWeight: 'bold',
fontSize: '20px',
px: 4,
background:
'url(https://picsum.photos/id/1080/200/300) center/cover no-repeat',
}
return (
<Flex
flexWrap='wrap'
spacing='24px'
gap='16px'
justifyContent='space-evenly'
>
{/* adding filter property to the element */}
<Box sx={basicBoxStyles} filter='grayscale(80%)'>
Box with Filter
</Box>
{/* adding blur property to the element */}
<Box sx={basicBoxStyles} filter='auto' blur='2px'>
Box with Blur
</Box>
{/* adding brightness property to the element */}
<Box sx={basicBoxStyles} filter='auto' brightness='40%'>
Box with Brightness
</Box>
</Flex>
)
}

Note: To apply blur, brightness, contrast, hueRotate, invert, saturate props on the element, set filter prop value to "auto".

function BackdropFilters() {
const outerBoxStyles = {
boxSize: '250px',
p: '10',
background:
'url(https://picsum.photos/id/1068/200/300) center/cover no-repeat',
}
const innerBoxStyles = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
boxSize: 'full',
color: 'white',
textShadow: '0 0 20px black',
fontWeight: 'bold',
fontSize: '20px',
}
return (
<Flex
flexWrap='wrap'
spacing='24px'
gap='16px'
justifyContent='space-evenly'
>
{/* adding backdrop-filter property to the element */}
<Box sx={outerBoxStyles}>
<Box sx={innerBoxStyles} backdropFilter='invert(100%)'>
Box with Backdrop Filter
</Box>
</Box>
{/* adding backdrop-blur property to the element */}
<Box sx={outerBoxStyles}>
<Box sx={innerBoxStyles} backdropFilter='auto' backdropBlur='8px'>
Box with Backdrop Blur
</Box>
</Box>
{/* adding backdrop-contrast property to the element */}
<Box sx={outerBoxStyles}>
<Box sx={innerBoxStyles} backdropFilter='auto' backdropContrast='30%'>
Box with Backdrop Contrast
</Box>
</Box>
</Flex>
)
}

🚨 backdrop-filter is not supported in Firefox. It can be enabled by the user, but it is suggested to design a component that looks good with and without this property.

Note: To apply backdropBlur, backdropBrightness, backdropContrast, backdropHueRotate, backdropInvert, backdropSaturate props on the element, set backdropFilter prop value to "auto".

PropCSS PropertyTheme Field
filterfilternone
blurfilterblur
brightnessfilternone
contrastfilternone
hueRotatefilternone
invertfilternone
saturatefilternone
dropShadowfiltershadows
backdropFilterbackdrop-filternone
backdropBlurbackdrop-filterblur
backdropBrightnessbackdrop-filternone
backdropContrastbackdrop-filternone
backdropHueRotatebackdrop-filternone
backdropInvertbackdrop-filternone
backdropSaturatebackdrop-filternone

Pseudo#

import { Button } from "@chakra-ui/react"
// :hover style
<Button
colorScheme="teal"
_hover={{
background: "white",
color: "teal.500",
}}
>
Hover me
</Button>
// apply :hover over parent element
<Box
role="group"
>
<Box
_hover={{ fontWeight: 'semibold' }}
_groupHover={{ color: 'tomato' }}
>
</Box>
</Box>
// add ::before pseudo element
// Note: the content value needs an extra set of quotes!
<Box
_before={{ content: '"🙂"', display: 'inline-block', mr: '5px' }}
>
A pseudo element
</Box>
PropCSS PropertyTheme Field
_hover&:hover
&[data-hover]
none
_active&:active
&[data-active]
none
_focus&:focus
&[data-focus]
none
_highlighted&[data-highlighted]none
_focusWithin&:focus-withinnone
_focusVisible&:focus-visiblenone
_disabled&[disabled]
&[aria-disabled=true]
&[data-disabled]
none
_readOnly&[aria-readonly=true]
&[readonly]
&[data-readonly]
none
_before&::beforenone
_after&::afternone
_empty&:emptynone
_expanded&[aria-expanded=true]
&[data-expanded]
none
_checked&[aria-checked=true]
&[data-checked]
none
_grabbed&[aria-grabbed=true]
&[data-grabbed]
none
_pressed&[aria-pressed=true]
&[data-pressed]
none
_invalid&[aria-invalid=true]
&[data-invalid]
none
_valid&[data-valid]
&[data-state=valid]
none
_loading&[data-loading]
&[aria-busy=true]
none
_selected&[aria-selected=true]
&[data-selected]
none
_hidden&[hidden]
&[data-hidden]
none
_autofill&:-webkit-autofillnone
_even&:nth-of-type(even)none
_odd&:nth-of-type(odd)none
_first&:first-of-typenone
_last&:last-of-typenone
_notFirst&:not(:first-of-type)none
_notLast&:not(:last-of-type)none
_visited&:visitednone
_activeLink&[aria-current=page]none
_activeStep&[aria-current=step]none
_indeterminate&:indeterminate
&[aria-checked=mixed]
&[data-indeterminate]
none
_groupHover[role=group]:hover &
[role=group][data-hover] &
[data-group]:hover &
[data-group][data-hover] &
.group:hover &
.group[data-hover] &
none
_peerHover[data-peer]:hover ~ &
[data-peer][data-hover] ~ &
.peer:hover ~ &
.peer[data-hover] ~ &
none
_groupFocus[role=group]:focus &
[role=group][data-focus] &
[data-group]:focus &
[data-group][data-focus] &
.group:focus &
.group[data-focus] &
none
_peerFocus[data-peer]:focus ~ &
[data-peer][data-focus] ~ &
.peer:focus ~ &
.peer[data-focus] ~ &
none
_groupFocusVisible[role=group]:focus-visible &
[data-group]:focus-visible &
.group:focus-visible &
none
_peerFocusVisible[data-peer]:focus-visible ~ &
.peer:focus-visible ~ &
none
_groupActive[role=group]:active &
[role=group][data-active] &
[data-group]:active &
[data-group][data-active] &
.group:active &
.group[data-active] &
none
_peerActive[data-peer]:active ~ &
[data-peer][data-active] ~ &
.peer:active ~ &
.peer[data-active] ~ &
none
_groupDisabled[role=group]:disabled &
[role=group][data-disabled] &
[data-group]:disabled &
[data-group][data-disabled] &
.group:disabled &
.group[data-disabled] &
none
_peerDisabled[data-peer]:disabled ~ &
[data-peer][data-disabled] ~ &
.peer:disabled ~ &
.peer[data-disabled] ~ &
none
_groupInvalid[role=group]:invalid &
[role=group][data-invalid] &
[data-group]:invalid &
[data-group][data-invalid] &
.group:invalid &
.group[data-invalid] &
none
_peerInvalid[data-peer]:invalid ~ &
[data-peer][data-invalid] ~ &
.peer:invalid ~ &
.peer[data-invalid] ~ &
none
_groupChecked[role=group]:checked &
[role=group][data-checked] &
[data-group]:checked &
[data-group][data-checked] &
.group:checked &
.group[data-checked] &
none
_peerChecked[data-peer]:checked ~ &
[data-peer][data-checked] ~ &
.peer:checked ~ &
.peer[data-checked] ~ &
none
_groupFocusWithin[role=group]:focus-within &
[data-group]:focus-within &
.group:focus-within &
none
_peerFocusWithin[data-peer]:focus-within ~ &
.peer:focus-within ~ &
none
_peerPlaceholderShown[data-peer]:placeholder-shown ~ &
.peer:placeholder-shown ~ &
none
_placeholder&::placeholdernone
_placeholderShown&:placeholder-shownnone
_fullScreen&:fullscreennone
_selection&::selectionnone
_rtl[dir=rtl] &
&[dir=rtl]
none
_ltr[dir=ltr] &
&[dir=ltr]
none
_mediaDark@media (prefers-color-scheme: dark)none
_mediaReduceMotion@media (prefers-reduced-motion: reduce)none
_dark.chakra-ui-dark &
[data-theme=dark] &
&[data-theme=dark]
none
_light.chakra-ui-light &
[data-theme=light] &
&[data-theme=light]
none
none

Other Props#

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

PropCSS PropertyTheme Field
animationanimationnone
appearanceappearancenone
contentcontentnone
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
floatfloatnone
fillfillcolors
strokestrokecolors
outlineoutlinenone

The as prop#

The as prop is a feature in all of our components that allows you to pass an HTML tag or component to be rendered.

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:

<Button as='a' target='_blank' variant='outline' href='https://chakra-ui.com'>
Hello
</Button>

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 inNigeria by Segun Adebayo

Deployed by Vercel