Stack

Use responsive direction to switch between different layouts for different screen sizes.

Use responsive gap to adjust spacing for different screen sizes.

The align prop controls how items are aligned along the cross axis (perpendicular to the main axis).

The justify prop controls how items are distributed along the main axis.

The divider prop adds visual separators between Stack items.

The wrap prop controls whether items should wrap to multiple lines when the container width is insufficient.

The textAlign prop controls the text alignment within the Stack container.

The bleed prop uses negative margins to extend content beyond its usual boundaries for improved layout integration.

The Stack component supports various sizing options including height, width, aspectRatio, and responsive sizing.

Use maxHeight, maxWidth, minHeight, and minWidth to control Stack boundaries.

Stack supports various background colors with appropriate text color combinations.

Stack supports various border colors and styles.

Stack supports various border radius options.

Stack supports various positioning options including relative, absolute, and sticky.

The overflow prop controls how content that exceeds the Stack boundaries is handled.

The animated prop enables smooth transitions for background, text, and border colors.

The inset prop and its variants (insetTop, insetStart, insetEnd, insetBottom) control positioning within positioned containers.

The margin prop and its variants control spacing outside the Stack container.

The padding prop and its variants control spacing inside the Stack container.

Stack.Item is a compound component that provides additional control over individual items within a Stack container. It allows for fine-grained control over item behavior, spacing, and layout.

The grow prop allows an item to expand and take up the remaining space in the Stack container.

The gapBefore prop adds custom spacing before a specific item, overriding the parent Stack's gap for that item.

The columns prop allows you to specify the number of columns for a Stack.Item, useful for creating grid-like layouts within a Stack.

The order prop allows you to specify the arrangement of Stack.Item components in a specific sequence.