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.
Stack simplifies one-dimensional layouts by automatically handling spacing and direction. It eliminates manual margin adjustments, making it ideal for form fields, button groups, and navigation items.
Usage
Vertical Stack
By default, Stack arranges children vertically. Use the spacing prop to control gaps between elements.
Header
Content
Footer
Horizontal Stack
Set direction="row" to arrange children horizontally.
Home
About
Contact
Customization
Stack provides several props for customization, including spacing, direction, dividers, and responsive behavior. These options make it flexible for various layout requirements.
Responsive Direction
The direction prop accepts responsive values, allowing the stack to change direction based on screen size:
Card One
Card Two
Dividers
Use the divider prop to add visual separation between elements.
