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?