Components

Box

The Box component is a flexible container built with flexbox for easy layout and alignment.

Logo

Usage

The Box component differs from other containers available in AueraUI in that its usage is intended to be multipurpose and open-ended. Components like Stack and Card, by contrast, feature usage-specific props that make them ideal for certain use cases: Stack for two-dimensional layouts, and Card for elevated surfaces.

Basic

Below is a basic usage of the Box component.

This is a basic Box content.

Direction

Use the direction prop to change the layout direction.

With motion

The Box component fully supports Motion props, making animations effortless. You can pass motion-specific props directly to Box without wrapping it in motion.div.

Sliding In From Left
Sliding In From Right

API Reference

See the comprehensive guide below for a complete reference to all of the props available to the components.

centered

Type:

boolean

If true, centers the content both vertically and horizontally within the Box.

Default:

false
direction

Type:

"row" | "column"

Specifies the layout direction of the Box.

Default:

row
wrap

Type:

boolean

Enables wrapping for items if they exceed the available space in a row layout.

Default:

false
fullWidth

Type:

boolean

If true, the Box will take up the full width of its container.

Default:

false

This component is built with Motion, enabling smooth and customizable animations. Learn more about Motion