Style Props

Chakra UI adopts a convenient approach to styling its components by using style props.

Style props are a way to alter the style of a component by 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 under the hood. 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#

<template>
  <!-- m="2" refers to the value of theme.space.[2] -->
  <c-box m="2">Tomato</c-box>
  
  <!-- You can also make use of custom values -->
  <c-box max-w="960px" mx="auto">Custom</c-box>

  <!-- sets margin `8px` on all viewports and `12px` from the first breakpoint and up -->
  <c-box :m="['2', '3']" />
</template>
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#

<template>
  <!-- picks up a nested color value using dot notation -->
  <c-box color="gray.50" />
  <!-- You can also use raw CSS color values -->
  <c-box color="#f00" />
  <!-- Sets background color to pink -->
  <c-box bg="pink" />
</template>
PropCSS PropertyTheme Key
colorcolorcolors
bg, backgroundColorbackground-colorcolors
opacityopacitynone

Typography#

<template>
  <!-- font-size of `theme.fontSizes.md` -->
  <c-text fontSize="md" />
  <!-- font-size `32px` -->
  <c-text fontSize="32" />
  <!-- font-size `'2em'` -->
  <c-text fontSize="2em" />
  <!-- text-align `left` on all viewports and `center` from the first breakpoint and up -->
  <c-text :textAlign="[ 'left', 'center' ]" />
</template>
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#

<template>
  <!-- verbose -->
  <c-box width="100%" height="32px" />
  <!-- shorthand -->
  <c-box w="100%" h="32px" />
  <!-- width `256px` -->
  <c-box w="256" />
  <!-- width `40px` -->
  <c-box w="40px" />
</template>
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#

<template>
  <!-- verbose -->
  <c-box display="flex" align-items="center" justify-content="space-between">
    Box with Flex props
  </c-box>
  
  <!-- shorthand using the `Flex` component -->
  <c-flex align="center" justify="center">
    Flex Container
  </c-flex>
</template>

<script>
import { CBox, CFlex } from '@chakra-ui/vue'

export default {
  components: {
    CBox,
    CFlex
  }
}
</script>

Note: Props in * will only work if you use the CFlex 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#

<template>
  <!-- verbose -->
  <c-box display="grid" gridGap="2" gridAutoFlow="row dense">
    Grid
  </c-box>

  <!-- shorthand using the `Grid` component -->
  <c-grid gap="2" auto-flow="row dense">
    Grid
  </c-grid>
</template>
<script>
import { CBox, CGrid } from '@chakra-ui/vue'

export default {
  components: {
    CBox,
    CGrid
  }
}
</script>

Note: Props in * will only work if you use the CGrid 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#

<template>
  <!-- verbose -->
  <c-box
    backgroundImage="url('/images/kyuubi.png')"
    backgroundPosition="center"
    backgroundRepeat="no-repeat"
  >

  <!-- shorthand -->
  <c-box bgImage="url('/images/gaara.png')" bgPos="center" bgRepeat="no-repeat" >
</template>

<script>
import { CCBox } from '@chakra-ui/vue'\n

export default {
  components: {
    CBox
  }
}
</script>
PropCSS PropertyTheme Key
backgroundbackgroundnone
bgImage, backgroundImagebackground-imagenone
bgSize, backgroundSizebackground-sizenone
bgPos,backgroundPositionbackground-positionnone
bgRepeat,backgroundRepeatbackground-repeatnone
bgAttachment,backgroundAttachmentbackground-attachmentnone

Borders#

<template>
  <c-box border="1px" borderRadius="md" borderColor="gray.200">
    Card
  </c-box>
</template>

<script>
import { CBox } from '@chakra-ui/vue'

export default {
  components: {
    CBox
  }
}
</script>
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#

<template>
  <!-- This button will have no right borderRadius -->
  <c-button roundedRight="0">Button 1</c-button>

  <!-- This button will have no left borderRadius*/ -->
  <c-button roundedLeft="0">Button 2</c-button>

  <!-- top left and top right radius will be `theme.radii.md` => 4px -->
  <c-button roundedTop="md">Button 2</c-button>
</template>

<script>
import { CButton } from '@chakra-ui/vue'

export default {
  components: {
    CButton
  }
}
</script>
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#

<template>

  <!-- verbose -->
  <c-box position="absolute">Cover</c-box>

  <!-- shorthand -->
  <c-box pos="absolute">Cover</c-box>

  <c-box pos="absolute" top="0" left="0">
    Absolute with top and left
  </c-box>

  <c-box pos="fixed" w="100%" zIndex="2">
    Fixed with zIndex
  </c-box>
</template>

<script>
import { CBox } from '@chakra-ui/vue'

export default {
  components: {
    CBox
  }
}
</script>
PropCSS PropertyTheme Field
pos,positionpositionnone
zIndexz-indexzIndices
toptopspace
rightrightspace
bottombottomspace
leftleftspace

Shadow#

<template>
  <!-- verbose -->
  <!-- text-shadow will be `theme.shadows.sm` -->
  <!-- box-shadow will be `theme.shadows.md` -->
  <c-box textShadow="sm" boxShadow="md" />

  <!-- raw CSS values -->
  <c-text textShadow="2px 2px #ff0000" boxShadow="5px 10px #888888">
    Text with shadows
  </c-text>
</template>

<script>
import { CBox, CText } from '@chakra-ui/vue'

export default {
  components: {
    CBox,
    CText
  }
}
</script>
PropCSS PropertyTheme Field
textShadowtext-shadowshadows
shadow,boxShadowbox-shadowshadows

Other Props#

Asides from all the common style props listed above, all components 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 a lot of the components in @chakra-ui/vue will get because they compose the Box component.

It allows you to pass an 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 router-link and Button like this:

<template>
  <c-button as="router-link" to="/about">About Page Button</c-button>
</template>

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

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!