Box

The Box component serves as a flexible container and visual background element within the dashboard. It can be used to group, highlight, or provide visual structure for other components, improving overall readability and design aesthetics.

The Box supports customizable styles such as gradients, shadows, borders, and opacity, making it a versatile tool for creating polished dashboard layouts.

Best Situations to Use

Use a Box component when you want to:

• Provide a visual background for multiple components (charts, KPIs, text).

• Group related components together for logical structure.

• Highlight specific sections of a dashboard for emphasis.

• Create card-like or panel layouts for a clean and modern UI.

Not Recommended for:

• Representing data (use chart components instead).

• Interactive input scenarios (use controls like buttons, dropdowns, or radio buttons).

Properties

Background

• Shadow: Enable or disable a shadow effect for depth.

• Shadow Color: Select the hue for the shadow.

• Shadow Transparency: Adjust transparency between 0.0 (fully transparent) and 1.0 (fully opaque).

  • Example: A value of 0.1 creates a very light, subtle shadow.

General

• Component Name: Unique identifier for referencing the Box.

• Left: Position relative to the left edge of the container.

• Top: Position relative to the top edge of the container.

• Height: Vertical size of the component.

• Width: Horizontal size of the component.

• Initial Visibility: Defines whether the Box is displayed when the view loads.

• Click Value: Assign a value to trigger actions when the Box is clicked.

Style

• Gradient Rotation: Set gradient direction (0–360°).

  • Example: 90° creates a vertical gradient.

• Gradient: Apply two or more colors that blend based on rotation.

  • Open the Gradient Colors dialog to add or manage colors.

• Opacity: Adjust transparency between 0 (invisible) and 1 (fully opaque).

• Border Thickness: Set the thickness of the border.

• Border Radius: Round the Box corners for softer edges.

• Border Color: Choose a border color that complements the design.

Notes

• Use gradients and shadows together to create depth and hierarchy.

• Pair the Box with transparent opacity to layer multiple components.

• Rounded corners (Border Radius) help align the Box with modern UI design standards.