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 `16px` from the first breakpoint and up
<Box m={[2, 3]} />
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 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 `50%`
<Box w={1/2} />
// 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
d, 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
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
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#

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
borderTopRightRadiusborder-top-right-radiusradii
borderBottomRightRadiusborder-bottom-right-radiusradii
borderBottomLeftRadiusborder-bottom-left-radiusradii
borderTopRadiusborder-top-left-radius & border-top-right-radiusradii
borderRightRadiusborder-top-right-radius & border-bottom-right-radiusradii
borderBottomRadiusborder-bottom-left-radius & border-bottom-right-radiusradii
borderLeftRadiusborder-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#

xs
sm
Base
md
lg
xl
2xl
Dark lg
Outline
Inner
Editable Example

Text with shadows

Editable Example
PropCSS PropertyTheme Field
textShadowtext-shadowshadows
boxShadowbox-shadowshadows

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>
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
_indeterminate:indeterminate,
[aria-checked=mixed],
[data-indeterminate]
none
_groupHover[role=group]:hover &,
[role=group][data-hover] &
none
_groupFocus[role=group]:focus &,
[role=group][data-focus] &
none
_groupActive[role=group]:active &,
[role=group][data-active] &
none
_groupDisabled[role=group]:disabled &,
[role=group][data-disabled] &
none
_groupInvalid[role=group][data-invalid] &none
_groupChecked[role=group][data-checked] &none
_placeholder::placeholdernone
_fullScreen:fullscreennone
_selection::selectionnone

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
floatfloatnone
fillfillcolors
strokestrokecolors
outlineoutlinenone

The as prop#

The as prop is a feature that 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:

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.