Stack

Overview

Stack is a layout component that arranges content in a single direction, such as form fields. It maintains consistent across sequences of elements.

<Stack gap={4}>...</Stack>

Usage Guidelines

• Use for ordered groups: Use Stack to arrange content that should be read or used in sequence, such as form fields, settings rows, or sections of related information.
• Prefer vertical by default: Use the default vertical orientation for most layouts. Switch to horizontal only when items still read clearly in a row and the relationship between them stays obvious.
• Let Stack manage spacing: Use the gap prop to control separation between children. Avoid adding one-off margins to child elements.

API Reference

Stack

Examples

Orientation

Stacks display items in a vertical layout by default, but can become horizontal via the orientation property.

<Stack orientation="vertical" gap={4}>...</Stack>
<Stack orientation="horizontal" gap={4}>...</Stack>