Beacon

A pulsating beacon that attracts attention

Theming#

The Beacon component is a single part 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.

Customize the theme#

import { extendTheme } from '@chakra-ui/react'
import { theme as proTheme } from '@saas-ui-pro/react'

const theme = extendTheme(
  {
    components: {
      SuiBeacon: {
        baseStyle: {
          container: {
            bg: 'red.500',
            color: 'white',
            borderRadius: 'md',
            p: 4,
          },
        },
      },
    },
  },
  proTheme
)

Was this helpful?