Skip to main content

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
note

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
overflowXoverflow-xnone
overflowYoverflow-ynone

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
rowGaprow-gapspace
columnGapcolumn-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' gap='24px' 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>
);
}
tip

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' gap='24px' 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>
);
}
caution

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.

tip

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

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.