Function: confetti()

function confetti(props?: ConfettiBlockProps): Element;

Defined in: src/UI/blocks/confetti.tsx:114

Parameters

Parameter	Type	Description
props?	ConfettiBlockProps	Configuration object

Returns

Element

Deprecated

Use the equivalent block from @matterway/sdk/UI instead. This block targets the old showUI path and will be removed when src/UI/ is dropped.

Confetti animation component displaying animated confetti particles.

Examples

Basic usage with defaults (80% height, CSS variable colors)

confetti();

Usage with explicit height in pixels

confetti({
  height: 300
});

Usage with percentage height

confetti({
  height: '100%'
});

Usage with custom colors

confetti({
  height: 300,
  colors: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FECA57']
});

Usage with dynamic height based on params with data and value

confetti({
  height: ({data}) => data.containerHeight || 300
});

Usage with dynamic colors based on params with data and value

confetti({
  height: 300,
  colors: ({data}) => data.theme === 'dark'
    ? ['#7FB069', '#B96AC9', '#E57AA3']
    : ['#FF6B6B', '#4ECDC4', '#45B7D1']
});

Usage with custom styling

confetti({
  height: 400,
  style: {
    position: 'absolute',
    top: 0,
    left: 0
  },
  className: 'celebration-confetti'
});