Chakra-UI

I♥️Components

Stack

|

Chakra Docs

|

⦾ The Chakra UI Stack component is a powerful layout tool that allows you to group elements together and apply space between them. It provides a straightforward and efficient way to create stacked layouts in both horizontal and vertical directions. Additionally, Chakra UI offers two specialized components, HStack and VStack, for stacking elements exclusively in the horizontal and vertical directions, respectively.
  • 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.

Stack - Flex Comparison:

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:

Examples

Basic Stack Usage

⦾ In this example, we have a Stack component with a spacing of 24 pixels. Inside the Stack, there are three Square components. Each Square has a size of 100 pixels. The Stack component ensures that there is consistent spacing between the Box components, creating a visually appealing stacked layout.

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.

1
2
3

Code

Basic HStack Usage

⦾ In the following example, the HStack allows us to horizontally stack elements with a specified spacing of 24 pixels. Within the HStack component, there are again three Square components. However, this time, by using the HStack component, we achieve a horizontal layout where the elements are evenly spaced with the specified spacing between them.
1
2
3

Code

Basic VStack Usage

⦾ In the following example, we have our three Square components once again. Notice the difference however, between this example and the Stack example above.VStack and Stack are very similiar, however the key difference between them is their default alignment behavior. VStack centers its children vertically by default, while Stack does not apply any default alignment.
1
2
3

Code

Responsive Direction

⦾ One of the powerful features of the Stack component is its ability to change the stack direction and spacing responsively. By passing an array of values to the direction prop, you can specify different directions for different screen sizes. This allows for flexible and adaptive layouts. This example will remain in a row direction until the screen size becomes small, at which point it will switch to a column direction.
1
2
3

Code

Using Stack Dividers

⦾ The Stack component allows you to easily add dividers by using the divider prop. You can provide the StackDivider component from Chakra UI as the value, or use any custom React element as the divider. This is an incredibly simple way to enhance the design of stacked content while at the same time providing an attactive design improvement when desired.
1
2
3

Code

Did you know?

Creative Idea No. 1

Custom Tabs: In this example, we're using the HStack component to create a custom tab layout. Each tab is represented by a Box component wrapped inside the HStack. By applying appropriate styling, such as background color, cursor, and other desired styles, we create visually appealing and interactive tabs.

Tab 1

Tab 2

Tab 3

Click a tab!

Code

Creative Idea No. 2

Vertical Timeline: You can create a vertical timeline using the VStack component. By stacking Box components with appropriate styling and applying a custom divider, you can construct an elegant and informative timeline interface.

Events

Event 1
Event description 1
Event 2
Event description 2
Event 3
Event description 3

Code

Creative Idea No. 3

Feature Cards: These are UI elements used to highlight and present key features, services, or benefits of a product, service, or application. They are typically displayed as individual cards, each containing a concise title, a brief description, and sometimes an accompanying image or icon.
Feature cards are useful for information presentation, grabbing user attention, encouraging user engagement, and aiding in easy comparison between various items, concepts, or products.

Real-Time Analytics

Get instant insights and track performance with our powerful real-time analytics dashboard.

Seamless Integration

Easily integrate our platform with your existing systems and workflows for a seamless experience.

Advanced Security

Rest assured knowing that your data is protected with our robust security measures and encryption protocols.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.