Stack
The Stack component is a layout utility that manages one-dimensional layouts with flexible spacing and alignment. Built on Flexbox, it provides an efficient way to arrange elements vertically or horizontally with consistent spacing.
The Stack component arranges children in one-dimensional flow, either vertically or horizontally, with consistent spacing and no manual margin adjustments.
Vertical Stack
The default Stack orientation is vertical. Use the spacing prop to control the gap between children.
Header
Content
Footer
Horizontal Stack
Set direction="row" to arrange children horizontally. Useful for button groups and navigation items.
Home
About
Contact
Responsive Stack
Use responsive values for the direction prop to create adaptive layouts that stack vertically on mobile and horizontally on larger screens.
Card One
Card Two
Divider
Add visual separation between children using the divider prop.
Spacing
Use larger spacing values to create wider gaps. Common values range from 1 (8px) to 4 (32px).
Title
Description
Button Group
Use direction="row" to stack horizontal button groups with consistent spacing.
