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] -->  <CBox m="2">Tomato</CBox>  
  <!-- You can also make use of custom values -->  <CBox max-w="960px" mx="auto">Custom</CBox>  
  <!-- sets margin `8px` on all viewports and `12px` from the first breakpoint and up -->  <CBox :m="['2', '3']" /></template>

Prop	CSS Property	Theme Key
`m`, `margin`	`margin`	`space`
`mt`, `margin-top`	`margin-top`	`space`
`mr`, `margin-right`	`margin-right`	`space`
`me`, `margin-end`	`margin-inline-end`	`space`
`mb`, `margin-bottom`	`margin-bottom`	`space`
`ml`, `margin-left`	`margin-left`	`space`
`ms`, `margin-start`	`margin-inline-start`	`space`
`mx`, `margin-x`	`margin-inline-start` + `margin-inline-end`	`space`
`my`, `margin-y`	`margin-top` + `margin-bottom`	`space`
`p`, `padding`	`padding`	`space`
`pt`, `padding-top`	`padding-top`	`space`
`pr`, `padding-right`	`padding-right`	`space`
`pe`, `padding-end`	`padding-inline-end`	`space`
`pb`, `padding-bottom`	`padding-bottom`	`space`
`pl`, `padding-left`	`padding-left`	`space`
`ps`, `padding-start`	`padding-inline-start`	`space`
`px`, `padding-x`	`padding-inline-start` + `padding-inline-end`	`space`
`py`, `padding-y`	`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 -->  <CBox color="gray.50" />  
  <!-- You can also use raw CSS color values -->  <CBox color="#f00" />  
  <!-- Sets background color to pink -->  <CBox bg="pink" /></template>

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

Gradient

<template>  <!-- adding linear gradient and color transitions -->  <CBox w="100%" h="200px" bg-gradient="linear(to-t, green.200, pink.500)" />  
  <!-- adding radial gradient and color transitions -->  <CBox w="100%" h="200px" bg-gradient="radial(gray.300, yellow.400, pink.200)" />  
  <!-- adding the text gradient -->  <CText    bg-gradient="linear(to-l, #7928CA, #FF0080)"    bg-clip="text"    font-size="6xl"    font-weight="extrabold"  >    Welcome to Chakra UI Vue
  </CText></template>

Prop	CSS Property	Theme Key
`bg-gradient`	`background-image`	none
`bg-clip`, `background-clip`	`background-clip`	none

Typography

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

Prop	CSS Property	Theme Key
`font-family`	`font-family`	`fonts`
`font-size`	`font-size`	`fontSizes`
`font-weight`	`font-weight`	`fontWeights`
`line-height`	`line-height`	`lineHeights`
`letter-spacing`	`letter-spacing`	`letterSpacings`
`text-align`	`text-align`	none
`font-style`	`font-style`	none
`text-transform`	`text-transform`	none
`text-decoration`	`text-decoration`	none

Layout, width and height

<template>  <!-- verbose -->  <CBox width="100%" height="32px" />  
  <!-- shorthand -->  <CBox w="100%" h="32px" />  
  <!-- width `256px` -->  <CBox w="256" />  
  <!-- width `'40px'` -->  <CBox w="40px" /></template>

Prop	CSS Property	Theme Key
`w`, `width`	`width`	`sizes`
`h`, `height`	`height`	`sizes`
`min-w`, `min-width`	`min-width`	`sizes`
`max-x`, `max-width`	`max-width`	`sizes`
`minH`, `min-height`	`min-height`	`sizes`
`maxH`, `max-height`	`max-height`	`sizes`
`box-size`	`width`, `height`	`sizes`
`vertical-align`	`vertical-align`	none
`overflow`	`overflow`	none
`overflow-x`	`overflow-x`	none
`overflow-y`	`overflow-y`	none

Display

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

Prop	CSS Property	Theme Key
`display`	`display`	none
`hide-from`	`display` (at breakpoint)	`breakpoints`
`hide-below`	`display` (at breakpoint)	`breakpoints`

Flexbox

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

Note: Props in * will only work if you use the Flex component.

Prop	CSS Property	Theme Key
`gap`	`gap`	`space`
`row-gap`	`row-gap`	`space`
`column-gap`	`column-gap`	`space`
`align-items`, *`align`	`align-items`	none
`align-content`	`align-content`	none
`justify-items`	`justify-items`	none
`justify-content`, *`justify`	`justify-content`	none
`flex-wrap`, *`wrap`	`flex-wrap`	none
`flex-direction`, `flex-dir`, *`direction`	`flex-direction`	none
`flex`	`flex`	none
`flex-grow`	`flex-grow`	none
`flex-shrink`	`flex-shrink`	none
`flex-basis`	`flex-basis`	none
`justify-self`	`justify-self`	none
`align-self`	`align-self`	none
`order`	`order`	none

Grid Layout

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

Note: Props in * will only work if you use the Grid component.

Prop	CSS Property	Theme Key
`grid-gap`, *`gap`	`grid-gap`	`space`
`grid-row-cap`, *`row-gap`	`grid-row-gap`	`space`
`grid-column-gap`, *`column-gap`	`grid-column-gap`	`space`
`grid-column`, *`column`	`grid-column`	none
`grid-row`, *`row`	`grid-row`	none
`grid-area`, *`area`	`grid-area`	none
`grid-auto-flow`, *`auto-flow`	`grid-auto-flow`	none
`grid-auto-rows`, *`auto-rows`	`grid-auto-rows`	none
`grid-auto-columns`, *`auto-columns`	`grid-auto-columns`	none
`grid-template-rows`, *`template-rows`	`grid-template-rows`	none
`grid-template-columns`, *`template-columns`	`grid-template-columns`	none
`grid-template-areas`, *`template-areas`	`grid-template-areas`	none

Background

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

Prop	CSS Property	Theme Key
`bg`, `background`	`background`	none
`bg-image`, `background-image`	`background-image`	none
`bg-size`, `background-size`	`background-size`	none
`bg-position`,`background-position`	`background-position`	none
`bg-repeat`,`background-repeat`	`background-repeat`	none
`bg-attachment`,`background-attachment`	`background-attachment`	none

Borders

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

Prop	CSS Property	Theme Field
`border`	`border`	`borders`
`border-width`	`border-width`	`borderWidths`
`border-style`	`border-style`	`borderStyles`
`border-color`	`border-color`	`colors`
`border-top`	`border-top`	`borders`
`border-top-width`	`border-top-width`	`borderWidths`
`border-top-style`	`border-top-style`	`borderStyles`
`border-top-color`	`border-top-color`	`colors`
`border-right`	`border-right`	`borders`
`border-end`	`border-inline-end`	`borders`
`border-right-width`	`border-right-width`	`borderWidths`
`border-end-width`	`border-inline-end-width`	`borderWidths`
`border-right-style`	`border-right-style`	`borderStyles`
`border-end-style`	`border-inline-end-style`	`borderStyles`
`border-right-color`	`border-right-color`	`colors`
`border-end-color`	`border-inline-end-color`	`colors`
`border-bottom`	`border-bottom`	`borders`
`border-bottom-width`	`border-bottom-width`	`borderWidths`
`border-bottom-style`	`border-bottom-style`	`borderStyles`
`border-bottom-color`	`border-bottom-color`	`colors`
`border-left`	`border-left`	`borders`
`border-start`	`border-inline-start`	`borders`
`border-left-width`	`border-left-width`	`borderWidths`
`border-start-width`	`border-inline-start-width`	`borderWidths`
`border-left-style`	`border-left-style`	`borderStyles`
`border-start-style`	`border-inline-start-style`	`borderStyles`
`border-left-color`	`border-left-color`	`colors`
`border-start-color`	`border-inline-start-color`	`colors`
`border-x`	`border-left` , `border-right`	`borders`
`border-y`	`border-top` , `border-bottom`	`borders`

Border Radius

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

Prop	CSS Property	Theme Field
`border-radius`	`border-radius`	`radii`
`border-top-left-radius`	`border-top-left-radius`	`radii`
`border-top-start-radius`	`border-top-left-radius` in LTR, `border-top-right-radius` in RTL	`radii`
`border-top-right-radius`	`border-top-right-radius`	`radii`
`border-top-end-radius`	`border-top-right-radius` in LTR, `border-top-left-radius` in RTL	`radii`
`border-bottom-right-radius`	`border-bottom-right-radius`	`radii`
`border-bottom-end-radius`	`border-bottom-right-radius` in LTR, `border-bottom-left-radius` in RTL	`radii`
`border-bottom-left-radius`	`border-bottom-left-radius`	`radii`
`border-bottom-start-radius`	`border-bottom-left-radius` in LTR, `border-bottom-left-radius` in RTL	`radii`
`border-top-radius`	`border-top-left-radius` + `border-top-right-radius`	`radii`
`border-right-radius`	`border-top-right-radius` + `border-bottom-right-radius`	`radii`
`border-end-radius`	`border-top-right-radius` + `border-bottom-right-radius`	`radii`
`border-bottom-radius`	`border-bottom-left-radius` + `border-bottom-right-radius`	`radii`
`border-left-radius`	`border-top-left-radius` + `border-bottom-left-radius`	`radii`
`border-start-radius`	`border-top-left-radius` + `border-bottom-left-radius`	`radii`

Position

<template>  <!-- verbose -->  <CBox position="absolute">Cover</CBox>  
  <!-- shorthand -->  <CBox pos="absolute">Cover</CBox>  
  <CBox pos="absolute" top="0" left="0">    Absolute with top and left
  </CBox>  
  <CBox pos="fixed" w="100%" z-index="2">    Fixed with zIndex
  </CBox></template>

Prop	CSS Property	Theme Field
`pos`,`position`	`position`	none
`z-index`	`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` -->  <CBox text-shadow="sm" box-shadow="md" />  
  <!-- raw CSS values -->  <CText text-shadow="2px 2px #ff0000" box-shadow="5px 10px #888888">    Text with shadows
  </CText></template>

Prop	CSS Property	Theme Field
`text-shadow`	`text-shadow`	`shadows`
`shadow`, `box-shadow`	`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>  <CFlex flex-wrap="wrap" gap="24px" justify-content="space-evenly">    <!-- adding filter property to the element -->    <CBox :sx="basicBoxStyles" filter="grayscale(80%)"> Box with Filter </CBox>    
    <!-- adding blur property to the element -->    <CBox :sx="basicBoxStyles" filter="auto" blur="2px"> Box with Blur </CBox>    
    <!-- adding brightness property to the element -->    <CBox :sx="basicBoxStyles" filter="auto" brightness="40%">      Box with Brightness    </CBox>  </CFlex></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>  <CFlex flex-wrap="wrap" gap="24px" justify-content="space-evenly">    <!-- adding backdrop-filter property to the element -->    <CBox :sx="outerBoxStyles">      <CBox :sx="innerBoxStyles" backdrop-filter="invert(100%)">        Box with Backdrop Filter      </CBox>    </CBox>    
    <!-- adding backdrop-blur property to the element -->    <CBox :sx="outerBoxStyles">      <CBox :sx="innerBoxStyles" backdrop-filter="auto" backdrop-blur="8px">        Box with Backdrop Blur      </CBox>    </CBox>    
    <!-- adding backdrop-contrast property to the element -->    <CBox :sx="outerBoxStyles">      <CBox :sx="innerBoxStyles" backdrop-filter="auto" backdrop-contrast="30%">        Box with Backdrop Contrast      </CBox>    </CBox>  </CFlex></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
`hue-rotate`	`filter`	none
`invert`	`filter`	none
`saturate`	`filter`	none
`drop-shadow`	`filter`	`shadows`
`backdrop-filter`	`backdrop-filter`	none
`backdrop-blur`	`backdrop-filter`	`blur`
`backdrop-brightness`	`backdrop-filter`	none
`backdrop-contrast`	`backdrop-filter`	none
`backdrop-hue-rotate`	`backdrop-filter`	none
`backdrop-invert`	`backdrop-filter`	none
`backdrop-saturate`	`backdrop-filter`	none

Pseudo

<template>  <!-- :hover style -->  <CButton    color-scheme="teal"    :_hover="{
      background: 'white',
      color: 'teal.500',
    }"  >    Hover me
  </CButton>  
  <!-- apply :hover over parent element -->  <CBox role="group">    <CBox      :_hover="{ fontWeight: 'semibold' }"      :_group-hover="{ color: 'tomato' }"    >      Hello
    </CBox>  </CBox>  
  <!-- add ::before pseudo element -->  <!-- Note: the content value needs an extra set of quotes! -->  <CBox    :_before="{
      content: `'🙂'`,
      display: 'inline-block',
      mr: '5px',
    }"  >    A pseudo element
  </CBox></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
`_focus-within`	`&:focus-within`	none
`_focus-visible`	`&: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
`_active-link`	`&[aria-current=page]`	none
`_active-step`	`&[aria-current=step]`	none
`_indeterminate`	`&:indeterminate` `&[aria-checked=mixed]` `&[data-indeterminate]`	none
`_group-hover`	`[role=group]:hover &` `[role=group][data-hover] &` `[data-group]:hover &` `[data-group][data-hover] &` `.group:hover &` `.group[data-hover] &`	none
`_peer-hover`	`[data-peer]:hover ~ &` `[data-peer][data-hover] ~ &` `.peer:hover ~ &` `.peer[data-hover] ~ &`	none
`_group-focus`	`[role=group]:focus &` `[role=group][data-focus] &` `[data-group]:focus &` `[data-group][data-focus] &` `.group:focus &` `.group[data-focus] &`	none
`_peer-focus`	`[data-peer]:focus ~ &` `[data-peer][data-focus] ~ &` `.peer:focus ~ &` `.peer[data-focus] ~ &`	none
`_group-focus-visible`	`[role=group]:focus-visible &` `[data-group]:focus-visible &` `.group:focus-visible &`	none
`_peer-focus-visible`	`[data-peer]:focus-visible ~ &` `.peer:focus-visible ~ &`	none
`_group-active`	`[role=group]:active &` `[role=group][data-active] &` `[data-group]:active &` `[data-group][data-active] &` `.group:active &` `.group[data-active] &`	none
`_peer-active`	`[data-peer]:active ~ &` `[data-peer][data-active] ~ &` `.peer:active ~ &` `.peer[data-active] ~ &`	none
`_group-disabled`	`[role=group]:disabled &` `[role=group][data-disabled] &` `[data-group]:disabled &` `[data-group][data-disabled] &` `.group:disabled &` `.group[data-disabled] &`	none
`_peer-disabled`	`[data-peer]:disabled ~ &` `[data-peer][data-disabled] ~ &` `.peer:disabled ~ &` `.peer[data-disabled] ~ &`	none
`_group-invalid`	`[role=group]:invalid &` `[role=group][data-invalid] &` `[data-group]:invalid &` `[data-group][data-invalid] &` `.group:invalid &` `.group[data-invalid] &`	none
`_peer-invalid`	`[data-peer]:invalid ~ &` `[data-peer][data-invalid] ~ &` `.peer:invalid ~ &` `.peer[data-invalid] ~ &`	none
`_group-checked`	`[role=group]:checked &` `[role=group][data-checked] &` `[data-group]:checked &` `[data-group][data-checked] &` `.group:checked &` `.group[data-checked] &`	none
`_peer-checked`	`[data-peer]:checked ~ &` `[data-peer][data-checked] ~ &` `.peer:checked ~ &` `.peer[data-checked] ~ &`	none
`_group-focus-within`	`[role=group]:focus-within &` `[data-group]:focus-within &` `.group:focus-within &`	none
`_peer-focus-within`	`[data-peer]:focus-within ~ &` `.peer:focus-within ~ &`	none
`_peer-placeholder-shown`	`[data-peer]:placeholder-shown ~ &` `.peer:placeholder-shown ~ &`	none
`_placeholder`	`&::placeholder`	none
`_placeholder-shown`	`&:placeholder-shown`	none
`_full-screen`	`&:fullscreen`	none
`_selection`	`&::selection`	none
`_rtl`	`[dir=rtl] &` `&[dir=rtl]`	none
`_ltr`	`[dir=ltr] &` `&[dir=ltr]`	none
`_media-dark`	`@media (prefers-color-scheme: dark)`	none
`_media-reduce-motion`	`@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
`transform-origin`	`transform-origin`	none
`visibility`	`visibility`	none
`white-space`	`white-space`	none
`user-select`	`user-select`	none
`pointer-events`	`pointer-events`	none
`word-break`	`word-break`	none
`overflow-wrap`	`overflow-wrap`	none
`text-overflow`	`text-overflow`	none
`box-sizing`	`box-sizing`	none
`cursor`	`cursor`	none
`resize`	`resize`	none
`transition`	`transition`	none
`object-fit`	`object-fit`	none
`object-position`	`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>  <CButton as="router-link" to="/about">About Page Button</CButton></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