Background Blocks

A fully customizable grid component with active blocks for creating interactive layouts and dynamic backgrounds. Features responsive grid systems, hover effects, and customizable block animations. Perfect for modern web interfaces and engaging user experiences.

Installation

npx uilayouts@latest add blocks

Props

PropTypeDefaultDescription
activeDivsClassstringundefinedThe class name applied to active blocks.
activeDivsObject with number keysundefinedA mapping where each key is a column index and each value is a set of row indices for active blocks.
divClassstringundefinedThe class name applied to each block.
classnamestringundefinedAdditional class name applied to the outer container.
containerRefReact.RefObjectundefinedA React ref object for the container element used to calculate dimensions.