Stack

Stack is a component that allows you to compose elements vertically.

Basic example usage:

                                                
                                                <Stack>
                                                  <div>Block 1</div>
                                                  <div>Block 2</div>
                                                  <div>Block 3</div>
                                                </Stack>

Advanced example usage:

                                                
                                                <Stack elementType="ul" hasIntermediateDividers hasStartDivider hasEndDivider>
                                                  <li>
                                                    <div>List item 1</div>
                                                  </li>
                                                  <li>
                                                    <div>List item 1</div>
                                                  </li>
                                                  <li>
                                                    <div>List item 1</div>
                                                  </li>
                                                </Stack>

Custom Spacing

You can use the spacing prop to apply custom spacing between items. The prop accepts either a spacing token (e.g. space-100) or an object with breakpoint keys and spacing token values.

Default spacing:

                                                
                                                <Stack hasSpacing>{/* Stacked content */}</Stack>

Custom spacing:

                                                
                                                <Stack spacing="space-1200">{/* Stacked content */}</Stack>

Custom responsive spacing:

                                                
                                                <Stack spacing={{ mobile: 'space-400', tablet: 'space-800' }}>{/* Stacked content */}</Stack>

API

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

Stack Item

StackItem is required when using dividers between items. It is a wrapper component that should be used inside the Stack component.

When Stack uses elementType="ul" or elementType="ol", StackItem automatically defaults to elementType="li", so you do not need to set it on each item. You can still pass elementType explicitly on StackItem to override this inherited value.

Basic example usage:

                                                
                                                <Stack hasIntermediateDividers>
                                                  <StackItem>Stack Item 1</StackItem>
                                                  <StackItem>Stack Item 2</StackItem>
                                                  <StackItem>Stack Item 3</StackItem>
                                                </Stack>

Advanced example usage (with list semantics; elementType="li" is inherited from the Stack):

                                                
                                                <Stack elementType="ul" hasSpacing hasIntermediateDividers hasStartDivider hasEndDivider>
                                                  <StackItem>Stack Item 1</StackItem>
                                                  <StackItem>Stack Item 2</StackItem>
                                                  <StackItem>Stack Item 3</StackItem>
                                                </Stack>

API

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.