diff --git a/packages/chakra-ui-core/src/Accordion/Accordion.js b/packages/chakra-ui-core/src/Accordion/Accordion.js
index 1af0171c..95d83878 100644
--- a/packages/chakra-ui-core/src/Accordion/Accordion.js
+++ b/packages/chakra-ui-core/src/Accordion/Accordion.js
@@ -1,16 +1,14 @@
-import { baseProps } from '../config'
 import Box from '../Box'
 import { forwardProps, cloneVNodes, useId, isDef } from '../utils'
 import PseudoBox from '../PseudoBox'
-import styleProps from '../config/props'
 import Collapse from '../Collapse'
 import Icon from '../Icon'
 import { iconProps } from '../Icon/icon.props'
 
 const Accordion = {
   name: 'Accordion',
+  extends: Box,
   props: {
-    ...baseProps,
     allowMultiple: Boolean,
     allowToggle: Boolean,
     index: {
@@ -117,8 +115,8 @@ const Accordion = {
 
 const AccordionItem = {
   name: 'AccordionItem',
+  extends: PseudoBox,
   props: {
-    ...styleProps,
     isOpen: {
       type: Boolean,
       default: null
@@ -204,7 +202,7 @@ const AccordionItem = {
 const AccordionHeader = {
   name: 'AccordionHeader',
   inject: ['$AccordionContext'],
-  props: styleProps,
+  extends: PseudoBox,
   computed: {
     context () {
       return this.$AccordionContext()
@@ -248,7 +246,7 @@ const AccordionHeader = {
 const AccordionPanel = {
   name: 'AccordionPanel',
   inject: ['$AccordionContext'],
-  props: baseProps,
+  extends: Box,
   computed: {
     context () {
       return this.$AccordionContext()
@@ -279,8 +277,8 @@ const AccordionPanel = {
 const AccordionIcon = {
   name: 'AccordionIcon',
   inject: ['$AccordionContext'],
+  extends: Box,
   props: {
-    ...baseProps,
     ...iconProps
   },
   computed: {
diff --git a/packages/chakra-ui-core/src/Alert/Alert.js b/packages/chakra-ui-core/src/Alert/Alert.js
index 13138b7a..33092d23 100644
--- a/packages/chakra-ui-core/src/Alert/Alert.js
+++ b/packages/chakra-ui-core/src/Alert/Alert.js
@@ -1,6 +1,5 @@
 import Box from '../Box'
 import Icon from '../Icon'
-import { baseProps } from '../config/props'
 import { forwardProps } from '../utils'
 import useAlertStyle, { useAlertIconStyle } from './alert.styles'
 
@@ -14,6 +13,7 @@ export const statuses = {
 const Alert = {
   name: 'Alert',
   inject: ['$theme', '$colorMode'],
+  extends: Box,
   provide () {
     return {
       _status: this.status,
@@ -33,8 +33,7 @@ const Alert = {
     variant: {
       type: [String, Array],
       default: 'subtle'
-    },
-    ...baseProps
+    }
   },
   render (h) {
     const alertStyles = useAlertStyle({
@@ -60,12 +59,12 @@ const Alert = {
 const AlertIcon = {
   name: 'AlertIcon',
   inject: ['_status', '_variant', '$colorMode', '$theme'],
+  extends: Box,
   props: {
     size: {
       default: 5
     },
-    name: String,
-    ...baseProps
+    name: String
   },
   computed: {
     colorMode () {
@@ -96,9 +95,7 @@ const AlertIcon = {
 
 const AlertTitle = {
   name: 'AlertTitle',
-  props: {
-    ...baseProps
-  },
+  extends: Box,
   render (h) {
     return h(Box, {
       props: {
@@ -112,9 +109,7 @@ const AlertTitle = {
 
 const AlertDescription = {
   name: 'AlertDescription',
-  props: {
-    ...baseProps
-  },
+  extends: Box,
   render (h) {
     return h(Box, { props: forwardProps(this.$props) }, this.$slots.default)
   }
diff --git a/packages/chakra-ui-core/src/AspectRatioBox/AspectRatioBox.js b/packages/chakra-ui-core/src/AspectRatioBox/AspectRatioBox.js
index 1033f401..41a394e8 100644
--- a/packages/chakra-ui-core/src/AspectRatioBox/AspectRatioBox.js
+++ b/packages/chakra-ui-core/src/AspectRatioBox/AspectRatioBox.js
@@ -1,11 +1,11 @@
-import styleProps from '../config/props'
+
 import PseudoBox from '../PseudoBox'
 import { cloneVNode, forwardProps } from '../utils'
 
 const AspectRatioBox = {
   name: 'AspectRatioBox',
+  extends: PseudoBox,
   props: {
-    ...styleProps,
     ratio: {
       type: Number,
       default: 4 / 3
diff --git a/packages/chakra-ui-core/src/Avatar/Avatar.js b/packages/chakra-ui-core/src/Avatar/Avatar.js
index d0dd6650..24bedb98 100644
--- a/packages/chakra-ui-core/src/Avatar/Avatar.js
+++ b/packages/chakra-ui-core/src/Avatar/Avatar.js
@@ -1,4 +1,3 @@
-import { baseProps } from '../config/props'
 import { forwardProps, canUseDOM } from '../utils/'
 import useAvatarStyles, { avatarSizes } from './avatar.styles'
 import Box from '../Box'
@@ -24,9 +23,9 @@ const getInitials = (name) => {
 export const AvatarBadge = {
   name: 'AvatarBadge',
   inject: ['$theme', '$colorMode'],
+  extends: Box,
   props: {
-    size: [String, Number, Array],
-    ...baseProps
+    size: [String, Number, Array]
   },
   computed: {
     theme () {
@@ -63,10 +62,10 @@ export const AvatarBadge = {
  */
 const AvatarName = {
   name: 'AvatarName',
+  extends: Box,
   props: {
     name: [String, Array],
-    size: [String, Array],
-    ...baseProps
+    size: [String, Array]
   },
   render (h) {
     return h(Box, {
@@ -90,9 +89,9 @@ const AvatarName = {
  */
 const DefaultAvatar = {
   name: 'DefaultAvatar',
+  extends: Box,
   props: {
-    size: [String, Number, Array],
-    ...baseProps
+    size: [String, Number, Array]
   },
   render (h) {
     return h(Box, {
@@ -122,6 +121,7 @@ const DefaultAvatar = {
 export const Avatar = {
   name: 'Avatar',
   inject: ['$theme', '$colorMode'],
+  extends: Box,
   computed: {
     theme () {
       return this.$theme()
@@ -141,8 +141,7 @@ export const Avatar = {
     },
     name: [String, Array],
     src: [String, Array],
-    borderColor: [String],
-    ...baseProps
+    borderColor: [String]
   },
   data () {
     return {
diff --git a/packages/chakra-ui-core/src/AvatarGroup/AvatarGroup.js b/packages/chakra-ui-core/src/AvatarGroup/AvatarGroup.js
index 730670a2..43e56fc1 100644
--- a/packages/chakra-ui-core/src/AvatarGroup/AvatarGroup.js
+++ b/packages/chakra-ui-core/src/AvatarGroup/AvatarGroup.js
@@ -1,6 +1,5 @@
 import Flex from '../Flex'
 import { avatarSizes } from '../Avatar/avatar.styles'
-import { baseProps } from '../config/props'
 import { forwardProps } from '../utils'
 
 /**
@@ -9,10 +8,10 @@ import { forwardProps } from '../utils'
 const MoreAvatarLabel = {
   name: 'MoreAvatarLabel',
   inject: ['$theme', '$colorMode'],
+  extends: Flex,
   props: {
     size: [String, Array],
-    label: String,
-    ...baseProps
+    label: String
   },
   computed: {
     theme () {
@@ -51,8 +50,9 @@ const MoreAvatarLabel = {
 
 const AvatarGroup = {
   name: 'AvatarGroup',
+  extends: Flex,
   props: {
-    groupSize: {
+    size: {
       type: [Number, String, Array],
       default: 'md'
     },
@@ -61,8 +61,7 @@ const AvatarGroup = {
     spacing: {
       type: [Number, String, Array],
       default: -3
-    },
-    ...baseProps
+    }
   },
   render (h) {
     // Get the number of slot nodes inside AvatarGroup
@@ -77,7 +76,7 @@ const AvatarGroup = {
         // Change VNode component options
         const { propsData } = node.componentOptions
         propsData['ml'] = isFirstAvatar ? 0 : this.spacing
-        propsData['size'] = this.groupSize
+        propsData['size'] = this.size
         propsData['showBorder'] = true
         propsData['borderColor'] = this.borderColor || propsData['borderColor']
         propsData['zIndex'] = count - index
@@ -87,7 +86,7 @@ const AvatarGroup = {
       if (max && index === max) {
         return h(MoreAvatarLabel, {
           props: {
-            size: this.groupSize,
+            size: this.size,
             ml: this.spacing,
             label: `+${count - max}`
           }
@@ -95,11 +94,14 @@ const AvatarGroup = {
       }
     })
 
+    // Drop size, borderColor, max, spacing props from final rendered AvatarGroup props for consistency.
+    const { size, borderColor, max: _max, spacing, ...rest } = this.$props
+
     return h(Flex, {
       props: {
         alignItems: 'center',
         zIndex: 0,
-        ...forwardProps(this.$props)
+        ...forwardProps(rest)
       }
     }, clones)
   }
diff --git a/packages/chakra-ui-core/src/Badge/Badge.js b/packages/chakra-ui-core/src/Badge/Badge.js
index ab9fabfe..ec415a60 100644
--- a/packages/chakra-ui-core/src/Badge/Badge.js
+++ b/packages/chakra-ui-core/src/Badge/Badge.js
@@ -1,11 +1,11 @@
 import Box from '../Box'
 import { forwardProps } from '../utils'
-import { baseProps } from '../config/props'
 import useBadgeStyles from './badge.styles'
 
 export default {
   name: 'Badge',
   inject: ['$theme', '$colorMode'],
+  extends: Box,
   props: {
     variant: {
       type: String,
@@ -14,8 +14,7 @@ export default {
     variantColor: {
       type: String,
       default: 'gray'
-    },
-    ...baseProps
+    }
   },
   computed: {
     colorMode () {
diff --git a/packages/chakra-ui-core/src/Button/Button.js b/packages/chakra-ui-core/src/Button/Button.js
index 0d9b45f2..970846af 100644
--- a/packages/chakra-ui-core/src/Button/Button.js
+++ b/packages/chakra-ui-core/src/Button/Button.js
@@ -1,4 +1,3 @@
-import styleProps from '../config/props'
 import { buttonProps } from './button.props'
 import { forwardProps } from '../utils'
 import createButtonStyles, { setIconSizes } from './button.styles'
@@ -12,14 +11,14 @@ import Icon from '../Icon'
  */
 const ButtonIcon = {
   name: 'ButtonIcon',
+  extends: Box,
   props: {
     icon: {
       type: [String, Object]
     },
     size: {
       type: [String, Number]
-    },
-    ...styleProps
+    }
   },
   render (h) {
     if (typeof this.icon === 'string') {
@@ -54,10 +53,10 @@ const ButtonIcon = {
  */
 export default {
   name: 'Button',
+  extends: PseudoBox,
   inject: ['$theme', '$colorMode'],
   props: {
     ...buttonProps,
-    ...styleProps,
     to: [String, Object]
   },
   computed: {
diff --git a/packages/chakra-ui-core/src/Button/Button.stories.js b/packages/chakra-ui-core/src/Button/Button.stories.js
index f0018d88..5da2b786 100644
--- a/packages/chakra-ui-core/src/Button/Button.stories.js
+++ b/packages/chakra-ui-core/src/Button/Button.stories.js
@@ -74,7 +74,7 @@ storiesOf('UI | Button', module)
           this.loading = false
           this.buttonText = 'Success'
           this.variantColor = 'green'
-        }, 1500)
+        }, 60000)
       }
     }
   }))
diff --git a/packages/chakra-ui-core/src/Button/button.props.js b/packages/chakra-ui-core/src/Button/button.props.js
index 28a3f92d..1326344c 100644
--- a/packages/chakra-ui-core/src/Button/button.props.js
+++ b/packages/chakra-ui-core/src/Button/button.props.js
@@ -56,7 +56,7 @@ export const buttonProps = {
     type: String,
     default: null
   },
-  rounded: {
+  isRounded: {
     type: Boolean,
     default: false
   },
diff --git a/packages/chakra-ui-core/src/ButtonGroup/ButtonGroup.js b/packages/chakra-ui-core/src/ButtonGroup/ButtonGroup.js
index d1b0ca39..da95ec4a 100644
--- a/packages/chakra-ui-core/src/ButtonGroup/ButtonGroup.js
+++ b/packages/chakra-ui-core/src/ButtonGroup/ButtonGroup.js
@@ -1,9 +1,9 @@
 import Box from '../Box'
-import { baseProps } from '../config/props'
 import { forwardProps } from '../utils'
 
 const ButtonGroup = {
   name: 'ButtonGroup',
+  extends: Box,
   props: {
     size: [String, Array],
     variantColor: [String, Array],
@@ -12,8 +12,7 @@ const ButtonGroup = {
     spacing: {
       type: [Number, Array, String],
       default: 2
-    },
-    ...baseProps
+    }
   },
   render (h) {
     const children = this.$slots.default.filter(e => e.tag)
diff --git a/packages/chakra-ui-core/src/Checkbox/Checkbox.js b/packages/chakra-ui-core/src/Checkbox/Checkbox.js
index b7471a1e..d54d0180 100644
--- a/packages/chakra-ui-core/src/Checkbox/Checkbox.js
+++ b/packages/chakra-ui-core/src/Checkbox/Checkbox.js
@@ -1,6 +1,5 @@
 import { StringNumber, StringArray } from '../config/props/props.types'
-import { baseProps } from '../config'
-import { useVariantColorWarning, useId } from '../utils'
+import { useVariantColorWarning, useId, forwardProps } from '../utils'
 import useCheckboxStyle from './checkbox.styles'
 import Box from '../Box'
 import VisuallyHidden from '../VisuallyHidden'
@@ -10,12 +9,12 @@ import Icon from '../Icon'
 const Checkbox = {
   name: 'Checkbox',
   inject: ['$theme', '$colorMode'],
+  extends: Box,
   model: {
     prop: 'isChecked',
     event: 'change'
   },
   props: {
-    ...baseProps,
     id: String,
     name: String,
     value: [String, Boolean],
@@ -77,7 +76,7 @@ const Checkbox = {
 
     return h(Box, {
       props: {
-        ...this.$props,
+        ...forwardProps(this.$props),
         as: 'label',
         display: 'inline-flex',
         verticalAlign: 'top',
diff --git a/packages/chakra-ui-core/src/Checkbox/tests/__snapshots__/Checkbox.test.js.snap b/packages/chakra-ui-core/src/Checkbox/tests/__snapshots__/Checkbox.test.js.snap
index 2acf87ba..afebb2d7 100644
--- a/packages/chakra-ui-core/src/Checkbox/tests/__snapshots__/Checkbox.test.js.snap
+++ b/packages/chakra-ui-core/src/Checkbox/tests/__snapshots__/Checkbox.test.js.snap
@@ -17,7 +17,7 @@ exports[`should render correctly 1`] = `
       class="css-1ra3zj0 css-xkdust"
     >
       <svg
-        class="css-1dx9t0m css-y3asau"
+        class="css-1m35dd5 css-y3asau"
         role="presentation"
         viewBox="0 0 24 24"
       >
diff --git a/packages/chakra-ui-core/src/CheckboxGroup/CheckboxGroup.js b/packages/chakra-ui-core/src/CheckboxGroup/CheckboxGroup.js
index a9aaedfc..80e246be 100644
--- a/packages/chakra-ui-core/src/CheckboxGroup/CheckboxGroup.js
+++ b/packages/chakra-ui-core/src/CheckboxGroup/CheckboxGroup.js
@@ -1,16 +1,15 @@
 import { SNA } from '../config/props/props.types'
-import { baseProps } from '../config'
 import Box from '../Box'
 import { isDef, useId, cleanChildren, cloneVNodeElement, forwardProps } from '../utils'
 
 const CheckboxGroup = {
   name: 'CheckboxGroup',
+  extends: Box,
   model: {
     prop: 'value',
     event: 'change'
   },
   props: {
-    ...baseProps,
     name: String,
     variantColor: String,
     size: String,
diff --git a/packages/chakra-ui-core/src/CheckboxGroup/tests/__snapshots__/CheckboxGroup.test.js.snap b/packages/chakra-ui-core/src/CheckboxGroup/tests/__snapshots__/CheckboxGroup.test.js.snap
index 89661248..93490894 100644
--- a/packages/chakra-ui-core/src/CheckboxGroup/tests/__snapshots__/CheckboxGroup.test.js.snap
+++ b/packages/chakra-ui-core/src/CheckboxGroup/tests/__snapshots__/CheckboxGroup.test.js.snap
@@ -29,7 +29,7 @@ exports[`should render correctly 1`] = `
             class="css-1ra3zj0 css-hpvc67"
           >
             <svg
-              class="css-1dx9t0m css-y3asau"
+              class="css-1m35dd5 css-y3asau"
               role="presentation"
               viewBox="0 0 24 24"
             >
@@ -97,7 +97,7 @@ exports[`should render correctly 1`] = `
             class="css-1ra3zj0 css-hpvc67"
           >
             <svg
-              class="css-1dx9t0m css-y3asau"
+              class="css-1m35dd5 css-y3asau"
               role="presentation"
               viewBox="0 0 24 24"
             >
@@ -164,7 +164,7 @@ exports[`should render correctly 1`] = `
             class="css-1ra3zj0 css-hpvc67"
           >
             <svg
-              class="css-1dx9t0m css-y3asau"
+              class="css-1m35dd5 css-y3asau"
               role="presentation"
               viewBox="0 0 24 24"
             >
diff --git a/packages/chakra-ui-core/src/CircularProgress/CircularProgress.js b/packages/chakra-ui-core/src/CircularProgress/CircularProgress.js
index 6f3189b6..afaaeb57 100644
--- a/packages/chakra-ui-core/src/CircularProgress/CircularProgress.js
+++ b/packages/chakra-ui-core/src/CircularProgress/CircularProgress.js
@@ -1,11 +1,10 @@
 import Box from '../Box'
-import { baseProps } from '../config/props'
 import { forwardProps } from '../utils'
 import { getComputedProps } from './circularprogress.styles'
 
 const CircularProgressLabel = {
   name: 'CircularProgressLabel',
-  props: baseProps,
+  extends: Box,
   render (h) {
     return h(Box, {
       style: {
@@ -27,6 +26,7 @@ const CircularProgressLabel = {
 const CircularProgress = {
   name: 'CircularProgress',
   inject: ['$colorMode'],
+  extends: Box,
   computed: {
     colorMode () {
       return this.$colorMode()
@@ -67,8 +67,7 @@ const CircularProgress = {
     color: {
       type: String,
       default: 'blue'
-    },
-    ...baseProps
+    }
   },
   render (h) {
     const _trackColor = { light: `${this.trackColor}.100`, dark: 'whiteAlpha.300' }
diff --git a/packages/chakra-ui-core/src/CircularProgress/tests/__snapshots__/CircularProgress.test.js.snap b/packages/chakra-ui-core/src/CircularProgress/tests/__snapshots__/CircularProgress.test.js.snap
index 195b27a5..6df4a4e8 100644
--- a/packages/chakra-ui-core/src/CircularProgress/tests/__snapshots__/CircularProgress.test.js.snap
+++ b/packages/chakra-ui-core/src/CircularProgress/tests/__snapshots__/CircularProgress.test.js.snap
@@ -6,7 +6,7 @@ exports[`should render correctly 1`] = `
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="40"
-    class="css-xqz7ss"
+    class="css-12d21aj"
     data-testid="CircularProgress"
     role="progressbar"
   >
@@ -24,7 +24,7 @@ exports[`should render correctly 1`] = `
         stroke-width="11.111111111111112"
       />
       <circle
-        class="css-1h10kks"
+        class="css-19r75gt"
         cx="111.11111111111111"
         cy="111.11111111111111"
         r="50"
diff --git a/packages/chakra-ui-core/src/CloseButton/CloseButton.js b/packages/chakra-ui-core/src/CloseButton/CloseButton.js
index 95fa8474..ef3ac946 100644
--- a/packages/chakra-ui-core/src/CloseButton/CloseButton.js
+++ b/packages/chakra-ui-core/src/CloseButton/CloseButton.js
@@ -1,6 +1,5 @@
 import Icon from '../Icon'
 import PseudoBox from '../PseudoBox'
-import styleProps from '../config/props'
 import { forwardProps } from '../utils'
 
 const baseProps = {
@@ -40,6 +39,7 @@ const sizes = {
 export default {
   name: 'CloseButton',
   inject: ['$theme', '$colorMode'],
+  extends: PseudoBox,
   props: {
     size: {
       type: String,
@@ -57,8 +57,7 @@ export default {
     _ariaLabel: {
       type: String,
       default: 'Close'
-    },
-    ...styleProps
+    }
   },
   render (h) {
     // Pseudo styles
@@ -71,6 +70,7 @@ export default {
 
     return h(PseudoBox, {
       props: {
+        ...forwardProps(this.$props),
         as: 'button',
         outline: 'none',
         h: buttonSize,
@@ -79,8 +79,8 @@ export default {
         cursor: 'pointer',
         _hover: { bg: hoverColor[this.colorMode] },
         _active: { bg: activeColor[this.colorMode] },
-        ...baseProps,
-        ...forwardProps(this.$props)
+        _focus: { shadow: 'outline' },
+        ...baseProps
       },
       nativeOn: {
         click: ($e) => {
diff --git a/packages/chakra-ui-core/src/CloseButton/tests/__snapshots__/CloseButton.test.js.snap b/packages/chakra-ui-core/src/CloseButton/tests/__snapshots__/CloseButton.test.js.snap
index 6a47beff..87ba85dd 100644
--- a/packages/chakra-ui-core/src/CloseButton/tests/__snapshots__/CloseButton.test.js.snap
+++ b/packages/chakra-ui-core/src/CloseButton/tests/__snapshots__/CloseButton.test.js.snap
@@ -4,11 +4,11 @@ exports[`should render correctly 1`] = `
 <DocumentFragment>
   <button
     aria-label="Close"
-    class="css-0 css-12btrym"
+    class="css-0 css-1bblaem"
   >
     <svg
       aria-hidden="true"
-      class="css-xmst1h css-y3asau"
+      class="css-1223ctv css-y3asau"
       role="presentation"
       viewBox="0 0 24 24"
     >
diff --git a/packages/chakra-ui-core/src/Code/Code.js b/packages/chakra-ui-core/src/Code/Code.js
index 3e47c346..f605f0e3 100644
--- a/packages/chakra-ui-core/src/Code/Code.js
+++ b/packages/chakra-ui-core/src/Code/Code.js
@@ -1,17 +1,16 @@
 import Box from '../Box'
 import useBadgeStyle from '../Badge/badge.styles'
 import { useVariantColorWarning, forwardProps } from '../utils'
-import { baseProps } from '../config/props'
 
 const Code = {
   name: 'Code',
   inject: ['$theme', '$colorMode'],
+  extends: Box,
   props: {
     variantColor: {
       type: String,
       default: 'gray'
-    },
-    ...baseProps
+    }
   },
   computed: {
     theme () {
@@ -33,14 +32,14 @@ const Code = {
   render (h) {
     return h(Box, {
       props: {
-        as: 'code',
         display: 'inline-block',
         fontFamily: 'mono',
         fontSize: 'sm',
         px: '0.2em',
         rounded: 'sm',
         ...this.badgeStyle,
-        ...forwardProps(this.$props)
+        ...forwardProps(this.$props),
+        as: 'code'
       }
     }, this.$slots.default)
   }
diff --git a/packages/chakra-ui-core/src/Divider/Divider.js b/packages/chakra-ui-core/src/Divider/Divider.js
index 1e4f4130..8497f157 100644
--- a/packages/chakra-ui-core/src/Divider/Divider.js
+++ b/packages/chakra-ui-core/src/Divider/Divider.js
@@ -1,11 +1,10 @@
 import Box from '../Box'
-import { baseProps } from '../config/props'
 import { forwardProps } from '../utils'
 
 const Divider = {
   name: 'Divider',
+  extends: Box,
   props: {
-    ...baseProps,
     orientation: {
       type: String,
       default: 'horizontal'
diff --git a/packages/chakra-ui-core/src/Drawer/Drawer.stories.js b/packages/chakra-ui-core/src/Drawer/Drawer.stories.js
index f8e2902d..e0712a95 100644
--- a/packages/chakra-ui-core/src/Drawer/Drawer.stories.js
+++ b/packages/chakra-ui-core/src/Drawer/Drawer.stories.js
@@ -17,17 +17,17 @@ storiesOf('UI | Drawer', module)
         <Drawer :isOpen="isOpen" placement="right" :on-close="close" :initialFocusRef="()=>$refs.inputInsideModal">
             <DrawerOverlay />
             <DrawerContent>
-            <DrawerCloseButton />
-            <DrawerHeader>Create your account</DrawerHeader>
+              <DrawerCloseButton />
+              <DrawerHeader>Create your account</DrawerHeader>
 
-            <DrawerBody>
-                <Input ref="inputInsideModal" placeholder="Type here..." />
-            </DrawerBody>
+              <DrawerBody>
+                  <Input ref="inputInsideModal" placeholder="Type here..." />
+              </DrawerBody>
 
-            <DrawerFooter>
-                <Button variant="outline" mr="3" @click="isOpen = false">Cancel</Button>
-                <Button color="blue">Save</Button>
-            </DrawerFooter>
+              <DrawerFooter>
+                  <Button variant="outline" mr="3" @click="isOpen = false">Cancel</Button>
+                  <Button color="blue">Save</Button>
+              </DrawerFooter>
             </DrawerContent>
         </Drawer>
     </Fragment>
diff --git a/packages/chakra-ui-core/src/Drawer/tests/Drawer.test.js b/packages/chakra-ui-core/src/Drawer/tests/Drawer.test.js
index f7f7d799..0efcef37 100644
--- a/packages/chakra-ui-core/src/Drawer/tests/Drawer.test.js
+++ b/packages/chakra-ui-core/src/Drawer/tests/Drawer.test.js
@@ -30,17 +30,17 @@ const renderComponent = (props) => {
         <Drawer placement="right" ${inlineAttrs}>
             <DrawerOverlay />
             <DrawerContent data-testid="overlay">
-            <DrawerCloseButton data-testid="close-btn" />
-            <DrawerHeader>Create your account</DrawerHeader>
+              <DrawerCloseButton data-testid="close-btn" />
+              <DrawerHeader>Create your account</DrawerHeader>
 
-            <DrawerBody>
-                <Input data-testid="inputInsideDrawer" ref="inputInsideDrawer" placeholder="Type here..." />
-            </DrawerBody>
+              <DrawerBody>
+                  <Input data-testid="inputInsideDrawer" ref="inputInsideDrawer" placeholder="Type here..." />
+              </DrawerBody>
 
-            <DrawerFooter>
-                <Button variant="outline" mr="3" @click="isOpen = false">Cancel</Button>
-                <Button color="blue">Save</Button>
-            </DrawerFooter>
+              <DrawerFooter>
+                  <Button variant="outline" mr="3" @click="isOpen = false">Cancel</Button>
+                  <Button color="blue">Save</Button>
+              </DrawerFooter>
             </DrawerContent>
         </Drawer>
     </div>
diff --git a/packages/chakra-ui-core/src/Drawer/tests/__snapshots__/Drawer.test.js.snap b/packages/chakra-ui-core/src/Drawer/tests/__snapshots__/Drawer.test.js.snap
index 29e87f5c..fafe921f 100644
--- a/packages/chakra-ui-core/src/Drawer/tests/__snapshots__/Drawer.test.js.snap
+++ b/packages/chakra-ui-core/src/Drawer/tests/__snapshots__/Drawer.test.js.snap
@@ -49,13 +49,13 @@ exports[`should render correctly 1`] = `
           >
             <button
               aria-label="Close"
-              class="css-0 css-1xo4iay"
+              class="css-0 css-9o9ciq"
               data-testid="close-btn"
               x-close-button=""
             >
               <svg
                 aria-hidden="true"
-                class="css-xmst1h css-y3asau"
+                class="css-1223ctv css-y3asau"
                 role="presentation"
                 viewBox="0 0 24 24"
               >
diff --git a/packages/chakra-ui-core/src/Editable/Editable.js b/packages/chakra-ui-core/src/Editable/Editable.js
index e7de9d03..41dec4e8 100644
--- a/packages/chakra-ui-core/src/Editable/Editable.js
+++ b/packages/chakra-ui-core/src/Editable/Editable.js
@@ -14,6 +14,9 @@ const sharedEditableProps = {
   mx: '-3px'
 }
 
+/**
+ * Compose with extend API to reduce bundle size
+ */
 const Editable = {
   name: 'Editable',
   props: {
diff --git a/packages/chakra-ui-core/src/Flex/Flex.js b/packages/chakra-ui-core/src/Flex/Flex.js
index 81e24339..90c16bc7 100644
--- a/packages/chakra-ui-core/src/Flex/Flex.js
+++ b/packages/chakra-ui-core/src/Flex/Flex.js
@@ -1,5 +1,4 @@
 import Box from '../Box'
-import { baseProps } from '../config/props'
 import { forwardProps } from '../utils'
 
 /**
@@ -7,14 +6,14 @@ import { forwardProps } from '../utils'
  */
 const Flex = {
   name: 'Flex',
+  extends: Box,
   props: {
     as: String,
     align: [String, Array],
     justify: [String, Array],
     wrap: [String, Array],
     direction: [String, Array],
-    size: [String, Array],
-    ...baseProps
+    size: [String, Array]
   },
   render (h) {
     return h(Box, {
diff --git a/packages/chakra-ui-core/src/FormControl/FormControl.js b/packages/chakra-ui-core/src/FormControl/FormControl.js
index f1ecc26e..815a881e 100644
--- a/packages/chakra-ui-core/src/FormControl/FormControl.js
+++ b/packages/chakra-ui-core/src/FormControl/FormControl.js
@@ -1,14 +1,11 @@
-import { baseProps } from '../config'
 import Box from '../Box'
 import { forwardProps } from '../utils'
 import { formControlProps } from './formcontrol.props'
 
 const FormControl = {
   name: 'FormControl',
-  props: {
-    ...baseProps,
-    ...formControlProps
-  },
+  extends: Box,
+  props: formControlProps,
   inject: {
     $FormControlContext: {
       default: null
diff --git a/packages/chakra-ui-core/src/FormErrorMessage/FormErrorMessage.js b/packages/chakra-ui-core/src/FormErrorMessage/FormErrorMessage.js
index 893dd860..e7f33984 100644
--- a/packages/chakra-ui-core/src/FormErrorMessage/FormErrorMessage.js
+++ b/packages/chakra-ui-core/src/FormErrorMessage/FormErrorMessage.js
@@ -1,4 +1,3 @@
-import { baseProps } from '../config'
 import { formControlProps } from '../FormControl/formcontrol.props'
 import Flex from '../Flex'
 import Icon from '../Icon'
@@ -8,8 +7,8 @@ import { forwardProps } from '../utils'
 const FormErrorMessage = {
   name: 'FormErrorMessage',
   inject: ['$colorMode', '$useFormControl'],
+  extends: Flex,
   props: {
-    ...baseProps,
     icon: {
       type: String,
       default: 'warning'
diff --git a/packages/chakra-ui-core/src/FormHelperText/FormHelperText.js b/packages/chakra-ui-core/src/FormHelperText/FormHelperText.js
index 29d059f3..8ea06f19 100644
--- a/packages/chakra-ui-core/src/FormHelperText/FormHelperText.js
+++ b/packages/chakra-ui-core/src/FormHelperText/FormHelperText.js
@@ -1,11 +1,10 @@
 import Text from '../Text'
-import { baseProps } from '../config'
 import { forwardProps } from '../utils'
 
 const FormHelperText = {
   name: 'FormHelperText',
   inject: ['$useFormControl', '$colorMode'],
-  props: baseProps,
+  extends: Text,
   computed: {
     formControl () {
       return this.$useFormControl(this.$props)
diff --git a/packages/chakra-ui-core/src/FormLabel/FormLabel.js b/packages/chakra-ui-core/src/FormLabel/FormLabel.js
index ab3febbf..7076cbfe 100644
--- a/packages/chakra-ui-core/src/FormLabel/FormLabel.js
+++ b/packages/chakra-ui-core/src/FormLabel/FormLabel.js
@@ -1,5 +1,4 @@
 import Box from '../Box'
-import { baseProps } from '../config'
 import { forwardProps } from '../utils'
 import { formControlProps } from '../FormControl/formcontrol.props'
 
@@ -32,10 +31,8 @@ const RequiredIndicator = {
 const FormLabel = {
   name: 'FormLabel',
   inject: ['$useFormControl'],
-  props: {
-    ...baseProps,
-    ...formControlProps
-  },
+  extends: Box,
+  props: formControlProps,
   computed: {
     formControlProps () {
       return {
@@ -52,7 +49,6 @@ const FormLabel = {
   render (h) {
     return h(Box, {
       props: {
-        as: 'label',
         fontSize: 'md',
         pr: '12px',
         pb: '4px',
@@ -61,7 +57,8 @@ const FormLabel = {
         textAlign: 'left',
         verticalAlign: 'middle',
         display: 'inline-block',
-        ...forwardProps(this.$props)
+        ...forwardProps(this.$props),
+        as: 'label'
       }
     }, [
       ...this.$slots.default,
diff --git a/packages/chakra-ui-core/src/Grid/Grid.js b/packages/chakra-ui-core/src/Grid/Grid.js
index eab8565e..08ad903d 100644
--- a/packages/chakra-ui-core/src/Grid/Grid.js
+++ b/packages/chakra-ui-core/src/Grid/Grid.js
@@ -1,10 +1,10 @@
 import Box from '../Box'
-import { baseProps } from '../config/props'
 import { forwardProps } from '../utils'
 import { SNA } from '../config/props/props.types'
 
 const Grid = {
   name: 'Grid',
+  extends: Box,
   props: {
     gap: SNA,
     rowGap: SNA,
@@ -17,8 +17,7 @@ const Grid = {
     templateAreas: SNA,
     area: SNA,
     column: SNA,
-    row: SNA,
-    ...baseProps
+    row: SNA
   },
   render (h) {
     return h(Box, {
diff --git a/packages/chakra-ui-core/src/Heading/Heading.js b/packages/chakra-ui-core/src/Heading/Heading.js
index c2981f2b..19455fbf 100644
--- a/packages/chakra-ui-core/src/Heading/Heading.js
+++ b/packages/chakra-ui-core/src/Heading/Heading.js
@@ -1,5 +1,4 @@
 import Box from '../Box'
-import { baseProps } from '../config/props'
 import { forwardProps } from '../utils'
 
 const sizes = {
@@ -16,6 +15,7 @@ const sizes = {
  */
 const Heading = {
   name: 'Heading',
+  extends: Box,
   props: {
     size: {
       type: [String, Array, Object],
@@ -24,8 +24,7 @@ const Heading = {
     as: {
       type: String,
       default: 'h1'
-    },
-    ...baseProps
+    }
   },
   render (h) {
     return h(Box, {
diff --git a/packages/chakra-ui-core/src/Icon/Icon.js b/packages/chakra-ui-core/src/Icon/Icon.js
index cdd96432..2aa875a5 100644
--- a/packages/chakra-ui-core/src/Icon/Icon.js
+++ b/packages/chakra-ui-core/src/Icon/Icon.js
@@ -2,17 +2,14 @@ import { css } from 'emotion'
 import Box from '../Box'
 import iconPaths from '../lib/internal-icons'
 import { forwardProps } from '../utils'
-import { baseProps } from '../config/props'
 import { iconProps } from './icon.props'
 
 const fallbackIcon = iconPaths['question-outline']
 
 const Svg = {
   name: 'IconSvg',
-  props: {
-    ...iconProps,
-    ...baseProps
-  },
+  extends: Box,
+  props: iconProps,
   render (h) {
     const className = css`
       flex-shrink: 0;
@@ -37,10 +34,8 @@ const Svg = {
 export default {
   name: 'Icon',
   inject: ['$theme', '$icons'],
-  props: {
-    ...iconProps,
-    ...baseProps
-  },
+  extends: Svg,
+  props: iconProps,
   render (h) {
     let icon, viewBox
     if (this.name) {
@@ -57,13 +52,13 @@ export default {
 
     return h(Svg, {
       props: {
+        ...forwardProps(this.$props),
         as: 'svg',
         w: this.size,
         h: this.size,
         color: this.color,
         d: 'inline-block',
-        verticalAlign: 'middle',
-        ...forwardProps(this.$props)
+        verticalAlign: 'middle'
       },
       attrs: {
         viewBox,
diff --git a/packages/chakra-ui-core/src/Icon/tests/__snapshots__/Icon.test.js.snap b/packages/chakra-ui-core/src/Icon/tests/__snapshots__/Icon.test.js.snap
index 86f6fcf7..9951eaee 100644
--- a/packages/chakra-ui-core/src/Icon/tests/__snapshots__/Icon.test.js.snap
+++ b/packages/chakra-ui-core/src/Icon/tests/__snapshots__/Icon.test.js.snap
@@ -3,7 +3,7 @@
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <svg
-    class="css-3vopgu css-y3asau"
+    class="css-1obnbes css-y3asau"
     role="presentation"
     viewBox="0 0 24 24"
   >
diff --git a/packages/chakra-ui-core/src/IconButton/IconButton.js b/packages/chakra-ui-core/src/IconButton/IconButton.js
index d323b058..c7e58a4d 100644
--- a/packages/chakra-ui-core/src/IconButton/IconButton.js
+++ b/packages/chakra-ui-core/src/IconButton/IconButton.js
@@ -1,9 +1,7 @@
 import Button from '../Button'
 import Icon from '../Icon'
 import Box from '../Box'
-import styleProps from '../config/props'
 import { forwardProps } from '../utils'
-import { buttonProps } from '../Button/button.props'
 
 const baseStyles = {
   display: 'inline-flex',
@@ -22,6 +20,7 @@ const baseStyles = {
 export default {
   name: 'IconButton',
   inject: ['$theme', '$colorMode'],
+  extends: Button,
   props: {
     icon: {
       type: [String]
@@ -31,9 +30,7 @@ export default {
     },
     _ariaLabel: {
       type: [String]
-    },
-    ...buttonProps,
-    ...styleProps
+    }
   },
   render (h) {
     const { isFullWidth, leftIcon, rightIcon, loadingText, ...props } = this.$props
diff --git a/packages/chakra-ui-core/src/Image/Image.js b/packages/chakra-ui-core/src/Image/Image.js
index 83328656..fb2439aa 100644
--- a/packages/chakra-ui-core/src/Image/Image.js
+++ b/packages/chakra-ui-core/src/Image/Image.js
@@ -1,12 +1,11 @@
-import { baseProps } from '../config/props'
 import Box from '../Box'
 import NoSsr from '../NoSsr'
 import { forwardProps } from '../utils'
 
 const Image = {
   name: 'CImage',
+  extends: Box,
   props: {
-    ...baseProps,
     src: String,
     fallbackSrc: String,
     ignoreFalback: Boolean,
diff --git a/packages/chakra-ui-core/src/Input/Input.js b/packages/chakra-ui-core/src/Input/Input.js
index dba76a1c..fb5aaace 100644
--- a/packages/chakra-ui-core/src/Input/Input.js
+++ b/packages/chakra-ui-core/src/Input/Input.js
@@ -1,4 +1,3 @@
-import styleProps from '../config/props'
 import PseudoBox from '../PseudoBox'
 import useInputStyle from './input.styles'
 import { forwardProps } from '../utils'
@@ -19,14 +18,12 @@ const Input = {
       default: null
     }
   },
+  extends: PseudoBox,
   model: {
     prop: 'value',
     event: 'input'
   },
-  props: {
-    ...styleProps,
-    ...inputProps
-  },
+  props: inputProps,
   computed: {
     colorMode () {
       return this.$colorMode()
diff --git a/packages/chakra-ui-core/src/InputGroup/InputGroup.js b/packages/chakra-ui-core/src/InputGroup/InputGroup.js
index 149953fb..1e99dbac 100644
--- a/packages/chakra-ui-core/src/InputGroup/InputGroup.js
+++ b/packages/chakra-ui-core/src/InputGroup/InputGroup.js
@@ -1,5 +1,4 @@
 import { StringArray } from '../config/props/props.types'
-import { baseProps } from '../config'
 import { inputSizes } from '../Input/input.styles'
 import Box from '../Box'
 import { cloneVNode, forwardProps } from '../utils'
@@ -8,9 +7,9 @@ import Input from '../Input'
 
 const InputGroup = {
   name: 'InputGroup',
+  extends: Box,
   inject: ['$theme'],
   props: {
-    ...baseProps,
     size: {
       type: StringArray,
       default: 'md'
diff --git a/packages/chakra-ui-core/src/Link/Link.js b/packages/chakra-ui-core/src/Link/Link.js
index 9624c750..71e1a175 100644
--- a/packages/chakra-ui-core/src/Link/Link.js
+++ b/packages/chakra-ui-core/src/Link/Link.js
@@ -1,15 +1,10 @@
-import styleProps from '../config/props'
 import PseudoBox from '../PseudoBox'
 import { forwardProps, kebabify } from '../utils'
 import { SNA } from '../config/props/props.types'
 
-/**
- * Issue:
- * - Text decoration on hover not working. Problem source could be with styled components internally
- */
-
 const Link = {
   name: 'Link',
+  extends: PseudoBox,
   props: {
     as: {
       type: String,
@@ -17,8 +12,7 @@ const Link = {
     },
     to: SNA,
     isDisabled: Boolean,
-    isExternal: Boolean,
-    ...styleProps
+    isExternal: Boolean
   },
   computed: {
     isRouterLink () {
diff --git a/packages/chakra-ui-core/src/List/List.js b/packages/chakra-ui-core/src/List/List.js
index ea8fff8a..2cb7b467 100644
--- a/packages/chakra-ui-core/src/List/List.js
+++ b/packages/chakra-ui-core/src/List/List.js
@@ -1,15 +1,13 @@
-import { baseProps } from '../config'
 import Box from '../Box'
 import PseudoBox from '../PseudoBox'
 import Icon from '../Icon'
 import { cleanChildren, isDef, cloneVNodeElement, forwardProps } from '../utils'
 import { SNA } from '../config/props/props.types'
-import styleProps from '../config/props'
 
 const List = {
   name: 'List',
+  extends: Box,
   props: {
-    ...baseProps,
     styleType: {
       type: String,
       default: 'none'
@@ -54,8 +52,8 @@ const List = {
 
 const ListItem = {
   name: 'ListItem',
+  extends: PseudoBox,
   props: {
-    ...styleProps,
     spacing: SNA
   },
   render (h) {
@@ -70,8 +68,8 @@ const ListItem = {
 
 const ListIcon = {
   name: 'ListIcon',
+  extends: Box,
   props: {
-    ...baseProps,
     icon: String
   },
   render (h) {
diff --git a/packages/chakra-ui-core/src/Menu/Menu.js b/packages/chakra-ui-core/src/Menu/Menu.js
index 17d9021a..eeba2a92 100644
--- a/packages/chakra-ui-core/src/Menu/Menu.js
+++ b/packages/chakra-ui-core/src/Menu/Menu.js
@@ -1,8 +1,6 @@
 // eslint-disable-next-line
 import { useId, getFocusables, canUseDOM, forwardProps } from '../utils'
-import styleProps, { baseProps } from '../config/props'
 import Button from '../Button'
-import { buttonProps } from '../Button/button.props'
 import { useMenuListStyle, useMenuItemStyle } from './menu.styles'
 import { Popper } from '../Popper'
 import Text from '../Text'
@@ -30,8 +28,7 @@ const menuProps = {
     default: true
   },
   defaultActiveIndex: Number,
-  placement: String,
-  ...baseProps
+  placement: String
 }
 
 const Menu = {
@@ -224,10 +221,7 @@ const Menu = {
 const MenuButton = {
   name: 'MenuButton',
   inject: ['$MenuContext'],
-  props: {
-    ...buttonProps,
-    ...styleProps
-  },
+  extends: Button,
   computed: {
     context () {
       return this.$MenuContext()
@@ -278,7 +272,7 @@ const MenuButton = {
 
 const MenuList = {
   name: 'MenuList',
-  props: styleProps,
+  extends: Popper,
   inject: ['$MenuContext', '$colorMode'],
   computed: {
     context () {
@@ -384,8 +378,8 @@ const MenuList = {
 const MenuItem = {
   name: 'MenuItem',
   inject: ['$MenuContext', '$theme', '$colorMode'],
+  extends: PseudoBox,
   props: {
-    ...styleProps,
     isDisabled: Boolean,
     role: {
       type: String,
@@ -476,7 +470,7 @@ const MenuItem = {
 
 const MenuDivider = {
   name: 'MenuDivider',
-  props: baseProps,
+  extends: Divider,
   render (h) {
     return h(Divider, {
       props: {
@@ -490,9 +484,9 @@ const MenuDivider = {
 
 const MenuGroup = {
   name: 'MenuGroup',
+  extends: Box,
   props: {
-    title: String,
-    ...baseProps
+    title: String
   },
   render (h) {
     return h(Box, {
diff --git a/packages/chakra-ui-core/src/Modal/tests/__snapshots__/Modal.test.js.snap b/packages/chakra-ui-core/src/Modal/tests/__snapshots__/Modal.test.js.snap
index a49945e3..afe6386f 100644
--- a/packages/chakra-ui-core/src/Modal/tests/__snapshots__/Modal.test.js.snap
+++ b/packages/chakra-ui-core/src/Modal/tests/__snapshots__/Modal.test.js.snap
@@ -49,13 +49,13 @@ exports[`should render correctly 1`] = `
           >
             <button
               aria-label="Close"
-              class="css-0 css-1hoaduj"
+              class="css-0 css-1jak3e0"
               data-testid="close-btn"
               x-close-button=""
             >
               <svg
                 aria-hidden="true"
-                class="css-xmst1h css-y3asau"
+                class="css-1223ctv css-y3asau"
                 role="presentation"
                 viewBox="0 0 24 24"
               >
diff --git a/packages/chakra-ui-core/src/NumberInput/NumberInput.js b/packages/chakra-ui-core/src/NumberInput/NumberInput.js
index 46f7f5a7..68bd1054 100644
--- a/packages/chakra-ui-core/src/NumberInput/NumberInput.js
+++ b/packages/chakra-ui-core/src/NumberInput/NumberInput.js
@@ -1,21 +1,18 @@
-import { baseProps } from '../config'
 import Flex from '../Flex'
-import styleProps from '../config/props'
 import Input from '../Input'
 import PseudoBox from '../PseudoBox'
 import Icon from '../Icon'
 import numberInputStyles from './numberinput.styles'
 import { isDef, useId, getElement, canUseDOM, wrapEvent } from '../utils'
 import { calculatePrecision, roundToPrecision, preventNonNumberKey } from './utils'
-import { inputProps } from '../Input/input.props'
 
 /**
  * NumberInput component
  */
 const NumberInput = {
   name: 'NumberInput',
+  extends: Flex,
   props: {
-    ...baseProps,
     value: Number,
     defaultValue: Number,
     focusInputOnChange: {
@@ -451,10 +448,7 @@ const NumberInputField = {
       return this.$NumberInputContext()
     }
   },
-  props: {
-    ...styleProps,
-    ...inputProps
-  },
+  extends: Input,
   render (h) {
     const { size, inputId, input: {
       value,
@@ -498,7 +492,7 @@ const NumberInputField = {
  */
 const NumberInputStepper = {
   name: 'NumberInputStepper',
-  props: baseProps,
+  extends: Flex,
   render (h) {
     return h(Flex, {
       props: {
@@ -521,7 +515,7 @@ const NumberInputStepper = {
 const StepperButton = {
   name: 'StepperButton',
   inject: ['$NumberInputContext', '$colorMode'],
-  props: styleProps,
+  extends: PseudoBox,
   computed: {
     context () {
       return this.$NumberInputContext()
@@ -560,7 +554,7 @@ const NumberIncrementStepper = {
       return this.$NumberInputContext()
     }
   },
-  props: styleProps,
+  extends: StepperButton,
   render (h) {
     const children = this.$slots.default ||
       [h(Icon, {
@@ -592,7 +586,7 @@ const NumberDecrementStepper = {
       return this.$NumberInputContext()
     }
   },
-  props: styleProps,
+  extends: StepperButton,
   render (h) {
     const children = this.$slots.default ||
       [h(Icon, {
diff --git a/packages/chakra-ui-core/src/Popover/Popover.js b/packages/chakra-ui-core/src/Popover/Popover.js
index a37961e3..9ad522a1 100644
--- a/packages/chakra-ui-core/src/Popover/Popover.js
+++ b/packages/chakra-ui-core/src/Popover/Popover.js
@@ -1,7 +1,6 @@
 import Fragment from '../Fragment'
 import { Popper, PopperArrow } from '../Popper'
 import { useId, cloneVNode, getElement, isVueComponent, forwardProps } from '../utils'
-import styleProps, { baseProps } from '../config/props'
 import Box from '../Box'
 import CloseButton from '../CloseButton'
 
@@ -334,8 +333,8 @@ const PopoverTrigger = {
 const PopoverContent = {
   name: 'PopoverContent',
   inject: ['$PopoverContext', '$colorMode'],
+  extends: Popper,
   props: {
-    ...styleProps,
     gutter: {
       type: [Number, String],
       default: 4
@@ -465,7 +464,7 @@ const PopoverContent = {
 const PopoverHeader = {
   name: 'PopoverHeader',
   inject: ['$PopoverContext'],
-  props: baseProps,
+  extends: Box,
   computed: {
     context () {
       return this.$PopoverContext()
@@ -492,7 +491,7 @@ const PopoverHeader = {
 
 const PopoverBody = {
   name: 'PopoverBody',
-  props: baseProps,
+  extends: Box,
   inject: ['$PopoverContext'],
   computed: {
     context () {
@@ -520,7 +519,7 @@ const PopoverBody = {
 
 const PopoverArrow = {
   name: 'PopoverArrow',
-  props: baseProps,
+  extends: PopperArrow,
   render (h) {
     return h(PopperArrow, {
       props: forwardProps(this.$props)
@@ -531,7 +530,7 @@ const PopoverArrow = {
 const PopoverCloseButton = {
   name: 'PopoverCloseButton',
   inject: ['$PopoverContext'],
-  props: styleProps,
+  extends: CloseButton,
   computed: {
     context () {
       return this.$PopoverContext()
@@ -560,7 +559,7 @@ const PopoverCloseButton = {
 
 const PopoverFooter = {
   name: 'PopoverFooter',
-  props: baseProps,
+  extends: Box,
   render (h) {
     return h(Box, {
       props: {
diff --git a/packages/chakra-ui-core/src/Popper/Popper.js b/packages/chakra-ui-core/src/Popper/Popper.js
index 570c1fbc..4fb08901 100644
--- a/packages/chakra-ui-core/src/Popper/Popper.js
+++ b/packages/chakra-ui-core/src/Popper/Popper.js
@@ -3,10 +3,13 @@ import PseudoBox from '../PseudoBox'
 import ClickOutside from '../ClickOutside'
 import Portal from '../Portal'
 import { createChainedFunction, forwardProps, isVueComponent, canUseDOM, useId, HTMLElement } from '../utils'
-import styleProps from '../config/props'
 import getPopperArrowStyle from './popper.styles'
 import Box from '../Box'
 
+/**
+ * TODO: Use Vue's extends API to debug Popper closeOnClickAway
+ */
+
 /**
  * Flips placement if in <body dir="rtl" />
  * @param {string} placement
@@ -36,6 +39,7 @@ function flipPlacement (placement) {
 
 const Popper = {
   name: 'Popper',
+  extends: PseudoBox,
   props: {
     _id: {
       type: String,
@@ -81,8 +85,7 @@ const Popper = {
       default: true
     },
     positionFixed: Boolean,
-    usePortalTarget: String,
-    ...styleProps
+    usePortalTarget: String
   },
   data () {
     return {
diff --git a/packages/chakra-ui-core/src/Progress/Progress.js b/packages/chakra-ui-core/src/Progress/Progress.js
index ec980677..2834a946 100644
--- a/packages/chakra-ui-core/src/Progress/Progress.js
+++ b/packages/chakra-ui-core/src/Progress/Progress.js
@@ -1,7 +1,6 @@
 import Box from '../Box'
 import { generateStripe, valueToPercent, forwardProps } from '../utils'
 import { css, keyframes } from 'emotion'
-import { baseProps } from '../config/props'
 
 const stripe = keyframes({
   from: { backgroundPosition: '1rem 0' },
@@ -20,7 +19,7 @@ const progressbarSizes = {
 
 const ProgressLabel = {
   name: 'ProgressLabel',
-  props: baseProps,
+  extends: Box,
   render (h) {
     return h(Box, {
       props: {
@@ -34,8 +33,8 @@ const ProgressLabel = {
 
 const ProgressTrack = {
   name: 'ProgressTrack',
+  extends: Box,
   props: {
-    ...baseProps,
     size: [String, Number, Array]
   },
   render (h) {
@@ -53,8 +52,8 @@ const ProgressTrack = {
 
 const ProgressIndicator = {
   name: 'ProgressIndicator',
+  extends: Box,
   props: {
-    ...baseProps,
     isIndeterminate: Boolean,
     min: Number,
     max: Number,
@@ -86,8 +85,8 @@ const ProgressIndicator = {
 const Progress = {
   name: 'Progress',
   inject: ['$colorMode'],
+  extends: Box,
   props: {
-    ...baseProps,
     color: {
       type: String,
       default: 'blue'
diff --git a/packages/chakra-ui-core/src/PseudoBox/PseudoBox.js b/packages/chakra-ui-core/src/PseudoBox/PseudoBox.js
index 35e0003c..0fbc70ea 100644
--- a/packages/chakra-ui-core/src/PseudoBox/PseudoBox.js
+++ b/packages/chakra-ui-core/src/PseudoBox/PseudoBox.js
@@ -2,7 +2,7 @@ import { css } from 'emotion'
 import __css from '@styled-system/css'
 import { background, border, color, borderRadius, flexbox, grid, layout, position, shadow, space, typography, compose } from 'styled-system'
 import Box from '../Box'
-import styleProps, { propsConfig } from '../config/props'
+import { propsConfig, pseudoProps } from '../config/props'
 import { parsePseudoStyles } from './utils'
 
 const systemProps = compose(
@@ -23,13 +23,14 @@ const systemProps = compose(
 const PseudoBox = {
   name: 'PseudoBox',
   inject: ['$theme'],
+  extends: Box,
   props: {
     as: {
       type: [String, Object],
       default: () => 'div'
     },
     to: [String, Object],
-    ...styleProps
+    ...pseudoProps
   },
   computed: {
     theme () {
diff --git a/packages/chakra-ui-core/src/Radio/Radio.js b/packages/chakra-ui-core/src/Radio/Radio.js
index 154f2ccd..7a4f77fc 100644
--- a/packages/chakra-ui-core/src/Radio/Radio.js
+++ b/packages/chakra-ui-core/src/Radio/Radio.js
@@ -1,4 +1,3 @@
-import styleProps from '../config/props'
 import { useVariantColorWarning, forwardProps } from '../utils'
 import useCheckboxStyle from '../Checkbox/checkbox.styles'
 import Box from '../Box'
@@ -8,8 +7,8 @@ import ControlBox from '../ControlBox'
 const Radio = {
   name: 'Radio',
   inject: ['$colorMode', '$theme'],
+  extends: ControlBox,
   props: {
-    ...styleProps,
     id: String,
     name: String,
     value: String,
@@ -89,9 +88,7 @@ const Radio = {
         props: {
           ...forwardProps(this.$props),
           ...this.radioStyles,
-          rounded: 'full'
-        },
-        attrs: {
+          rounded: 'full',
           type: 'radio'
         }
       }, [
diff --git a/packages/chakra-ui-core/src/RadioButtonGroup/RadioButtonGroup.js b/packages/chakra-ui-core/src/RadioButtonGroup/RadioButtonGroup.js
index 72962501..ae8a5663 100644
--- a/packages/chakra-ui-core/src/RadioButtonGroup/RadioButtonGroup.js
+++ b/packages/chakra-ui-core/src/RadioButtonGroup/RadioButtonGroup.js
@@ -1,12 +1,11 @@
 import Box from '../Box'
-import { baseProps } from '../config'
 import { StringNumber, SNA } from '../config/props/props.types'
 import { isDef, useId, cloneVNodeElement, forwardProps, cleanChildren } from '../utils'
 
 const RadioButtonGroup = {
   name: 'RadioButtonGroup',
+  extends: Box,
   props: {
-    ...baseProps,
     name: {
       type: String,
       default: `radio-${useId()}`
diff --git a/packages/chakra-ui-core/src/RadioGroup/RadioGroup.js b/packages/chakra-ui-core/src/RadioGroup/RadioGroup.js
index 8a4dcdf6..c2c2c1f9 100644
--- a/packages/chakra-ui-core/src/RadioGroup/RadioGroup.js
+++ b/packages/chakra-ui-core/src/RadioGroup/RadioGroup.js
@@ -1,12 +1,11 @@
 import Box from '../Box'
-import { baseProps } from '../config'
 import { StringNumber } from '../config/props/props.types'
 import { useId, cloneVNodeElement, forwardProps } from '../utils'
 
 const RadioGroup = {
   name: 'RadioGroup',
+  extends: Box,
   props: {
-    ...baseProps,
     name: {
       type: String,
       default: `radio-${useId()}`
diff --git a/packages/chakra-ui-core/src/Select/Select.js b/packages/chakra-ui-core/src/Select/Select.js
index 74d40564..6049706b 100644
--- a/packages/chakra-ui-core/src/Select/Select.js
+++ b/packages/chakra-ui-core/src/Select/Select.js
@@ -1,7 +1,4 @@
-import { baseProps } from '../config'
 import Box from '../Box'
-import styleProps from '../config/props'
-import { inputProps } from '../Input/input.props'
 import Input from '../Input'
 import splitProps from './select.utils'
 import Icon from '../Icon'
@@ -11,7 +8,7 @@ import Icon from '../Icon'
  */
 const SelectIconWrapper = {
   name: 'SelectIconWrapper',
-  props: baseProps,
+  extends: Box,
   render (h) {
     return h(Box, {
       props: {
@@ -34,9 +31,8 @@ const SelectIconWrapper = {
 
 const SelectInput = {
   name: 'SelectInput',
+  extends: Input,
   props: {
-    ...styleProps,
-    ...inputProps,
     placeholder: String,
     value: String
   },
@@ -74,9 +70,8 @@ const Select = {
     prop: 'value',
     event: 'change'
   },
+  extends: Input,
   props: {
-    ...styleProps,
-    ...inputProps,
     rootProps: {
       type: Object,
       default: () => ({})
diff --git a/packages/chakra-ui-core/src/SimpleGrid/SimpleGrid.js b/packages/chakra-ui-core/src/SimpleGrid/SimpleGrid.js
index 864743dd..32faaf34 100644
--- a/packages/chakra-ui-core/src/SimpleGrid/SimpleGrid.js
+++ b/packages/chakra-ui-core/src/SimpleGrid/SimpleGrid.js
@@ -1,16 +1,15 @@
 import Grid from '../Grid'
-import { baseProps } from '../config/props'
 import { countToColumns, widthToColumns } from './grid.styles'
 
 const SimpleGrid = {
   name: 'SimpleGrid',
+  extends: Grid,
   props: {
     columns: [String, Number, Array],
     spacingX: [String, Number, Array],
     spacingY: [String, Number, Array],
     spacing: [String, Number, Array],
-    minChildWidth: [String, Number, Array],
-    ...baseProps
+    minChildWidth: [String, Number, Array]
   },
   computed: {
     templateColumns () {
diff --git a/packages/chakra-ui-core/src/Slider/Slider.js b/packages/chakra-ui-core/src/Slider/Slider.js
index 6268cbf4..6ce1eb9f 100644
--- a/packages/chakra-ui-core/src/Slider/Slider.js
+++ b/packages/chakra-ui-core/src/Slider/Slider.js
@@ -1,17 +1,15 @@
-import { baseProps } from '../config'
 import { isDef, valueToPercent, useId, getElById, forwardProps } from '../utils'
 import { clampValue, roundValueToStep } from './slider.utils'
 import Box from '../Box'
 import useSliderStyle from './slider.styles'
 import { percentToValue } from '../utils/transform'
-import styleProps from '../config/props'
 import PseudoBox from '../PseudoBox'
 
 const Slider = {
   name: 'Slider',
   inject: ['$theme', '$colorMode'],
+  extends: Box,
   props: {
-    ...baseProps,
     value: Number,
     defaultValue: Number,
     isDisabled: Boolean,
@@ -300,7 +298,7 @@ const Slider = {
 const SliderTrack = {
   name: 'SliderTrack',
   inject: ['$SliderContext', '$theme', '$colorMode'],
-  props: baseProps,
+  extends: Box,
   computed: {
     context () {
       return this.$SliderContext()
@@ -342,7 +340,7 @@ const SliderTrack = {
 const SliderFilledTrack = {
   name: 'SliderFilledTrack',
   inject: ['$SliderContext', '$theme', '$colorMode'],
-  props: styleProps,
+  extends: PseudoBox,
   computed: {
     context () {
       return this.$SliderContext()
@@ -383,7 +381,7 @@ const SliderFilledTrack = {
 const SliderThumb = {
   name: 'SliderThumb',
   inject: ['$SliderContext', '$theme', '$colorMode'],
-  props: baseProps,
+  extends: Box,
   computed: {
     context () {
       return this.$SliderContext()
diff --git a/packages/chakra-ui-core/src/Spinner/Spinner.js b/packages/chakra-ui-core/src/Spinner/Spinner.js
index d29730d9..32d7bc62 100644
--- a/packages/chakra-ui-core/src/Spinner/Spinner.js
+++ b/packages/chakra-ui-core/src/Spinner/Spinner.js
@@ -1,5 +1,4 @@
 import { keyframes } from 'emotion'
-import { baseProps } from '../config/props'
 import { forwardProps } from '../utils'
 import Box from '../Box'
 import VisuallyHidden from '../VisuallyHidden'
@@ -49,6 +48,7 @@ const setSizes = (props) => {
 
 export default {
   name: 'Spinner',
+  extends: Box,
   props: {
     size: {
       type: [String, Array],
@@ -74,8 +74,7 @@ export default {
       type: [String, Array],
       default: 'transparent'
     },
-    forwardRef: Object,
-    ...baseProps
+    forwardRef: Object
   },
   render (h) {
     return h(Box, {
diff --git a/packages/chakra-ui-core/src/Stat/Stat.js b/packages/chakra-ui-core/src/Stat/Stat.js
index 0316d83a..b8f90988 100644
--- a/packages/chakra-ui-core/src/Stat/Stat.js
+++ b/packages/chakra-ui-core/src/Stat/Stat.js
@@ -71,8 +71,8 @@ const StatArrow = {
         mr: 1,
         size: '14px',
         verticalAlign: 'middle',
-        ...arrowOptions[this.type],
-        ...forwardProps(this.$props)
+        ...forwardProps(this.$props),
+        ...arrowOptions[this.type]
       }
     })
   }
diff --git a/packages/chakra-ui-core/src/Switch/Switch.js b/packages/chakra-ui-core/src/Switch/Switch.js
index c6a27d80..fd3c2b09 100644
--- a/packages/chakra-ui-core/src/Switch/Switch.js
+++ b/packages/chakra-ui-core/src/Switch/Switch.js
@@ -1,5 +1,4 @@
 import Box from '../Box'
-import styleProps from '../config/props'
 import { forwardProps } from '../utils'
 import VisuallyHidden from '../VisuallyHidden'
 import ControlBox from '../ControlBox'
@@ -21,13 +20,13 @@ const switchSizes = {
 
 const Switch = {
   name: 'CSwitch',
+  extends: Box,
   model: {
     prop: 'isChecked',
     event: 'change'
   },
   inject: ['$colorMode'],
   props: {
-    ...styleProps,
     id: String,
     name: String,
     value: Boolean,
diff --git a/packages/chakra-ui-core/src/Tabs/Tabs.js b/packages/chakra-ui-core/src/Tabs/Tabs.js
index d324464f..2c6bb42b 100644
--- a/packages/chakra-ui-core/src/Tabs/Tabs.js
+++ b/packages/chakra-ui-core/src/Tabs/Tabs.js
@@ -1,7 +1,5 @@
-import { baseProps } from '../config'
 import { useVariantColorWarning, isDef, useId, forwardProps, cleanChildren, cloneVNodeElement } from '../utils'
 import { useTabListStyle, useTabStyle } from './tabs.styles'
-import styleProps from '../config/props'
 import Flex from '../Flex'
 import Box from '../Box'
 import PseudoBox from '../PseudoBox'
@@ -9,8 +7,8 @@ import PseudoBox from '../PseudoBox'
 const Tabs = {
   name: 'Tabs',
   inject: ['$theme', '$colorMode'],
+  extends: Box,
   props: {
-    ...baseProps,
     index: Number,
     defaultIndex: Number,
     isManual: Boolean,
@@ -170,7 +168,7 @@ const Tabs = {
 
 const TabList = {
   name: 'TabList',
-  props: baseProps,
+  extends: Flex,
   inject: ['$TabContext', '$theme', '$colorMode'],
   data () {
     return {
@@ -319,8 +317,8 @@ const TabList = {
 const Tab = {
   name: 'Tab',
   inject: ['$theme', '$colorMode', '$TabContext'],
+  extends: PseudoBox,
   props: {
-    ...styleProps,
     isSelected: Boolean,
     isDisabled: Boolean,
     id: String
@@ -373,8 +371,8 @@ const Tab = {
 
 const TabPanel = {
   name: 'TabPanel',
+  extends: Box,
   props: {
-    ...baseProps,
     isSelected: Boolean,
     selectedPanelNode: Object,
     id: String
@@ -397,7 +395,7 @@ const TabPanel = {
 const TabPanels = {
   name: 'TabPanels',
   inject: ['$TabContext'],
-  props: baseProps,
+  extends: Box,
   computed: {
     context () {
       return this.$TabContext()
diff --git a/packages/chakra-ui-core/src/Tag/Tag.js b/packages/chakra-ui-core/src/Tag/Tag.js
index fe53331e..466823d3 100644
--- a/packages/chakra-ui-core/src/Tag/Tag.js
+++ b/packages/chakra-ui-core/src/Tag/Tag.js
@@ -1,4 +1,3 @@
-import styleProps, { baseProps } from '../config/props'
 import { css } from 'emotion'
 import PseudoBox from '../PseudoBox'
 import Icon from '../Icon'
@@ -28,8 +27,8 @@ const tagSizes = {
 
 const TagCloseButton = {
   name: 'TagCloseButton',
+  extends: PseudoBox,
   props: {
-    ...styleProps,
     isDisabled: Boolean
   },
   render (h) {
@@ -81,8 +80,8 @@ const TagCloseButton = {
 
 const TagIcon = {
   name: 'TagIcon',
+  extends: Box,
   props: {
-    ...baseProps,
     icon: [String, Object]
   },
   render (h) {
@@ -117,7 +116,7 @@ const TagIcon = {
 
 const TagLabel = {
   name: 'TagLabel',
-  props: baseProps,
+  extends: Box,
   render (h) {
     return h(Box, {
       ...forwardProps(this.$props),
@@ -131,8 +130,8 @@ const TagLabel = {
 const Tag = {
   name: 'Tag',
   inject: ['$theme', '$colorMode'],
+  extends: PseudoBox,
   props: {
-    ...styleProps,
     variant: {
       type: String,
       default: 'subtle'
diff --git a/packages/chakra-ui-core/src/Tag/tests/__snapshots__/Tag.test.js.snap b/packages/chakra-ui-core/src/Tag/tests/__snapshots__/Tag.test.js.snap
index 6432ee0d..6ee5de11 100644
--- a/packages/chakra-ui-core/src/Tag/tests/__snapshots__/Tag.test.js.snap
+++ b/packages/chakra-ui-core/src/Tag/tests/__snapshots__/Tag.test.js.snap
@@ -44,7 +44,7 @@ exports[`should display tag with right icon 1`] = `
       </div>
        
       <svg
-        class="css-10whti9 css-y3asau css-9r03b"
+        class="css-3xhelv css-y3asau css-9r03b"
         role="presentation"
         size="12px"
         viewBox="0 0 24 24"
@@ -98,7 +98,7 @@ exports[`should render correctly 1`] = `
       class="css-0 css-1mwiunl"
     >
       <svg
-        class="css-10whti9 css-y3asau css-9r03b"
+        class="css-3xhelv css-y3asau css-9r03b"
         role="presentation"
         size="12px"
         viewBox="0 0 24 24"
diff --git a/packages/chakra-ui-core/src/Text/Text.js b/packages/chakra-ui-core/src/Text/Text.js
index d2f3f5c6..4d89a724 100644
--- a/packages/chakra-ui-core/src/Text/Text.js
+++ b/packages/chakra-ui-core/src/Text/Text.js
@@ -5,6 +5,7 @@ import { baseProps } from '../config/props'
 export default {
   name: 'CText', // <-- Vue does not allow components to be registered using built-in or reserved HTML elements as component id: like "Text". So need to rename this.
   inject: ['$theme', '$colorMode'],
+  extends: Box,
   props: {
     as: {
       type: [String, Array],
diff --git a/packages/chakra-ui-core/src/Textarea/Textarea.js b/packages/chakra-ui-core/src/Textarea/Textarea.js
index 21d5d168..dfa00c56 100644
--- a/packages/chakra-ui-core/src/Textarea/Textarea.js
+++ b/packages/chakra-ui-core/src/Textarea/Textarea.js
@@ -1,5 +1,3 @@
-import styleProps from '../config/props'
-import { inputProps } from '../Input/input.props'
 import Input from '../Input'
 import { forwardProps } from '../utils'
 
@@ -9,9 +7,8 @@ const Textarea = {
     prop: 'inputValue',
     event: 'change'
   },
+  extends: Input,
   props: {
-    ...styleProps,
-    ...inputProps,
     inputValue: String
   },
   render (h) {
diff --git a/packages/chakra-ui-core/src/Toast/Toast.js b/packages/chakra-ui-core/src/Toast/Toast.js
index 942b9726..6c4e2f0d 100644
--- a/packages/chakra-ui-core/src/Toast/Toast.js
+++ b/packages/chakra-ui-core/src/Toast/Toast.js
@@ -3,7 +3,6 @@ import { Alert, AlertIcon, AlertTitle, AlertDescription } from '../Alert'
 import Box from '../Box'
 import CloseButton from '../CloseButton'
 import ThemeProvider from '../ThemeProvider'
-import { baseProps } from '../config/props'
 import { forwardProps } from '../utils'
 import ColorModeProvider from '../ColorModeProvider'
 import { colorModeObserver } from '../utils/color-mode-observer'
@@ -16,6 +15,7 @@ const breadstick = new Breadstick()
  */
 const Toast = {
   name: 'Toast',
+  extends: Alert,
   props: {
     status: {
       type: String,
@@ -43,8 +43,7 @@ const Toast = {
     description: {
       type: String,
       default: ''
-    },
-    ...baseProps
+    }
   },
   render (h) {
     return h(Alert, {
diff --git a/packages/chakra-ui-core/src/Tooltip/Tooltip.js b/packages/chakra-ui-core/src/Tooltip/Tooltip.js
index 28f78e7d..d048c3ed 100644
--- a/packages/chakra-ui-core/src/Tooltip/Tooltip.js
+++ b/packages/chakra-ui-core/src/Tooltip/Tooltip.js
@@ -2,7 +2,6 @@ import Fragment from '../Fragment'
 import VisuallyHidden from '../VisuallyHidden'
 import { Popper, PopperArrow } from '../Popper'
 import { cloneVNode, useId, forwardProps, wrapEvent } from '../utils'
-import { baseProps } from '../config/props'
 import Box from '../Box'
 
 const tooltipProps = {
@@ -27,14 +26,15 @@ const tooltipProps = {
   controlledIsOpen: Boolean,
   isControlled: Boolean,
   onOpen: Function,
-  onClose: Function,
-  ...baseProps
+  onClose: Function
 }
 
 // TODO: Add isControlled support.
 const Tooltip = {
   inject: ['$colorMode'],
   name: 'Tooltip',
+  extends: Box,
+  props: tooltipProps,
   data () {
     return {
       isOpen: this.isControlled ? this.controlledIsOpen : this.defaultIsOpen || false,
@@ -84,7 +84,6 @@ const Tooltip = {
       this.$emit('click')
     }
   },
-  props: tooltipProps,
   mounted () {
     // When component is mounted we force re-render because component
     // children may not yet be rendered so event listeners may not be
diff --git a/packages/chakra-ui-core/src/config/props/props.aliases.js b/packages/chakra-ui-core/src/config/props/props.aliases.js
index c9c6e078..59f7df4e 100644
--- a/packages/chakra-ui-core/src/config/props/props.aliases.js
+++ b/packages/chakra-ui-core/src/config/props/props.aliases.js
@@ -24,10 +24,10 @@ const aliases = {
   flexDir: 'flexDirection',
   shadow: 'boxShadow',
   b: 'border',
-  bl: 'border-left',
-  bt: 'border-top',
-  br: 'border-right',
-  bb: 'border-bottom',
+  bl: 'borderLeft',
+  bt: 'borderTop',
+  br: 'borderRight',
+  bb: 'borderBottom',
   bgAttachment: 'backgroundAttachment',
   textDecor: 'textDecoration',
   listStylePos: 'listStylePosition',
diff --git a/packages/chakra-ui-core/src/config/props/props.config.js b/packages/chakra-ui-core/src/config/props/props.config.js
index 7ce714cd..4b5702f7 100644
--- a/packages/chakra-ui-core/src/config/props/props.config.js
+++ b/packages/chakra-ui-core/src/config/props/props.config.js
@@ -98,19 +98,19 @@ export const config = {
     scale: 'borders'
   },
   bl: {
-    property: 'border-left',
+    property: 'borderLeft',
     scale: 'borders'
   },
   bt: {
-    property: 'border-top',
+    property: 'borderTop',
     scale: 'borders'
   },
   br: {
-    property: 'border-right',
+    property: 'borderRight',
     scale: 'borders'
   },
   bb: {
-    property: 'border-bottom',
+    property: 'borderBottom',
     scale: 'borders'
   },
   textDecoration: {