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]} />
Prop | CSS Property | Theme Key |
---|---|---|
m , margin | margin | space |
mt , marginTop | margin-top | space |
mr , marginRight | margin-right | space |
me , marginEnd | margin-inline-end | space |
mb , marginBottom | margin-bottom | space |
ml , marginLeft | margin-left | space |
ms , marginStart | margin-inline-start | space |
mx , marginX | margin-inline-start + margin-inline-end | space |
my , marginY | margin-top + margin-bottom | space |
p , padding | padding | space |
pt , paddingTop | padding-top | space |
pr , paddingRight | padding-right | space |
pe , paddingEnd | padding-inline-end | space |
pb , paddingBottom | padding-bottom | space |
pl , paddingLeft | padding-left | space |
ps , paddingStart | padding-inline-start | space |
px , paddingX | padding-inline-start + padding-inline-end | space |
py , paddingY | padding-top + padding-bottom | space |
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' />
Prop | CSS Property | Theme Key |
---|---|---|
color | color | colors |
bg , background | background | colors |
bgColor | background-color | colors |
opacity | opacity | none |
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>
Prop | CSS Property | Theme Key |
---|---|---|
bgGradient | background-image | none |
bgClip , backgroundClip | background-clip | none |
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' ]} />
Prop | CSS Property | Theme Key |
---|---|---|
fontFamily | font-family | fonts |
fontSize | font-size | fontSizes |
fontWeight | font-weight | fontWeights |
lineHeight | line-height | lineHeights |
letterSpacing | letter-spacing | letterSpacings |
textAlign | text-align | none |
fontStyle | font-style | none |
textTransform | text-transform | none |
textDecoration | text-decoration | none |
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' />
Prop | CSS Property | Theme Key |
---|---|---|
w , width | width | sizes |
h , height | height | sizes |
minW , minWidth | min-width | sizes |
maxW , maxWidth | max-width | sizes |
minH , minHeight | min-height | sizes |
maxH , maxHeight | max-height | sizes |
display | display | none |
boxSize | width , height | sizes |
verticalAlign | vertical-align | none |
overflow | overflow | none |
overflowX | overflow-x | none |
overflowY | overflow-y | none |
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>
Props in *
will only work if you use the Flex
component.
Prop | CSS Property | Theme Key |
---|---|---|
gap | gap | space |
rowGap | row-gap | space |
columnGap | column-gap | space |
alignItems , *align | align-items | none |
alignContent | align-content | none |
justifyItems | justify-items | none |
justifyContent , *justify | justify-content | none |
flexWrap , *wrap | flex-wrap | none |
flexDirection , flexDir , *direction | flex-direction | none |
flex | flex | none |
flexGrow | flex-grow | none |
flexShrink | flex-shrink | none |
flexBasis | flex-basis | none |
justifySelf | justify-self | none |
alignSelf | align-self | none |
order | order | none |
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>
Props in *
will only work if you use the Grid
component.
Prop | CSS Property | Theme Key |
---|---|---|
gridGap , *gap | grid-gap | space |
gridRowGap , *rowGap | grid-row-gap | space |
gridColumnGap , *columnGap | grid-column-gap | space |
gridColumn , *column | grid-column | none |
gridRow , *row | grid-row | none |
gridArea , *area | grid-area | none |
gridAutoFlow , *autoFlow | grid-auto-flow | none |
gridAutoRows , *autoRows | grid-auto-rows | none |
gridAutoColumns , *autoColumns | grid-auto-columns | none |
gridTemplateRows , *templateRows | grid-template-rows | none |
gridTemplateColumns , *templateColumns | grid-template-columns | none |
gridTemplateAreas , *templateAreas | grid-template-areas | none |
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"
/>
Prop | CSS Property | Theme Key |
---|---|---|
bg , background | background | none |
bgImage , backgroundImage | background-image | none |
bgSize , backgroundSize | background-size | none |
bgPosition ,backgroundPosition | background-position | none |
bgRepeat ,backgroundRepeat | background-repeat | none |
bgAttachment ,backgroundAttachment | background-attachment | none |
Borders
<Box border='1px' borderColor='gray.200'>
Card
</Box>
Prop | CSS Property | Theme Field |
---|---|---|
border | border | borders |
borderWidth | border-width | borderWidths |
borderStyle | border-style | borderStyles |
borderColor | border-color | colors |
borderTop | border-top | borders |
borderTopWidth | border-top-width | borderWidths |
borderTopStyle | border-top-style | borderStyles |
borderTopColor | border-top-color | colors |
borderRight | border-right | borders |
borderEnd | border-inline-end | borders |
borderRightWidth | border-right-width | borderWidths |
borderEndWidth | border-inline-end-width | borderWidths |
borderRightStyle | border-right-style | borderStyles |
borderEndStyle | border-inline-end-style | borderStyles |
borderRightColor | border-right-color | colors |
borderEndColor | border-inline-end-color | colors |
borderBottom | border-bottom | borders |
borderBottomWidth | border-bottom-width | borderWidths |
borderBottomStyle | border-bottom-style | borderStyles |
borderBottomColor | border-bottom-color | colors |
borderLeft | border-left | borders |
borderStart | border-inline-start | borders |
borderLeftWidth | border-left-width | borderWidths |
borderStartWidth | border-inline-start-width | borderWidths |
borderLeftStyle | border-left-style | borderStyles |
borderStartStyle | border-inline-start-style | borderStyles |
borderLeftColor | border-left-color | colors |
borderStartColor | border-inline-start-color | colors |
borderX | border-left , border-right | borders |
borderY | border-top , border-bottom | borders |
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>
Prop | CSS Property | Theme Field |
---|---|---|
borderRadius | border-radius | radii |
borderTopLeftRadius | border-top-left-radius | radii |
borderTopStartRadius | border-top-left-radius in LTR,border-top-right-radius in RTL | radii |
borderTopRightRadius | border-top-right-radius | radii |
borderTopEndRadius | border-top-right-radius in LTR,border-top-left-radius in RTL | radii |
borderBottomRightRadius | border-bottom-right-radius | radii |
borderBottomEndRadius | border-bottom-right-radius in LTR,border-bottom-left-radius in RTL | radii |
borderBottomLeftRadius | border-bottom-left-radius | radii |
borderBottomStartRadius | border-bottom-left-radius in LTR,border-bottom-left-radius in RTL | radii |
borderTopRadius | border-top-left-radius + border-top-right-radius | radii |
borderRightRadius | border-top-right-radius + border-bottom-right-radius | radii |
borderEndRadius | border-top-right-radius + border-bottom-right-radius | radii |
borderBottomRadius | border-bottom-left-radius + border-bottom-right-radius | radii |
borderLeftRadius | border-top-left-radius + border-bottom-left-radius | radii |
borderStartRadius | border-top-left-radius + border-bottom-left-radius | radii |
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>
Prop | CSS Property | Theme Field |
---|---|---|
pos ,position | position | none |
zIndex | z-index | zIndices |
top | top | space |
right | right | space |
bottom | bottom | space |
left | left | space |
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>
Prop | CSS Property | Theme Field |
---|---|---|
textShadow | text-shadow | shadows |
shadow , boxShadow | box-shadow | shadows |
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>
);
}
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>
);
}
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.
To apply backdropBlur
, backdropBrightness
, backdropContrast
,
backdropHueRotate
, backdropInvert
, backdropSaturate
props on the
element, set backdropFilter
prop value to "auto".
Prop | CSS Property | Theme Field |
---|---|---|
filter | filter | none |
blur | filter | blur |
brightness | filter | none |
contrast | filter | none |
hueRotate | filter | none |
invert | filter | none |
saturate | filter | none |
dropShadow | filter | shadows |
backdropFilter | backdrop-filter | none |
backdropBlur | backdrop-filter | blur |
backdropBrightness | backdrop-filter | none |
backdropContrast | backdrop-filter | none |
backdropHueRotate | backdrop-filter | none |
backdropInvert | backdrop-filter | none |
backdropSaturate | backdrop-filter | none |
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>
Prop | CSS Property | Theme Field |
---|---|---|
_hover | &:hover &[data-hover] | none |
_active | &:active &[data-active] | none |
_focus | &:focus &[data-focus] | none |
_highlighted | &[data-highlighted] | none |
_focusWithin | &:focus-within | none |
_focusVisible | &:focus-visible | none |
_disabled | &[disabled] &[aria-disabled=true] &[data-disabled] | none |
_readOnly | &[aria-readonly=true] &[readonly] &[data-readonly] | none |
_before | &::before | none |
_after | &::after | none |
_empty | &:empty | none |
_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-autofill | none |
_even | &:nth-of-type(even) | none |
_odd | &:nth-of-type(odd) | none |
_first | &:first-of-type | none |
_last | &:last-of-type | none |
_notFirst | &:not(:first-of-type) | none |
_notLast | &:not(:last-of-type) | none |
_visited | &:visited | none |
_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 | &::placeholder | none |
_placeholderShown | &:placeholder-shown | none |
_fullScreen | &:fullscreen | none |
_selection | &::selection | none |
_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:
Prop | CSS Property | Theme Field |
---|---|---|
animation | animation | none |
appearance | appearance | none |
content | content | none |
transform | transform | none |
transformOrigin | transform-origin | none |
visibility | visibility | none |
whiteSpace | white-space | none |
userSelect | user-select | none |
pointerEvents | pointer-events | none |
wordBreak | word-break | none |
overflowWrap | overflow-wrap | none |
textOverflow | text-overflow | none |
boxSizing | box-sizing | none |
cursor | cursor | none |
resize | resize | none |
transition | transition | none |
objectFit | object-fit | none |
objectPosition | object-position | none |
float | float | none |
fill | fill | colors |
stroke | stroke | colors |
outline | outline | none |
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.