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?