All of Chakra UI's components are composed from two fundamental building block components - These are the CBox and CPseudoBox components.

The CBox component by default renders a div HTML element and accepts all style props (TODO: Link to style props page)

<!-- "p" and "mr" are shorthand for "padding" and "margin-right" -->
<c-box p="4" mr="4">
	I am a happy box :)
</c-box>

CPseudoBox component composes the CBox component and accepts also CSS Pseudo style props alongside the CBox base props.

CPseudoBox pseudo props are accepted in the form or an object .e.g. :_hover="{}", :_focus="{}"

<!-- "p" and "bg" are shorthand for "padding" and "background-color" -->
<c-pseudo-box
  p="4"
	:_hover="{
		bg: "blue.300",
		p: "5"
	}"
>
	You can hover over me to change my background color.
</c-pseudo-box>

Both the CBox and CPseudoBox can change the final element that is rendered by passing in the as prop. This can accept both and HTML element tag name or a Vue component.

<c-pseudo-box as="button">
	I am a pseudobox as a button.
</c-pseudo-box>

<c-pseudo-box :as="Badge">
	I am a pseudobox as a Badge component
</c-pseudo-box>

Extending Chakra components.

One of Vue's awesome super-powers is the ability to extend components for better composition. You can compose any of Chakra's components and customize them as your own using Vue's extends API or even just manually composing them with props.

<template>
	<c-box p="10">
		<slot />
	</c-box>
</template>

<script lang="js">
import { CBox } from '@chakra-ui/vue'

export default {
	name: 'CustomFatBox',
	extends: CBox, // Now `CustomFatBox` component inherits all of `CBox`'s props and props logic.
	components: {
		CBox
  }
}
</script>