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

Display

import { Box } from '@hover/blueprint'
// hide the element on all viewports
<Box display='none' />
// hide the element by default, and show from 'md' up
<Box display={{ base: "none", md: "block" }} />
// shorthand
<Box hideBelow='md' />
// hide the element from 'md' up
<Box display={{ base: "block", md: "none" }} />
// shorthand
<Box hideFrom='md' />

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

Flexbox

import { Box, Flex } from "@hover/blueprint"
// 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.

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 "@hover/blueprint"
// 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.

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 "@hover/blueprint"
// 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 "@hover/blueprint"
// 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 "@hover/blueprint"
// 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>
  )
}

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

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

import { Button } from "@hover/blueprint"
// :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.

Blueprint

Settings

Style Props

Reference

Margin and padding

Color and background color

Gradient

Typography

Layout, width and height

Display

Flexbox

Grid Layout

Background

Borders

Border Radius

Position

Shadow

Filter

Pseudo

Other Props

The `as` prop

Style Props

Reference

Margin and padding

Color and background color

Gradient

Typography

Layout, width and height

Display

Flexbox

Grid Layout

Background

Borders

Border Radius

Position

Shadow

Filter

Pseudo

Other Props

The as prop

The `as` prop