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

<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>

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

<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>

Prop	CSS Property	Theme Key
`color`	`color`	`colors`
`bg`, `background`	`background`	`colors`
`bgColor`	`background-color`	`colors`
`opacity`	`opacity`	none

Gradient

<template>  <!-- adding linear gradient and color transitions -->  <c-box w="100%" h="200px" bgGradient="linear(to-t, green.200, pink.500)" />  
  <!-- adding radial gradient and color transitions -->  <c-box w="100%" h="200px" bgGradient="radial(gray.300, yellow.400, pink.200)" />  
  <!-- adding the text gradient -->  <c-text    bgGradient="linear(to-l, #7928CA, #FF0080)"    bgClip="text"    fontSize="6xl"    fontWeight="extrabold"  >    Welcome to Chakra UI Vue
  </c-text></template>

Prop	CSS Property	Theme Key
`bgGradient`	`background-image`	none
`bgClip`, `backgroundClip`	`background-clip`	none

Typography

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

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

<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>

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`
`boxSize`	`width`, `height`	`sizes`
`verticalAlign`	`vertical-align`	none
`overflow`	`overflow`	none
`overflowX`	`overflow-x`	none
`overflowY`	`overflow-y`	none

Display

<template>  <!-- hide the element on all viewports -->  <c-box display='none' />  
  <!-- hide the element by default, and show from 'md' up -->  <c-box :display="{ base: 'none', md: 'block' }" />  
  <!-- shorthand -->  <c-box hide-below='md' />  
  <!-- hide the element from 'md' up -->  <c-box :display="{ base: 'block', md: 'none' }" />  
  <!-- shorthand -->  <c-box hide-from='md' /></template>

Prop	CSS Property	Theme Key
`display`	`display`	none
`hideFrom`	`display` (at breakpoint)	`breakpoints`
`hideBelow`	`display` (at breakpoint)	`breakpoints`

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>

Note: 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

<template>  <!-- verbose -->  <c-box display="grid" grid-gap="2" grid-auto-flow="row dense">    Grid
  </c-box>  
  <!-- shorthand using the `Grid` component -->  <c-grid gap="2" auto-flow="row dense">    Grid
  </c-grid></template>

Note: 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

<template>  <!-- verbose -->  <c-box    background-image="url('/images/kyuubi.png')"    background-position="center"    background-repeat="no-repeat"  >  
  <!-- shorthand -->  <c-box bg-image="url('/images/gaara.png')" bg-pos="center" bg-repeat="no-repeat" ></template>

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

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

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

<template>  <!-- This button will have no right borderRadius -->  <c-button rounded-right="0">Button 1</c-button>  <!-- This button will have no left borderRadius*/ -->  <c-button rounded-left="0">Button 2</c-button>  <!-- top left and top right radius will be `theme.radii.md` => 4px -->  <c-button rounded-top="md">Button 2</c-button></template>

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

<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>

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

<template>  <!-- verbose -->  <!-- text-shadow will be `theme.shadows.sm` -->  <!-- box-shadow will be `theme.shadows.md` -->  <c-box text-shadow="sm" box-shadow="md" />  
  <!-- raw CSS values -->  <c-text text-shadow="2px 2px #ff0000" box-shadow="5px 10px #888888">    Text with shadows
  </c-text></template>

Prop	CSS Property	Theme Field
`textShadow`	`text-shadow`	`shadows`
`shadow`, `boxShadow`	`box-shadow`	`shadows`

Filter

<script setup>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",};</script>  
<template>  <c-flex flex-wrap="wrap" gap="24px" justify-content="space-evenly">    <!-- adding filter property to the element -->    <c-box :sx="basicBoxStyles" filter="grayscale(80%)"> Box with Filter </c-box>    
    <!-- adding blur property to the element -->    <c-box :sx="basicBoxStyles" filter="auto" blur="2px"> Box with Blur </c-box>    
    <!-- adding brightness property to the element -->    <c-box :sx="basicBoxStyles" filter="auto" brightness="40%">      Box with Brightness    </c-box>  </c-flex></template>

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

<script setup>  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",};</script>  
<template>  <c-flex flex-wrap="wrap" gap="24px" justify-content="space-evenly">    <!-- adding backdrop-filter property to the element -->    <c-box :sx="outerBoxStyles">      <c-box :sx="innerBoxStyles" backdrop-filter="invert(100%)">        Box with Backdrop Filter      </c-box>    </c-box>    
    <!-- adding backdrop-blur property to the element -->    <c-box :sx="outerBoxStyles">      <c-box :sx="innerBoxStyles" backdrop-filter="auto" backdrop-blur="8px">        Box with Backdrop Blur      </c-box>    </c-box>    
    <!-- adding backdrop-contrast property to the element -->    <c-box :sx="outerBoxStyles">      <c-box :sx="innerBoxStyles" backdrop-filter="auto" backdrop-contrast="30%">        Box with Backdrop Contrast      </c-box>    </c-box>  </c-flex></template>

🚨 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".

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

<template>  <!-- :hover style -->  <c-button    color-scheme="teal"    :_hover="{
      background: 'white',
      color: 'teal.500',
    }"  >    Hover me
  </c-button>  
  <!-- apply :hover over parent element -->  <c-box role="group">    <c-box      :_hover="{ fontWeight: 'semibold' }"      :_groupHover="{ color: 'tomato' }"    >      Hello
    </c-box>  </c-box>  
  <!-- add ::before pseudo element -->  <!-- Note: the content value needs an extra set of quotes! -->  <c-box    :_before="{
      content: `'🙂'`,
      display: 'inline-block',
      mr: '5px',
    }"  >    A pseudo element
  </c-box></template>

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:

<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 a props without having to wrap the Button in an a component.

Edit this page on GitHub