Timeline

Theming#

The Timeline 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#

• container
• item
• separator
• icon
• dot
• track
• content

Customize the theme#

import { extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  components: {
    SuiTimeline: {
      baseStyle: {
        label: {
          color: 'red.500',
        },
      },
    },
  },
}