Element Component

index

2

status

Draft

The Element component is the foundational container for all Blueprint compositions. It manages interactive state, provides context for child layers, and handles explosion transformations.

Basic Usage

<Element borderRadius="0.5rem" width="auto" height="auto">
  <!-- Child layers go here -->
</Element>

Props

• borderRadius – Controls the border radius of all child layers
• explosionSeparation – Distance between layers when exploded (default: “10px”)
• state – Interactive state: “default”, “hover”, “pressed”, or “focus”
• width, height – Dimensions of the element
• variants – Object defining different visual states with transform properties

Interactive States

Elements can be interactive (responding to user input) or locked to a specific state:

<!-- Interactive element -->
<Element state="default">...</Element>

<!-- Locked to hover state -->
<Element state="hover">...</Element>

Variants and Transforms

Elements support variants for different states with transform properties:

<Element 
  variants={{
    default: {
      translateY: "0px",
      scale: 1
    },
    hover: {
      translateY: "-2px", 
      scale: 1.05
    },
    pressed: {
      translateY: "1px",
      scale: 0.98
    }
  }}
>
  <!-- layers -->
</Element>

Supported transform properties:

• translateX, translateY – Translation offsets
• scale – Uniform scaling factor
• rotate – Rotation angle (e.g., “45deg”)