Property

A component used to show key/value data in a consistent manner.

Theming

The Property component is a multipart component. The styling needs to be applied to each part specifically.

To learn more about styling multipart components, visit the Chakra UI Component Style page.

Anatomy

  • property
  • label
  • value

Default theme

import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'
import { propertyAnatomy } from '@saas-ui/theme/anatomy'
const { definePartsStyle, defineMultiStyleConfig } =
createMultiStyleConfigHelpers(propertyAnatomy.keys)
export const propertyTheme = defineMultiStyleConfig({
baseStyle: {
label: {
color: 'muted',
},
},
})

Customize the theme

import { extendTheme } from '@chakra-ui/react'
const theme = extendTheme({
components: {
SuiProperty: {
baseStyle: {
label: {
color: 'red.500',
},
},
},
},
}

Was this helpful?