Stack is built on Flexbox and optimized for one-dimensional layouts. It excels at organizing elements in a single direction while maintaining consistent spacing.

Best Practices

Use Cases

Stack is ideal for:

  • Form layouts with consistent vertical spacing
  • Button groups arranged horizontally or vertically
  • Navigation menus with proper spacing
  • Card content stacking
  • Lists with dividers

Stack vs Grid

Choose the right component:

  • Stack: One-dimensional layout (single direction)
  • Grid: Two-dimensional layout (rows and columns)

Stack Example (One Direction):

1

2

3

Spacing

Best Practices

Use consistent spacing values throughout your application:

  • spacing=1 (8px) for closely related elements
  • spacing=2 (16px) for standard spacing
  • spacing=3 (24px) for distinct sections
  • spacing=4 (32px) for major separations

Spacing = 1

Label
Input

Spacing = 3

Title
Body

Direction

  • direction="column" (default) for vertical stacking
  • direction="row" for horizontal arrangements
  • Use responsive values: direction={{ xs: "column", md: "row" }}

Dividers

  • Use to separate distinct sections
  • Use sparingly for best effect
  • Match divider style with your design system
Profile Settings
Notification Preferences
Privacy Controls

Examples

Form Layout

Organize form fields vertically with consistent spacing:

Input field

Input field

Button Groups

Use horizontal Stack for grouping related action buttons: