Stack: the core component that can be used to stack elements in either the horizontal or vertical direction. By default, it applies space between its children using a modified version of the CSS lobotomized owl selector . This selector ensures consistent spacing between the stacked elements, creating a visually appealing layout.
HStack: designed specifically for horizontally stacking elements. It provides a cleaner and more semantic way to achieve horizontal layouts. You can use the HStack component to stack elements in a row, and it automatically applies spacing between the items.
VStack: similar to the HStack component but stacks elements vertically instead of horizontally. It allows you to create vertical layouts with ease, applying spacing between the items.
StackDivider: allows you to create dividers with various styles and customization options. By default, it renders a simple horizontal line as the divider.
The Stack component and the Flex component in Chakra UI provide similar functionality for spacing out their children, but they have some key differences to consider.
The Stack component is designed specifically for stacking elements, either horizontally or vertically, with consistent spacing between them. It is useful when you want to create stacked layouts with predefined spacing. However, the Stack component does not expand to fill the entire width of its container.
On the other hand, the Flex component is more versatile and powerful. It not only spaces out its children but also expands to fill the entire width of its container. This makes it ideal for creating flexible and responsive layouts. The Flex component allows you to define how the available space should be distributed among its children using the align and justify props, which control alignment and distribution along the main and cross axes.
The Stack component is great for creating stacked layouts with consistent spacing, while the Flex component is more suitable for creating flexible and adaptive layouts that fill the available space. Consider using the Stack component when you need a straightforward way to stack elements, and use the Flex component when you require more control over the layout and the ability to fill available space.
The three Stack components can be imported as follows:
Basic Stack Usage
To stack items horizontally, you can use the direction prop and set it to 'row'. Additionally, you have the flexibility to adjust the alignment and distribution of the items using the align and justify props.
Basic HStack Usage
Basic VStack Usage
Using Stack Dividers
Did you know?
Creative Idea No. 1
Click a tab!
Creative Idea No. 2
Creative Idea No. 3
Get instant insights and track performance with our powerful real-time analytics dashboard.
Easily integrate our platform with your existing systems and workflows for a seamless experience.
Rest assured knowing that your data is protected with our robust security measures and encryption protocols.